Водич за почетнике за СВГ анимацију са ЦСС-ом

Скалабилна векторска графика (СВГ) је више од датотека слика. Као КСМЛ апликација, СВГ садржи ознаке које изгледају и раде слично као ХТМЛ. Можете их користити и у комбинацији са ЦСС и ЈаваСцрипт кодом. Ово омогућава анимирање СВГ датотека, стварајући сложене слике које добро функционишу за веб дизајн и друга динамичка окружења.

Али како направити СВГ анимацију? Почните са СВГ обликом, анимирајте га користећи ЦСС и градите на овим принципима да бисте користили анимацију у свом раду.

Анимирање СВГ-а помоћу ХТМЛ-а и ЦСС-а

Иако можете користити ЈаваСцрипт да програмски анимирате СВГ, ЦСС сада има добру подршку и за анимације. Можете пронаћи сав узорак кода на ЦодеПен за овај пројекат.

Прављење СВГ слике унутар ХТМЛ-а

Први корак у овом процесу је изградња СВГ слике са којом ћете радити. Можете пронаћи СВГ ознаке у ХТМЛ панелу на ЦодеПен-у.

СВГ структура

Док СВГ-ови деле сличан формат као ХТМЛ, ознаке које користите за њихово креирање су различите. СВГ има ознаке за отварање и затварање () који могу да садрже низ различитих својстава. У нашем случају користимо се

ид и виевБок својства. Својство ид функционише као било који други ХТМЛ ИД, пружајући вам јединствени идентификатор који ћете користити у свом ЦСС/ЈС. Својство виевБок поставља величину нашег СВГ-а.

<!-- СВГ са прилагодљивом величином -->
<свг ид="МУОСВГАниматион" виевБок="0 0 800 600">
<!-- СВГ садржај -->
</svg>

Уместо тога можете користити својства ширине и висине, као што показује следећи пример. Међутим, виевБок креира прилагодљиви СВГ који ће одговарати величини оквира за приказ без нарушавања његовог односа ширине и висине.

 СВГ саспан> статичномспан> величином 
<свг ид="МУОСВГАниматион" видтх="800" висина="600">
<!-- СВГ садржај -->
</svg>

СВГ облици

Можете креирати детаљне слике помоћу СВГ-а, са низом различитих алата за обликовање који су вам на располагању. Овај СВГ пример користи три доступна облика, али има много других. Сваки од облика у овом примеру има јединствени ИД који ЦСС анимације могу касније да користе.

• СВГ елипса: Ово је алатка за круг/овал. Одређује својства за полупречник осе и/к (рк/ри), боју испуне и ширину потеза. Важно је запамтити да ће радијус који одаберете са овим алатом бити половина пречника облика.

<елипсе ид="круг" рк="100" ри="100" филл="#ффед00" строке-видтх="0"/>

• СВГ Рецт: СВГ алат за правоугаонике креира квадрат или правоугаоник. Овај има својства за ширину/висину, трансформацију, боју испуне и ширину потеза.

<рецт ид="квадрат" видтх="200" висина="200" трансформ="преведи (300 200)" филл="#05ф"
 строке-видтх="0"/>

• СВГ полигон: Користите СВГ полигон да поставите одређени број тачака и креирате произвољне облике различитих величина. Полигон у примеру је тространи, што га чини троуглом, а положај сваке тачке можете видети у његовим својствима. Заједно са овим, имамо својства за позицију, боју испуне и ширину потеза троугла.

<полигон ид="троугао" бодова="15,-97 115,102 -84,102 15,-97"
 трансформ="преведи (0,0)" филл="#ф00" строке-видтх="0"/>

Када је анимација на месту, облици ће се поредати један поред другог.

Ова три СВГ облика су неки од најчешћих, али има још тога за избор. Можете користити следеће облике када рад са СВГ анимацијом:

• СВГ круг: Овај облик је сличан елипси, али увек има једнаке Кс и И полупречнике.
• СВГ линија: СВГ линија је један сегмент са две тачке, по једна на сваком крају.
• СВГ полилинија: Полилиније су као основне линије, само што могу имати више од две тачке.
• СВГ полигон: СВГ полигони су попут правоугаоника, само што могу имати више од четири тачке, чинећи сложене облике могућим.
• СВГ путања: СВГ путање функционишу слично као алатка оловка у Адобе Пхотосхоп-у. Линије се могу повезивати као полилинија/полигон, али на њих се могу применити и криве.

