Анимация SVG может быть выполнена через нативные элементы, такие как а также , Но для тех, кто более знаком с CSS-анимацией, чтобы не волноваться, мы также можем использовать свойства CSS-анимации для анимированных SVG.

CSS-анимация также может быть альтернативным способом использования библиотеки JavaScript, такой как SnapSVG, В этом посте мы увидим, что мы можем предложить с помощью CSS Animation в SVG.

1. Создание фигур

Прежде всего нам нужно будет нарисовать формы и объекты, которые мы хотим оживить. Вы можете использовать такие приложения, как Sketch, Adobe Illustrator или Inkscape, чтобы создать их.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Я собираюсь использовать Sketch в качестве примера для этого шага. Выберите объект, который вы хотите превратить в формат SVG. В правом нижнем углу окна нажмите «Сделать экспортируемым». Выберите формат SVG, затем нажмите Export {object-name}. Вы должны сделать это один объект за один раз.

2. Вставьте SVG в HTML

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

Запустите терминал или командную строку и установите SVGO с помощью следующей командной строки:

[sudo] npm установить -g svgo

Настройте команду svgo на файл SVG, используя –pretty для создания читаемого кода SVG:

svgo rocket.svg –pretty

Если у вас есть несколько SVG в каталоге, вы можете оптимизировать их все вместе, сразу. Предполагая, что каталог называется / images, затем из родительского каталога используйте эту команду:

svgo -f images –pretty

Давайте посмотрим на разницу до и после использования SVGO.
Скопируйте код в файл SVG и вставьте в файл HTML. Мы будем работать с рабочей областью шириной 800 на 600 пикселей, поэтому давайте не забудем определить ширину элемента SVG.

SVG устанавливается в файле HTML. Нам нужно будет определить идентификатор для каждого объекта, чтобы мы могли выбрать их в CSS позже.

Для этого урока нам нужно определить идентификатор ракеты, пламени и некоторых облаков. Чтобы объекты могли обрабатывать этап анимации позже, нам нужно добавить id – вы также можете использовать class – к каждому объекту. На этом этапе код будет выглядеть так:

3. Анимировать с помощью CSS

Теперь давайте повеселимся. План состоит в том, чтобы запустить ракету в космос. Ракета разделена на две группы; сама ракета и пламя.

Прежде всего, мы помещаем ракету в центр рабочего пространства следующим образом:

#rocket {
transform: translate (260px, 200px);
}
Что вы видите, это:
Теперь, чтобы ракета смотрела вверх, нам нужно создать иллюзию падающих облаков. CSS, который мы используем для этого:

Cloud1 {

анимация: осень 1с линейная бесконечная;
}
@keyframes fall {
от{
transform: translateY (-100px);
}
к {
transform: translateY (1000px)
}
}

Чтобы это выглядело еще более реалистично, давайте анимируем четыре облака и заставляем их «падать» на разных скоростях. Мы также разместим их по-другому от оси X.

Второе облако будет иметь такой код:

# Cloud2 {

анимация: осень-2 2с линейная бесконечная;
}
@keyframes fall-2 {
от{
transform: translate (200px, -100px);
}
к {
transform: translate (200px, 1000px)
}
}

Обратите внимание, что мы сместили облако №2 немного вправо на 200 пикселей с помощью translate. На данном этапе результат должен выглядеть следующим образом.

Далее, давайте заставим ракету ожить. Мы назначим ключевой кадр анимации следующим образом:

#rocket {

анимация: всплывающее окно 1с легкость бесконечно;
}
@keyframes popup {
0% {
transform: translate (260px, 200px);
}
50% {
transform: translate (260px, 240px);
}
100% {
transform: translate (260px, 200px);
}
}

И добавьте анимацию к пламени ракеты:

#flame {
анимация: встряхнуть .2s линейный бесконечный;
}
@keyframes shake {
0% {transform: translate (55px, 135px) rotate (7deg); }
20% {transform: translate (55px, 135px) rotate (0deg); }
40% {transform: translate (55px, 135px) rotate (-7deg); }
60% {transform: translate (55px, 135px) rotate (0deg); }
100% {transform: translate (55px, 135px) rotate (0deg); }
}

Правильно! Теперь, когда все наши коды установлены, анимация должна работать на нашем SVG.

Взгляните на нашу ракету, летящую в космос.

Последняя мысль

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

Если вы хотите начать с самых основ, вы можете начать здесь с этого поста: A Look Into: Scalable Vector Graphics (SVG) Animation или следуйте остальной части серии SVG.