Animacija za pogled v skalabilno vektorsko grafiko (SVG)

Danes bomo nadaljevali našo razpravo Prilagodljiva vektorska grafika (SVG), in tokrat bomo delali Animacija SVG. Ne bojte se, čeprav je SVG Animacija relativno lahka in pravzaprav bomo v tem prispevku začeli z osnovami.

Osnovno izvajanje

Animacijo v SVG-ju lahko izvedete s pomočjo element;

Kot lahko vidite v zgornjem odlomku kode, dodamo znotraj element, ki bo prizadet. To vsebuje nekatere od naslednjih atributov;

attributeName: Ta atribut določa atribut elementa, na katerega bo vplivala animacija.

od: Ta atribut ni obvezen, lahko podamo natančno vrednost ali pa jo pustimo, da se začne, kjer je bila.

do: Ta atribut določa smer animacije. Glede na določeno vrednost v attributeName, rezultati se lahko razlikujejo. Toda v tem primeru se bo razširil višine.

dur: Ta atribut podaja trajanje animacije. Vrednost tega atributa je izražena v sintaksi Clock Value. Na primer, 02:33 predstavlja 2 minuti in 33 sekund, medtem ko 3h je 3 ure, vendar ne potrebujemo toliko časa, zato smo določili trajanje samo za 3s ali 3 sekunde;

Ista stvar gre element, vendar tokrat ciljamo na atribut polmera kroga (r).

• Osnovna izvedbena izvedba

Premični element

Pri premikanju elementov SVG moramo ciljati na koordinato elementa x in y;

V zgornjem primeru premaknemo pravokotnik iz 0 do 200 v 3 sekundah se bo prikazal pravokotnik, ki se premika vodoravno od leve proti desni. Tudi, če pogledate skrbno, smo dodali še en atribut element fill.

fill atribut tukaj nima nič opraviti z barvo ozadja kot v drugih elementih SVG. Ta atribut določa, kako bo animacija delovala po preteku trajanja. V tem primeru smo zamrzne prizadeti element, tako da ostane tam, kjer se animacija konča.

Prav tako deluje podobno kot element, lahko uporabimo cx ali cy, tako:

• Predstavitev premičnega elementa

Animiraj več atributov

Do sedaj smo ciljali le en atribut, ki ga želite animirati, vendar je mogoče tudi animirati več kot en atribut hkrati. Spodnji primer prikazuje, kako to naredimo:

Kot lahko vidite, deluje na podoben način, šele zdaj imamo dva elementov znotraj. \ t za ciljanje polmer in širina hoda prizadeti.

• Predstavitev več atributov

Po poti

V prejšnji objavi Delo z besedilom v SVG, pokazali smo vam, kako pretakati besedilo na pot. Prav tako je mogoče storiti isto stvar v Animacija SVG, lahko animiramo element za sledenje poti. Tukaj je primer.

Pot je bolje definirana znotraj a kot je prikazano zgoraj. Da bi element sledil poti, moramo definirati animacijo z in povežite pot id z element, kot sledi;

To je to, zdaj ga vidimo v akciji;

• Po predstavitvi poti

Transformacije

Lahko uporabimo tudi transformacijo lestvice, prevesti in zavrti za animacijo in to bomo uporabili ;

Transformacije v SVG-ju imajo podobne principe kot CSS3 in o tem smo v prejšnji objavi o CSS3 2D Transformaciji to celovito obravnavali..

• Predstavitev preoblikovanja

Končne misli

Glede na vaše znanje o SVG Animaciji lahko ustvarite nekaj takega.

Ena od prednosti uporabe SVG Animacije nad Flash Animacijo je, da se ne zanaša na vtičnike drugih proizvajalcev in je tudi veliko hitrejši od Flash-a. Ko je Adobe zaustavil podporo za Flash v Androidu, boste morda želeli začeti preizkušati ta pristop, da bo animacija na vaši naslednji spletni strani.

Dodatne reference

• SVG animira dokumentacijo
• Napredne tehnike animacije SVG

• Prikaži predstavitev
• Prenesi vir