Како анимирати СВГ-ове помоћу ЦСС-а

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

Померање круга помоћу Трансформ анд Транслате

Круг у СВГ примеру се помера од дна ка врху екрана током циклуса анимације. Морате да доделите анимацију кругу пре него што се може померити, преко ЦСС својства:

#цирцле {
 анимација: цирцле_аним 2000мс линеарно бесконачно нормално напред
}

Прва реч у вредности, цирцле_аним, је назив за анимацију. Ради две секунде (2000мс). Има а линеарне крива која одржава константну брзину и која је подешена да покреће ан бесконачан број пута у напред правац. Можете користити кључне кадрове да дефинишете појединачне фазе анимације:

@кеифрамес круг_аним {
 0% { трансформисати: превести(155пк, 305пк) }
 45% { трансформисати: превести(155пк, -123пк) }
 50% { трансформисати: превести(-123пк, -123пк) }
 55% { трансформисати: превести(-123пк, 728пк) }
 60% { трансформисати: превести(155пк, 728пк) }
 100% { трансформисати: превести(155пк, 305пк) }
}

У овој анимацији постоји шест кључних кадрова, тако да ће се круг померити на шест различитих локација у сваком циклусу. Тхе трансформисати: превести својство поставља положај круга у свакој фази. При 0% круг је у средини екрана и помера се нагоре и ван видокруга за 45%. За 50% се померио лево од екрана пре него што се померио испод оквира за приказ на 55%. Круг се враћа у хоризонтални положај за 60%, а анимација је завршена на 100% са кругом назад у средини екрана.

Анимирајте својство граничног радијуса квадрата

Квадрат у примеру нуди добру референцу за опште анимације својстава. Све док знате исправну синтаксу коју треба да користите, можете анимирати било које ЦСС својство. Својство радијуса границе је добра демонстрација овога. Квадрат има оштре углове који се претварају у заобљене углове, а затим поново у четвртасте углове.

#квадрат { анимација: скуаре_аним 2000мс бесконачни нормални напредњаци }

Квадратна анимација се зове скуаре_аним и има време извођења од две секунде. Тхе лакоћа уласка крива чини анимацију споријом на почетку и на крају, стварајући углађени ефекат.

@кеифрамес скуаре_аним {
 0% { рк: 0пк; ри: 0пк }
 45% { рк: 40пк; ри: 40пк }
 55% { рк: 40пк; ри: 40пк }
 100% { рк: 0пк; ри: 0пк }
}

Као што видите, ова анимација има четири кључна кадра. Радијус ивице Кс и И се мења од 0пк до 40пк између 0% и 45%, паузирајући на 40пк до 55%. Затим се враћа на 0пк за сваки радијус до тренутка када анимација достигне 100%.

Ротирајте СВГ троугао са трансформацијом

Коначна СВГ анимација у примеру је најједноставнија, са троуглом који се ротира око своје средишње тачке. Облик обавља пуну револуцију сваке две секунде и наставља да ради бесконачно. Има криву попуштања која доводи до успоравања анимације на крају. Анимација се зове триангле_аним.

#троугао { анимација: триангле_аним 2000мс еасе-оут бесконачни нормални нападачи }

Ова анимација има два кључна кадра, један на 0%, а други на 100%. Својство ротирања трансформације окреће троугао од 0 степени на 0% до 360 степени на 100%, стварајући потпуно окретање.

@кеифрамес триангле_аним {
 0% { трансформисати: превести(644пк, 297пк) ротирати(0дег) }
 100% { трансформисати: превести(644пк, 297пк) ротирати(360дег) }
}

Како анимирати друга својства

Три горе покривене анимације су добра полазна тачка када радите са СВГ-овима, али ћете вероватно желети да ово продужите даље. Можете да користите ЦСС правило анимирања да прилагодите скоро сваку вредност својства коју можете да доделите свом СВГ-у. Ово укључује основне вредности, попут величине и позиционирања, као и напредније вредности, као што су ивице, сенке и режими мешања.

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

Прављење сопствених СВГ анимација

Било да сте веб дизајнер, програмер софтвера или једноставно креативна особа, прављење СВГ анимација може бити забавно и задовољавајуће. Можете пронаћи мноштво ресурса широм веба који вам могу помоћи у вези са анимацијом заснованом на вебу, када будете задовољни основама.

10 ЦСС позадинских образаца које можете користити на својој веб локацији

Реад Нект