Максим Лейзерович создал эффект маршевых муравьев с каким-то отвратительно простым SVG.
См. Маркерные муравьи Pen SVG Максима Лейзеровича (@round) на CodePen.
Давайте разбить его пополам и посмотреть, как все маленькие части собрались вместе.
Содержание статьи
Шаг 1: Нарисуйте прямоугольник dang
Мы можем настроить наш SVG как квадрат, но игнорировать пропорции и использовать его в любом прямоугольнике, который нам бы хотелось.
. Напоминаем, что система координат внутри SVG не имеет единицы измерения. Здесь мы говорим: «Этот SVG представляет собой сетку 40x40 . Теперь нарисуем прямоугольник, покрывающий всю сетку». Тем не менее, мы все еще можем масштабировать весь SVG в CSS. Давайте заставим его ровно половину области просмотра:
svg {
позиция: абсолютная;
ширина: 50vw;
высота: 50vh;
top: 0;
право: 0;
bottom: 0;
left: 0;
margin: auto;
}
Шаг 2: Борьба с хлыстом
. Потому что мы сделали так, чтобы ящик и сетка были такими гибкими, мы получим некоторый хлюпающий эффект, который мы, вероятно, могли бы предсказать. Скажем, у нас есть удар, который 2 широк в нашей системе координат. Когда SVG узкий, ему еще нужно разбить это узкое пространство на 40 единиц. Это означает, что удар будет довольно узким.
Мы можем остановить это, сказав, что удар не является масштабированием.
rect {
fill: none;
ход: # 000;
ширина хода: 10 пикселей;
векторный эффект: немасштабирование;
}
Теперь этот штрих будет больше похож на границу HTML-элемента.
Шаг 3: Нарисуйте поперечные линии
В демонстрации Максима он рисует линии посередине с четырьмя элементами пути. Помните, что у нас есть система координат 40x40 поэтому математика велика:
Это четыре линии, которые начинаются в точном центре ( 20,20 ) и идут в каждый угол. Почему четыре линии вместо двух, которые идут в углу? Я подозреваю, что это связано с тем, что анимация маршевых муравьев позже выглядит немного прохладнее, если все муравьи исходят из центра, а не пересекаются.
Мне нравится хороший синтаксис пути, но давайте использовать только две строки:
Если мы применим наш удар к нашей rect и линиям это сработает! Но мы видим немного странную проблему:
rect, строка {
fill: none;
ход: # 000;
ширина хода: 1px;
векторный эффект: немасштабирование;
}
Внешняя линия выглядит тоньше, чем внутренние линии, и причина в том, что внешний прямоугольник обнимает точный внешний вид SVG. В результате все, что находится за его пределами, отключается. Это довольно расстраивает, но штрихи в SVG всегда опираются на пути, на которых они сидят, так что скрыта половина внешнего удара ( 0.5px ). Мы можем удвоить прямоугольник, чтобы «исправить» его:
rect, строка {
fill: none;
ход: # 000;
ширина хода: 1px;
векторный эффект: немасштабирование;
}
rect {
ширина хода: 2px;
}
Максим также просматривает форму-рендеринг: geometricPrecision; там, потому что, по-видимому, он немного очищает вещи от не-сетчатых дисплеев.
Шаг 3: Муравьи тире
В отличие от странной трансграничной вещи, SVG-штрихи предлагают больше контроля, чем границы CSS. Например, CSS имеет пунктирные и пунктирные стили границ, но не контролирует их. В SVG мы контролируем длину тире и объем пространства между ними, благодаря stroke-dasharray :
rect, строка {
...
/ * 8px тире с 2px пробелами * /
инсульт-дашарэй: 8px 2px;
}
Мы можем даже получить с ней странные вещи:
Но муравьи хорошо смотрятся с 4px тире и 4px пробелов между ними, поэтому мы можем использовать сокращенную версию stroke-dasharray : 4px; .
Шаг 5: Анимируйте муравьев!
«Маршевая» часть «маршевых муравьев» происходит от анимации. Шаги SVG также могут быть смещены на определенное расстояние. Если мы выберем расстояние, которое точно такое же, как тире и зазор вместе, то анимируйте смещение этого расстояния, мы получим плавное движение дизайна удара. Мы даже рассмотрели это раньше, чтобы создать эффект SVG, который рисует сам.
rect, строка {
...
stroke-dasharray: 4px;
stroke-dashoffset: 8px;
анимация: ход 0.2s линейный бесконечный;
}
@keyframes stroke {
к {
stroke-dashoffset: 0;
}
}
Вот наша реплика и оригинал:
См. Маркерные муравьи Pen SVG Максима Лейзеровича (@round) на CodePen.
Опять же, возможно, моей любимой частью здесь являются четкие строки 1px которые не ограничены размером или соотношением сторон вообще и как мало кода требуется, чтобы собрать все это вместе.
Связанные
Загрузка...
