Анимация линий и замкнутых контуров SVG на чистом CSS (для WordPress и не только)

Во время работы над SVG Divider для Elementor разработчик написавший данную статью узнал, как вдохнуть жизнь в произведения своего искусства. Оценив некоторые библиотеки, он решил вручную анимировать SVG-строки, используя чистый CSS. Такой подход уменьшает зависимости и снижает влияние плагина на сайты клиентов. Между тем, результат приобретает безупречный вид и обеспечивает безупречную производительность. 

Далее переведенный текст статьи, от лица автора.

Сначала ознакомьтесь с основами. При использовании stroke-dasharrayи stroke-dashoffsetатрибуты для анимации SVG нет ничего нового. Могу предложить несколько малоизвестных или продвинутых приемов. К ним относятся манипулирование начальной точкой или растущие линии наружу в нескольких направлениях. Анимировать простые линии легко; это просто открытые пути с очевидным началом и концом. В приведенных ниже примерах я показываю это одной прямой линией длиной 100 единиц. Тем не менее, я в основном фокусируюсь на анимации замкнутых контуров с интересными формами, которые кажутся случайными начальными точками и направлениями рисования. Каждый демонстрационный путь составляет ~ 100 единиц, согласно. Давайте продвинемся от простых к сложным движениям.SVGGeometryElement.getTotalLength()

Предпосылки

Самое главное – знать длину своего пути к анимации. Получите эту информацию с помощью JS или Illustrator. Учитывая, что у меня были сотни путей, я пошел дальше и написал собственный сценарий, в котором отмечается длина каждой строки в каждом произведении искусства. Важно понимать, что вы будете работать с этими числами и жестко запрограммировать их (деление пополам, удвоение, добавление к ним значений), поэтому измерение пути не происходит во время выполнения. Мои примеры не содержат JavaScript.

Убедитесь, что геометрия пути не содержит ошибок. В любом случае направление рисования и начальная точка цикла несколько случайны (ну, им нужно откуда-то начинать). Эти факторы зависят от того, как их нарисовал дизайнер, но я здесь, чтобы научить вас не волноваться из-за этой проблемы.

Самая простая линейная анимация SVG

В первом примере линии рисуются от их стандартного начала (красный маркер). В это время начало остается неизменным, а анимация завершается через 100 единиц. Благодаря, в линейке 100 единиц сплошного цвета, за которыми следуют 100 единиц пустоты. Он начинает вытягиваться на 100 единиц с использованием. Я уменьшаю это значение до 0, чтобы анимация могла выдвинуть твердую часть линии в поле зрения.stroke-dasharray: 100;``stroke-dashoffset: 100;

План выглядит достаточно просто:

@keyframes reveal {
    to {
        stroke-dashoffset: 0;
    }
}
svg path {
    stroke-dashoffset: FULL_LENGTH;
    stroke-dasharray: FULL_LENGTH;
    animation: reveal 1s ease-in-out 0s forwards;
}

Обратите внимание:

• FULL_LENGTH– длина пути, которую нужно заменить фактическим значением. Используйте безразмерный номер.
• Вместо селектора svg pathвыберите объект, например линию, прямоугольник, круг, многоугольник и т. Д. Если несколько строк должны анимироваться вместе, отрегулируйте соответственно. Если ваши пути не имеют имени, вы можете использовать псевдоклассы, например path:nth-of-type(3). Я активно использовал их и учился на : nth Tester и nthmaster.com.
• Объект @keyframes revealдолжен иметь уникальное имя и соответствующий префикс. Без сомнения, для отдельных путей часто требуются собственные ключевые кадры.
• Старайтесь избегать отрицательных значений смещения черточки, так как вы можете увидеть мигание или мигание в Safari.
• В следующих примерах я делюсь кодом в этом формате чертежа, где вы видите математику, лежащую в основе вычислений. Конечно, вы можете проверить фактический демонстрационный код на JSFiddle.

Контролируйте направление

Скажем, мне нужно направление анимации по часовой стрелке на каждом пути. Если присмотреться, мяч и сердце идут против часовой стрелки (вверху). Я пропустил неизменные, поэтому вы можете увидеть только те, которые я поменял местами:

Решение для разворота делает сразу несколько вещей.

1. Линия невидима, с 0 тире и 100 пробелами.
2. Он становится видимым при 100 единицах рывка и 0 пробелах.
3. Смещение тянет его назад на 100 единиц, тем самым обращая его вспять.

