Pogledaj u Skalabilna vektorska grafika (SVG) Animacija

Danas ćemo nastaviti raspravu o tome Scalable Vector Graphic (SVG), i ovaj put ćemo raditi SVG Animacija. Nemojte se bojati, SVG Animacija je relativno jednostavna i zapravo ćemo u ovom postu početi s osnovama.

Osnovna implementacija

Animacija u SVG-u može se obaviti putem element;

Kao što možete vidjeti iz gornjeg isječka koda, dodajemo u element koji će biti pogođen. Ovaj sadrži neke od sljedećih atributa;

AttributeName: Ovaj atribut određuje koji će atribut elementa utjecati na animaciju.

iz: Ovaj atribut nije obavezan, možemo navesti točnu vrijednost ili ga ostaviti da počne odakle je.

do: Ovaj atribut određuje smjer animacije. Ovisno o navedenoj vrijednosti u AttributeName, rezultati mogu varirati. Ali u ovom primjeru će se proširiti visina.

dur: Ovaj atribut određuje trajanje animacije. Vrijednost tog atributa izražava se u sintaksi vrijednosti sata. Na primjer, 02:33 predstavlja 2 minute i 33 sekunde, dok 3h jednako je 3 sata, ali nam ne treba toliko vremena pa smo odredili trajanje samo za 3s ili 3 sekunde;

Ista stvar ide element, ali ovaj put ciljamo atribut radijusa kruga (r).

• Demo osnovne izvedbe

Pokretni element

Kod pomicanja SVG elemenata potrebno je samo ciljati koordinate elementa x i y;

U gornjem primjeru pomičemo pravokutnik iz 0 do 200 u 3 sekunde, pravokutnik će se pomicati vodoravno s lijeva na desno. Također, ako pažljivo pogledate, dodali smo još jedan atribut naime ispuniti.

ispuniti atribut ovdje nema veze s bojom pozadine kao u ostalim SVG elementima. Ovaj atribut određuje kako će animacija djelovati nakon isteka trajanja. U ovom primjeru mi zamrznuti utjecati na element, tako da ostaje tamo gdje animacija završava.

Također radi slično kao i element, možemo koristiti CX ili cy, ovako:

• Pokret pokretnog elementa

Animiraj više atributa

Do sada smo ciljali samo jedan atribut koji će biti animiran, ali je moguće istovremeno animirati više od jednog atributa. Donji primjer pokazuje kako to radimo:

Kao što možete vidjeti, radi na sličan način, tek sada imamo dva elementi unutar. \ t za ciljanje radius i širina hoda biti pogođeni.

• Demo više atributa

Slijedeći Put

U našem prethodnom postu Rad s tekstom u SVG-u, pokazali smo vam kako protjecati tekst na stazu. Isto je moguće učiniti i na istom mjestu SVG Animacija, možemo potaknuti element da slijedimo Put. Evo primjera.

Put je bolje definiran unutar kao što je prikazano gore. Da bi element slijedio Put, moramo definirati animaciju s i povezati put iskaznica s element, kako slijedi;

To je to, sada ćemo ga vidjeti na djelu;

• Sljedeći Demo staze

transformacije

Također možemo koristiti transformaciju poput ljestvica, Prevedi i rotirati za Animaciju, i to ćemo koristiti ;

Transformacije u SVG-u dijele slična načela s CSS3, a o tome smo dosta detaljno govorili u prethodnom postu o CSS3 2D transformaciji.

• Demo transformacije

Završne misli

Ovisno o vašem poznavanju SVG Animacije možete stvoriti nešto slično.

Jedna od prednosti korištenja SVG animacije preko Flash Animacije je da se ne oslanja na dodatke treće strane za rad i također znatno brže od Flash-a. Nakon što je Adobe zaustavio njihovu Flash podršku u Androidu, možda biste željeli početi isprobavati ovaj pristup kako bi poslužili animaciju na sljedećoj web-lokaciji.

Daljnje reference

• SVG animira dokumentaciju
• Napredne SVG tehnike animacije

• Prikaži demo
• Preuzimanje izvora