Домашня » Кодування » Як створити анімацію SVG за допомогою CSS

    Як створити анімацію SVG за допомогою CSS

    Анімацію SVG можна здійснювати за допомогою нативних елементів, таких як і . Але для тих, хто більш знайомий з анімацією CSS, не хвилюйтеся, ми також можемо використовувати властивості CSS Animation для анімованих 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.

    • Переглянути демонстрацію
    • Завантажити джерело