Как создать анимацию SVG с помощью 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.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)