Як створити анімацію SVG за допомогою CSS
Анімацію SVG можна здійснювати за допомогою нативних елементів, таких як
Анімація CSS також може бути альтернативним способом використання бібліотеки JavaScript, подібної до SnapSVG. У цьому пості ми побачимо, що ми можемо доставити за допомогою CSS Animation у SVG.
1. Створення фігур
Перш за все, нам потрібно буде намалювати форми і об'єкти, які ми хочемо анімувати. Можна використовувати такі програми, як Ескіз, Adobe Illustrator, або Inkscape створити його.
Для цього прикладу я намалював хмарне небо як фон, а ракетний корабель стріляв вгору, включаючи полум'я:
Після того, як це зроблено з кресленням, нам потрібно експортувати кожен створений нами об'єкт у SVG.
Я буду використовувати Sketch як приклад для цього кроку. Виберіть об'єкт, який потрібно перетворити у формат SVG. У нижньому правому куті вікна натисніть Зробити експортованим. Виберіть формат SVG, а потім натисніть кнопку Експорт name-name. Ви повинні зробити це один об'єкт за один раз.
2. Вставте SVG у HTML
Коли ви відкриваєте файл SVG у редакторі коду, ви побачите, що коди SVG є досить брудними. Отже, перш ніж розгорнути файл SVG, давайте приберемо код і оптимізуємо його за допомогою цього інструменту командного рядка під назвою SVGO.
Запуск Термінал або Командний рядок, і встановити SVGO за допомогою цього командного рядка:
[sudo] npm install-g svgo
Перетягніть команду, svgo, на файлі SVG --досить для створення читабельного коду SVG:
svgo rocket.svg - точно
Якщо у вас є декілька SVG в каталозі, ви можете оптимізувати їх разом разом. Припускаючи, що каталог називається / зображення, потім з батьківського каталогу використовуйте цю команду:
svgo -f images - точно
Давайте побачимо різницю до і після використання SVGO.
Скопіюйте код у файлі SVG і вставте його у файл HTML. Ми працюватимемо на робочому просторі шириною 800px на 600px, так що не забувайте визначати ширина на елементі SVG.
SVG встановлюється у файлі HTML. Для кожного об'єкта нам потрібно визначити ідентифікатор, щоб пізніше їх можна було вибрати в CSS.
Для цього підручника нам необхідно визначити ідентифікатор ракети і полум'я, а також деякі хмари. Для того, щоб об'єкти працювали з анімацією пізніше, нам потрібно додати id - можна також використовувати клас - до кожного об'єкта. На цьому етапі код буде виглядати так:
3. Анімація за допомогою CSS
Тепер давайте весело провести час. Планується підняти ракету в космос. Ракета розбита на дві групи; сама ракета і полум'я.
Перш за все, ми розміщуємо ракету в середині робочого простору так:
#rocket transform: translate (260px, 200px);
Що ви бачите, це:
Тепер, щоб ракета виглядала так, як вона йде вгору, нам потрібно створити ілюзію падіння хмар. CSS, який ми використовуємо для цього:
# cloud1 анімація: падіння 1s лінійне нескінченне; @keyframes падіння from transform: translateY (-100px); до transform: translateY (1000px)
Для того, щоб вона виглядала ще більш реалістичною, давайте анімуємо чотири хмари і зробимо їх “падіння” з різною швидкістю. Ми також розмістимо їх по-різному від осі X..
Друга хмара буде мати такий код:
# cloud2 анімація: падіння-2 2s лінійна нескінченна; @keyframes fall-2 from transform: translate (200px, -100px); до transform: translate (200px, 1000px)
Зауважте, що ми перемістили хмару # 2 трохи вправо, на 200px с перекласти. На цьому етапі результат має виглядати так.
Далі зробимо ракету в життя. Ми призначимо ключовий кадр анімації таким чином:
#rocket анімація: спливаючі вікна 1 легкості; спливаюче вікно keyframes 0% transform: translate (260px, 200px)); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
А також додайте анімацію до ракетного полум'я:
#flame анімація: струс .2 лінійний нескінченний; @keyframes трясти 0% transform: translate (55px, 135px)) обертати (7deg); 20% transform: translate (55px, 135px) обертатися (0deg); 40% transform: translate (55px, 135px) обертати (-7deg); 60% transform: translate (55px, 135px) обертати (0deg); 100% transform: translate (55px, 135px) обертати (0deg);
Право! Тепер, коли всі наші коди налаштовані, анімація повинна працювати на нашому SVG.
Погляньте на нашу ракету, що вибухає в космос.
Заключна думка
Анімація не є найпростішою функцією в CSS. Але ми сподіваємося, що цей посібник стане гарною відправною точкою для подальшого вивчення CSS-анімації на SVG; Ви будете здивовані, дізнавшись, що можна досягти за допомогою CSS Animation.
Якщо ви хочете почати з самих основ, ви можете почати тут з цього повідомлення: A Look Into: Scalable Vector Graphics (SVG) Анімація або слідувати решті серії SVG.
- Переглянути демонстрацію
- Завантажити джерело
