Как да създадем SVG анимация с помощта на CSS
Анимацията на SVG може да се осъществи чрез родни елементи като
CSS Animation може също да бъде алтернативен начин за използване на 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 - точен
Ако имате няколко SVG в директория, можете да ги оптимизирате заедно заедно. Ако приемем, че директорията е кръстена / изображения, след това от родителската директория използвайте тази команда:
svgo -f images - точно
Да видим разликата преди и след използването на SVGO.
Копирайте кода в SVG файла и го поставете в HTML файл. Ще работим върху работно пространство с ширина 800 пиксела с 600 пиксела, така че да не забравяме да дефинираме широчина в SVG елемента.
SVG се задава в HTML файла. Ще трябва да дефинираме идентификатор за всеки обект, за да можем да ги изберем по-късно в CSS.
За този урок трябва да дефинираме идентификацията на ракетата и пламъците, както и някои от облаците. За да могат обектите да се справят с анимационния етап по-късно, трябва да добавим документ за самоличност - можете също да използвате клас - към всеки обект. На този етап кодът ще изглежда така:
3. Анимирайте използвайки CSS
Сега да се позабавляваме. Планът е да се засили ракетата в космоса. Ракетата е разделена на две групи; самата ракета и пламъкът.
Първо, позиционираме ракетата в средата на работното пространство, както следва:
#rocket transform: translate (260px, 200px);
Това, което виждате, е следното:
Сега, за да изглежда ракетата да изглежда така, сякаш върви нагоре, трябва да създадем илюзията за падане на облаците. CSS, която използваме за това, е:
# cloud1 анимация: пада 1s линейно безкрайно; @keyframes попадат от transform: translateY (-100px); до transform: translateY (1000px)
За да изглежда по-реалистично, нека анимираме четири облака и да ги направим “падане” при различни скорости. Ще ги позиционираме различно от оста Х.
Вторият облак ще има код като този:
# cloud2 анимация: падане-2 2s линейно безкрайно; @keyframes fall-2 от transform: translate (200px, -100px)); до transform: translate (200px, 1000px)
Имайте предвид, че сме преместили облака # 2 малко надясно, с 200px с превеждам. На този етап резултатът трябва да изглежда така.
След това нека да накараме ракетата да оживее. Ще присвоим анимационен ключов кадър, както следва:
#rocket анимация: изскачащи 1с улеснява безкрайността; @keyframes popup 0% transform: translate (260px, 200px)); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
И добавете анимация и към ракетния пламък:
#flame анимация: разклатете .2s линейно безкрайно; @keyframes разклащане 0% transform: translate (55px, 135px)) завъртане (7deg); 20% transform: translate (55px, 135px) завъртане (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) завъртане (0deg); 100% transform: translate (55px, 135px) завъртане (0deg);
Точно така! Сега, когато нашите кодове са готови, анимацията трябва да работи на нашия SVG.
Обърнете внимание на взривяването ни в космоса.
Заключителна мисъл
Анимацията не е най-лесната функция в CSS да се разбере. Но се надяваме, че този урок ще бъде добра отправна точка за по-нататъшно проучване на CSS Animation на SVG; ще бъдете изненадани да знаете какво може да бъде постигнато с поддръжката на CSS Animation.
Ако искате да започнете с най-важните неща, можете да започнете с тази публикация: A Look Into: Scalable Vector Graphics (SVG) Анимация или следвайте останалата част от SVG серията.
- Преглед на демо
- Изтеглете Източник
