Email *

SVG-анимации на чистом CSS

SVG-анимации на чистом CSS

SVG-анимации на чистом CSS

Анимированная SVG-графика помогает нам в оформлении сайтов и приложений, когда хочется вызвать дополнительный интерес у пользователя. К тому же при правильной оптимизации кода она практически не влияет на скорость загрузки страниц. В этом нам могут помочь различные плагины, вроде MorphSVG, SVG.js, Snap.svg и т.д., но использование библиотек не всегда целесообразно, поскольку:

  • Не все плагины бесплатны;
  • Дополнительные обращения к CDN при подключении внешних библиотек;
  • Наконец, собственноручно написанный код всегда лучше.

Кроме того, если вам нужно создать несложную SVG-анимацию всего пары элементов на одной единственной странице, не очень логично подключать для этого целую библиотеку с кучей функций, которыми вы не собираетесь пользоваться.

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

See the Pen
gOOpvGN
by Alexander Webmassa (@Webmassa)
on CodePen.

Казалось бы, CSS кода даже чуть больше, чем JS, но для реализации той же анимации с помощью DrawSVG пришлось подключать целых две внешних библиотеки! Поэтому прежде чем пользоваться сторонними плагинами, предлагаем разобраться в сути SVG-анимаций и попробовать сделать то же самое, но чистым кодом.


Для начала разберемся, как SVG-графика, статичная изначально, может поменять внешний вид? — для этого возьмем такой нехитрый рисунок «птицы» и посмотрим на его код. Там мы найдем строчки с двумя путями заливок (path) — это левое и правое крылья.

<g>
<path id="left-wing" d="M 5 10 Q 25 5 50 15 L 50 25 Q 25 10 5 10"/>
<path id="right-wing" d="M 95 10 Q 75 5 50 15 L 50 25 Q 75 10 95 10"/>
</g>

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

И теперь сделаем так, чтобы птица сделала взмах крыльями. Для этого нарисуем еще два кадра анимации — крылья в верхнем положении и в нижнем:

SVG-анимации на чистом CSS

Каждое из крыльев во всех трех случаях имеет одинаковое количество узлов (это важно!) и состоит из двух квадратичных кривых Безье и одной вертикальной линии. На рисунке выше мы показали координаты всех опорных точек на каждом кадре анимации, при этом центральные точки будут статичны.

Теперь для удобства мы объединим заливки левого и правого крыльев в одну — для этого всего лишь нужно поместить все координаты внутри одного пути (path). Код, который вы видели выше, теперь выглядит так:

<g>
<path id="wings" d="M 5 10 Q 25 5 50 15 L 50 25 Q 25 10 5 10 M 95 10 Q 75 5 50 15 L 50 25 Q 75 10 95 10"/>
</g>

(второй кадр)

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

<g>
<path id="wings" d="M 5 5 Q 25 0 50 15 L 50 25 Q 25 5 5 5 M 95 5 Q 75 0 50 15 L 50 25 Q 75 5 95 5"/>
</g>
<g>
<path id="wings" g="M 7 30 Q 25 25 50 15 L 50 25 Q 25 30 7 30 M 93 30 Q 75 25 50 15 L 50 25 Q 75 30 93 30"/>
</g>

Теперь наконец приступаем к CSS. У нас есть общий класс SVG-рисунка «bird» и крылья (id=«wings»). К последним как раз и будет относится все анимация. Для нее мы задаем следующие параметры:

  • Длительность — в данном случае 1 секунда;
  • Название — flying;
  • Временная функция (linear — равномерная, без изменений скорости);
  • Бесконечное количество повторов (infinite);
  • Направление туда-обратно (alternate).

А теперь полученные нами координаты заливок превращаются в параметры ключевых кадров «d: path». Начальный кадр (0%) — верхнее положение крыльев, 50% — исходное изображение, 100% — нижнее положение. Можно также добавить другие ключевые кадры, усложнить анимацию, задав изменение других параметров (цвет заливки, масштабирование и перемещение рисунка и т.д.).

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

See the Pen
Flying bird
by Alexander Webmassa (@Webmassa)
on CodePen.

Однако, есть и еще один способ создать такую же анимацию чистым кодом не только без сторонних плагинов, но даже без CSS! Это старый добрый SMIL (Synchronized Multimedia Integration Language), который можно вставить прямо в XML-разметку, но об этом мы расскажем уже в следующей статье.

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

Подписывайтесь на наш канал, следите за обновлениями на сайте, рисуйте, разрабатывайте и развлекайтесь!