Како креирати СВГ анимацију користећи ЦСС

Анимирање СВГ-а се може обавити преко природних елемената као што су и . Али за оне који су више упознати са ЦСС анимацијом, не брините, такође можемо користити својства ЦСС анимације и за анимиране СВГ-ове..

ЦСС анимација такође може бити алтернативни начин коришћења ЈаваСцрипт библиотеке као што је СнапСВГ. У овом посту ћемо видети шта можемо да испоручимо са ЦСС анимацијом у СВГ-у.

1. Креирање облика

Пре свега, мораћемо да нацртамо облике и објекте које желимо анимирати. Можете користити апликације попут Скица, Адобе Иллустратор, или Инксцапе да бисте је креирали.

За овај пример, нацртао сам облачно небо као позадину, и ракетни брод који је пуцао према горе, пламен је укључивао:

Када завршимо са цртањем, морамо извести сваки објекат који смо креирали у СВГ.

Користит ћу Скетцх као примјер за овај корак. Изаберите објекат који желите да претворите у СВГ формат. У доњем десном углу прозора кликните Маке Екпортабле. Изаберите СВГ формат, а затим кликните на Екпорт име-објекта. Морате да урадите овај један објекат одједном.

2. Уметните СВГ у ХТМЛ

Када отворите СВГ датотеку у уређивачу кода, видећете да су СВГ кодови прилично неуредни. Дакле, пре него што поставимо СВГ датотеку, хајде да уредимо код и оптимизујемо га помоћу овог алатке командне линије под називом СВГО.

Лансирање Терминал или Командна линија, и инсталирајте СВГО помоћу ове командне линије:

 [судо] нпм инсталл-г свго 

Подесите команду, свго, на СВГ фајлу користећи --прилично за израду читљивог СВГ кода:

 свго роцкет.свг --претти 

Ако имате више СВГ-ова у директорију, можете их оптимизирати све заједно, одједном. Под претпоставком да је именик именован / имагес, затим из родитељског директоријума користите ову наредбу:

 свго -ф имагес - претти 

Да видимо разлику пре и после употребе СВГО-а.

Копирајте код унутар СВГ датотеке и залијепите га у ХТМЛ датотеку. Радићемо на радном простору ширине 800пк од 600пк, тако да не заборавимо да дефинишемо видтх на СВГ елементу.

СВГ је постављен у ХТМЛ датотеци. Потребно је да дефинишемо ИД за сваки објекат, тако да их касније можемо изабрати у ЦСС-у.

За овај туторијал морамо да дефинишемо ИД за ракету и пламенове и неке облаке. Да би објекти касније могли да управљају фазом анимације, морамо додати ид - такође можете користити класа - сваком објекту. У овој фази, код ће изгледати овако:

3. Анимирајте помоћу ЦСС-а

Хајде да се мало забавимо. План је да се ракета подигне у свемир. Ракета је подељена у две групе; сама ракета и пламен.

Прво, постављамо ракету у средину радног простора, као што следи:

 #роцкет трансформ: транслате (260пк, 200пк); 

Оно што видите је ово:

Да би ракета изгледала као да иде горе, морамо створити илузију пада облака. ЦСС који користимо за ово је:

 # цлоуд1 анимација: пада 1с линеарна бесконачност;  @кеифрамес фалл фром трансформ: транслатеИ (-100пк));  то трансформ: транслатеИ (1000пк) 

Да би изгледао још реалистичније, хајде да анимирамо четири облака и направимо их “пасти” различитим брзинама. Такође ћемо их позиционирати другачије од Кс-осе.

Други облак ће имати овакав код:

 # цлоуд2 анимација: фалл-2 2с линеар инфините;  @кеифрамес фалл-2 фром трансформ: транслате (200пк, -100пк));  то трансформ: транслате (200пк, 1000пк) 

Имајте на уму да смо померили облак # 2 мало у десно, према 200пк са превести. У овој фази, резултат би требао изгледати овако.

Следеће, хајде да оживимо ракету. Доделићемо кључни оквир анимације, као што следи:

 #роцкет анимација: попуп 1с олакшава бесконачност;  @кеифрамес попуп 0% трансформ: транслате (260пк, 200пк));  50% трансформ: транслате (260пк, 240пк);  100% трансформ: транслате (260пк, 200пк);  

Додајте и анимацију на ракетни пламен:

 #фламе аниматион: схаке .2с линеар инфините;  @кеифрамес схаке 0% трансформ: транслате (55пк, 135пк) ротате (7дег);  20% трансформ: транслате (55пк, 135пк) ротате (0дег);  40% трансформ: транслате (55пк, 135пк) ротате (-7дег);  60% трансформ: транслате (55пк, 135пк) ротате (0дег);  100% трансформ: транслате (55пк, 135пк) ротате (0дег);  

Јел тако! Сада када су наши кодови постављени, анимација би требала радити на нашем СВГ-у.

Погледајте нашу ракету у свемир.

Финал Тхоугхт

Анимација није најједноставнија особина у ЦСС-у. Али надамо се да ћете овај водич сматрати добром почетном тачком за даље истраживање ЦСС анимације на СВГ-у; били бисте изненађени да знате шта се може постићи са ЦСС Анимацијом при руци.

Ако желите да почнете са основама, можете почети са овим постом: А Инто: Сцалабле Вецтор Грапхицс (СВГ) Анимација или пратите остатак СВГ серије.

• Виев Демо
• Довнлоад Соурце