Чертеж выглядит так:

@keyframes reversed {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: FULL_LENGTH;
    }
}
svg path {
    animation: reversed 1s ease-in-out 0s forwards;
}

Чтобы полностью понять, что происходит, осознайте, что образец линии повторяется. Я воздействую на прямую контрольную линию, чтобы показать, что сплошная черта материализуется в конце линии. Копия той же линии, также размножается в начале (перед красным маркером). Он простирается влево, поэтому невидим. Вот рентгеновский снимок, показывающий, что происходит на 100 единицах до и после линии! Я использую этот циклический механизм, когда анимирую элементы SVG с замкнутыми контурами.

Да, есть несколько решений. Схема второго примера сохраняет массив штрихов неподвижным на всей длине и только анимирует смещение штрихов от полной длины до двойной длины. Используйте то, что вам больше нравится!

@keyframes alternative-reversed {
    from {
        stroke-dashoffset: FULL_LENGTH;
    }
    to {
        stroke-dashoffset: DOUBLE_LENGTH;
    }
}
svg path {
    stroke-dasharray: FULL_LENGTH;
    animation: alternative-reversed 1s ease-in-out 0s forwards;
}

Анимируйте линии SVG из выбранной начальной точки

Затем я перемещаю начальную точку анимации, не затрагивая геометрию. Поскольку линия похожа на поезд, который ходит по кругу, не имеет большого значения, где начинается путь. Есть три разных сценария.

• Темные линии просто начинаются с другой стороны замкнутого пути или середины открытого пути.
• Фиолетовые сохраняют свое ранее измененное направление, начиная с противоположной стороны.
• У синих SVG есть собственные отправные точки, чтобы они выглядели лучше.

Начни с другой стороны

Аналогично последнему трюку, значения массива тире меняются местами, поэтому рисуется линия. Поскольку смещение штриха остается неизменным, исходное направление рисования остается неизменным. Однако анимация начинается с противоположной стороны с использованием смещения на половину длины (полезно для симметричных путей).

@keyframes start-from-other-side {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: HALF_LENGTH;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: HALF_LENGTH;
    }
}
svg path {
    animation: start-from-other-side 1s ease-in-out 0s forwards
}

Поменять направление и начать с другой стороны

Вместо смещения смещения тире ровно на половину длины, вы можете выбрать другое значение, чтобы начать где-нибудь еще. Однако вам нужно добавить к нему полную длину, чтобы изменить направление.

@keyframes other-side-and-reverse {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: HALF_LENGTH;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: FULL_LENGTH + HALF_LENGTH;
    }
}
svg path {
    animation: other-side-and-reverse 1s ease-in-out 0s forwards;
}

Произвольная начальная точка

На примере бита Twitch я отодвинул начальную точку на 17 пикселей, но это может быть что угодно. Используйте метод проб и ошибок, чтобы найти лучшее значение.

@keyframes custom-start-point {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: 17;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: 17;
    }
}
svg path {
    animation: custom-start-point 1s ease-in-out 0s forwards;
}

Анимируйте SVG контуры наизнанку

В этом примере линия перемещается от середины наружу. Для начала ему нужно смещение на половину длины, которое я увеличиваю до полной длины, чтобы оттянуть линию, пока она расширяется. У фиолетовых разные правила. Infinity также может использовать пользовательское конечное положение, подробнее об этом позже.

План не должен вызывать удивления:

@keyframes inside-out {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: HALF_LENGTH;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: FULL_LENGTH;
    }
}
svg path {
    animation: inside-out 1s ease-in-out 0s forwards;
}

Наизнанку из произвольной позиции

Поскольку Twitch bit и infinity – это особые снежинки, мне пришлось изменить положение их начальной точки анимации. Значение (здесь 34) может быть любым, кроме добавления его к половинной и полной длине соответственно.

@keyframes custom-inside-out {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: HALF_LENGTH + 34;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: FULL_LENGTH + 34;
    }
}
svg path {
    animation: custom-inside-out 1s ease-in-out 0s forwards;
}

От концов к середине

Этот подход противоположен изнанке наружу, только снаружи внутрь, если хотите. На открытых контурах (таких как прямая линия) это вызывает эффект «двойной линии», как если бы два пера рисовали SVG. Он работает, преобразуя линию с 0 штрихами и 100 пробелами в версию с пробелами 50 и 0. Мы знаем, что черточки соединяются без пробелов. Кроме того, я позволяю рывку достигать только половины длины, сокращая разрыв в два раза быстрее. Я решил отозвать особый подход к паршивым овцам, так как они все равно будут улучшены в следующем разделе.

