Как создать SVG-анимацию с помощью CSS
Анимация SVG может быть выполнена через нативные элементы, такие как
CSS-анимация также может быть альтернативным способом использования библиотеки JavaScript, такой как SnapSVG. В этом посте мы увидим, что мы можем предложить с помощью CSS Animation в SVG..
1. Создание фигур
Прежде всего, нам нужно будет нарисовать формы и объекты, которые мы хотим оживить. Вы можете использовать такие приложения, как эскиз, Adobe Illustrator, или же Inkscape создать один.
Для этого примера я нарисовал облачное небо в качестве фона и ракетный корабль, стреляющий вверх, включая пламя:
Закончив рисовать, нам нужно экспортировать каждый созданный нами объект в SVG.
Я собираюсь использовать Sketch в качестве примера для этого шага. Выберите объект, который вы хотите превратить в формат SVG. В правом нижнем углу окна нажмите Сделать экспорт. Выберите формат SVG, затем нажмите Export object-name. Вы должны сделать этот один объект за один раз.
2. Вставьте SVG в HTML
Когда вы откроете файл SVG в редакторе кода, вы обнаружите, что коды SVG довольно грязные. Следовательно, прежде чем мы развернем файл SVG, давайте приведем в порядок код и оптимизируем его с помощью этого инструмента командной строки под названием SVGO..
запуск Терминал или же Командная строка, и установите SVGO с этой командной строкой:
[sudo] npm install -g svgo
Настройте команду, svgo, в файле SVG с помощью --хорошенький создать читаемый код SVG:
svgo rocket.svg --pretty
Если у вас есть несколько SVG в каталоге, вы можете оптимизировать их все вместе, сразу. Предполагая, что каталог назван /изображений, затем из родительского каталога используйте эту команду:
svgo -f images --pretty
Посмотрим разницу до и после использования SVGO.
Скопируйте код в файл SVG и вставьте в файл HTML. Мы будем работать над рабочей областью шириной 800 на 600 пикселей, поэтому давайте не забудем определить ширина на элементе SVG.
SVG устанавливается в файле HTML. Нам нужно будет определить идентификатор для каждого объекта, чтобы мы могли выбрать их в CSS позже.
Для этого урока нам нужно определить идентификатор ракеты, пламени и некоторых облаков. Чтобы объекты могли обрабатывать этап анимации позже, нам нужно добавить Я бы - Вы также можете использовать учебный класс - к каждому объекту. На этом этапе код будет выглядеть так:
3. Анимировать с помощью CSS
Теперь давайте повеселимся. План состоит в том, чтобы запустить ракету в космос. Ракета разделена на две группы; сама ракета и пламя.
Прежде всего, мы позиционируем ракету в середине рабочего пространства следующим образом:
#rocket transform: translate (260px, 200px);
Что вы видите, это:
Теперь, чтобы ракета выглядела так, как будто она движется вверх, нам нужно создать иллюзию падающих облаков. CSS, который мы используем для этого:
# cloud1 animation: fall 1s линейный бесконечный; @keyframes fall from transform: translateY (-100px); to transform: translateY (1000px)
Чтобы это выглядело еще более реалистично, давайте анимируем четыре облака и сделаем их “падать” на разных скоростях. Мы также разместим их по-другому от оси X.
Второе облако будет иметь такой код:
# cloud2 animation: fall-2 2s линейный бесконечный; @keyframes fall-2 from transform: translate (200px, -100px); to transform: translate (200px, 1000px)
Обратите внимание, что мы переместили облако # 2 немного вправо 200px с переведите. На этом этапе результат должен выглядеть следующим образом.
Далее давайте заставим ракету ожить. Мы назначим ключевой кадр анимации следующим образом:
#rocket animation: popup 1s облегчить бесконечность; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
И добавьте анимацию к пламени ракеты:
#flame animation: shake .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.
- Посмотреть демо
- Скачать исходный код
