10 Окт SVG-анимации на чистом CSS
Анимированная SVG-графика помогает нам в оформлении сайтов и приложений, когда хочется вызвать дополнительный интерес у пользователя. К тому же при правильной оптимизации кода она практически не влияет на скорость загрузки страниц. В этом нам могут помочь различные плагины, вроде MorphSVG, SVG.js, Snap.svg и т.д., но использование библиотек не всегда целесообразно, поскольку:
- Не все плагины бесплатны;
- Дополнительные обращения к CDN при подключении внешних библиотек;
- Наконец, собственноручно написанный код всегда лучше.
Кроме того, если вам нужно создать несложную SVG-анимацию всего пары элементов на одной единственной странице, не очень логично подключать для этого целую библиотеку с кучей функций, которыми вы не собираетесь пользоваться.
Приведем пример: мы сделали анимацию отрисовки круга одной линией. В первом случае анимация реализована на чистом CSS, во втором — с помощью плагина DrawSVG от GSAP. Результаты практически идентичны — есть небольшая разница, но в данном случае можно пренебречь нюансами.
Казалось бы, 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-графику только с помощью кода без использования графических редакторов, вы можете прочесть в этой статье.
И теперь сделаем так, чтобы птица сделала взмах крыльями. Для этого нарисуем еще два кадра анимации — крылья в верхнем положении и в нижнем:
Каждое из крыльев во всех трех случаях имеет одинаковое количество узлов (это важно!) и состоит из двух квадратичных кривых Безье и одной вертикальной линии. На рисунке выше мы показали координаты всех опорных точек на каждом кадре анимации, при этом центральные точки будут статичны.
Теперь для удобства мы объединим заливки левого и правого крыльев в одну — для этого всего лишь нужно поместить все координаты внутри одного пути (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 чистым кодом, посмотрите это видео — оно поможет достаточно быстро вникнуть в саму суть определения координат векторных направляющих.
Подписывайтесь на наш канал, следите за обновлениями на сайте, рисуйте, разрабатывайте и развлекайтесь!