Наконец, чертеж без смещения тире:

@keyframes outside-in {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
    }
    to {
        stroke-dasharray: HALF_LENGTH 0;
    }
}
svg path {
    animation: outside-in 1s ease-in-out 0s forwards;
}

Контролируйте как начальную, так и конечную точки

Полный контроль над тем, как анимация рисует линии, может быть весьма кстати. По определению, управление как началом, так и концом означает, что анимация включает в себя две движущиеся головки линий, которые перемещаются в общий пункт назначения. В противном случае часть SVG останется невидимой. Если ключевые точки близки, один сегмент линии будет двигаться медленно, а другой должен двигаться быстро, чтобы одновременно покрыть большую площадь.

• Темные линии разделены на 1/4 и 3/4, но это не особенно полезно для этих форм.
• Пурпурный может лучше всего выиграть от такого полного художественного контроля.
• Синий показывает, что уменьшение смещения черточки приводит к результату, подобному прелоадеру.

На схеме показано использование произвольных начальных и конечных точек. Не бойтесь превышать полную длину; это единственный способ избежать отрицательных значений. Когда для смещения меньше, чем от, вы получите то, что круг имеет.

@keyframes custom-start-end {
    from {
        stroke-dasharray: 0 FULL_LENGTH;
        stroke-dashoffset: ANY_START;
    }
    to {
        stroke-dasharray: FULL_LENGTH 0;
        stroke-dashoffset: ANY_END;
    }
}
svg path {
    animation: custom-start-end 1s ease-in-out 0s forwards;
}

Двойные линии феерии

Последний пример снимет ограничения и раскроет ваше воображение. Пропуск №2 и / или №3 также дает интересные результаты. Сломать:

1. В качестве основы двойные линии закрепляют штрихами половинной длины.
2. Сдвиг анимации на четверть с помощью смещения тире перемещает начальную точку между началом координат и противоположным концом (или средней точкой).
3. Добавление разницы длины в четверть в смещение (от до) приводит к перемещению всех заголовков линий.

Чертеж темных:

@keyframes double-lines {
    from {
        stroke-dasharray: 0 HALF_LENGTH;
        stroke-dashoffset: QUARTER_LENGTH;
    }
    to {
        stroke-dasharray: HALF_LENGTH 0;
        stroke-dashoffset: HALF_LENGTH;
    }
}
svg path {
    animation: double-lines 1s ease-in-out 0s forwards;
}

Конечно, особого внимания заслуживают фиолетовые. Фактический код Infinity:

@keyframes infinity-double-lines {
    from {
        stroke-dasharray: 0 53 0 47;
        stroke-dashoffset: 37;
    }
    to {
        stroke-dasharray: 53 0 47 0;
        stroke-dashoffset: 60;
    }
}
svg .infinity {
    animation: infinity-double-lines 8s ease-in-out 0s alternate infinite;
    stroke: #8D69D8;
}

Нет смысла придумывать чертежи необычных форм, ведь каждая уникальна. Однако есть на что обратить внимание. Сумма значений массива тире должна быть полной длиной. Я использовал несколько компонентов с дефисом, и они меняются местами, как и в предыдущих примерах.

Вывод

Подводя итог, можно сказать, что строки SVG можно анимировать без какой-либо сторонней библиотеки. Все, что вам нужно, это чертежи и немного логического мышления. Я обнаружил, что мои результаты значительно отличаются от автоматически созданных анимаций. Иными словами, с некоторым дизайнерским чутьем вы можете имитировать естественный поток рисования. Конечно, есть еще много кусочков и частей, которые составляют плагин, который использует эти анимации. Некоторые из дополнительных функций, которые я использовал для SVG Divider for Elementor, включают:

• Управление состояниями анимации через JavaScript.
• Ленивый запуск через Intersection Observer.
• Использование задержек для объединения нескольких анимаций, как если бы они были одной.
• Пользовательские функции плавности.
• Использование прозрачности в ключевых кадрах в дополнение к атрибутам тире.
• Эластичная анимация пунктирных линий или «муравейник».

Дайте мне знать в комментариях, если у вас есть какие-либо вопросы или вы хотите узнать больше по определенной теме. Домашнее задание: изучите примеры JSFiddle и поиграйте со значениями!

Источник записи: https://letswp.io