O privire în animație scalabilă Vector Graphics (SVG)

Astăzi vom continua discuția noastră Scalable Vector Graphic (SVG), și de data aceasta vom lucra SVG Animație. Nu vă speriați, însă, SVG Animation este relativ ușor și de fapt, în acest post vom începe de la bază.

Implementarea de bază

Animația în SVG se poate face prin element;

După cum puteți vedea din fragmentul de cod de mai sus, adăugăm interior elementul care va fi afectat. Acest conține unele dintre următoarele atribute;

Numele atributului: Acest atribut specifică atributul elementului care va fi afectat în animație.

din: Acest atribut este opțional, putem specifica o valoare exactă sau o lăsăm să o lase să înceapă de unde a fost.

la: Acest atribut specifică direcția de animație. În funcție de valoarea specificată din Numele atributului, rezultatele pot varia. Dar în acest exemplu se va extinde înălţime.

Dur: Acest atribut specifică durata animației. Valoarea acestui atribut este exprimată în sintaxa de valoare a ceasului. De exemplu, 02:33 reprezintă 2 minute și 33 de secunde, în timp ce 3h este egal cu 3 ore, dar nu avem nevoie de atâta timp, așa că am specificat durata pentru doar 3s sau 3 secunde;

Același lucru este valabil element, dar de această dată țintim atributul de radius al cercului (r).

• Demo de implementare de bază

Elementul Moving

În deplasarea elementelor SVG, trebuie doar să direcționăm coordonatele elementului X și y;

În exemplul de mai sus, mutăm dreptunghiul 0 la 200 în 3 secunde, dreptunghiul va apărea în mișcare orizontală de la stânga la dreapta. De asemenea, dacă priviți cu atenție, am adăugat și un alt atribut element, și anume completati.

completati atributul aici nu are nimic de-a face cu culoarea de fundal ca în celelalte elemente SVG. Acest atribut specifică modul în care animația va acționa după expirarea duratei. În acest exemplu, noi îngheţa elementul afectat, astfel încât să rămână unde se termină animația.

Funcționează, de asemenea, în mod similar cu element, putem folosi cx sau cy, ca astfel:

• Demonstrarea elementului Moving

Animați atributele multiple

Până acum, vom viza doar un atribut care să fie animat, dar este, de asemenea, posibil să animați mai multe atribute simultan. Exemplul de mai jos arată cum procedăm:

După cum puteți vedea, funcționează într-un mod similar, numai acum avem două elemente în interiorul pentru a viza rază si lățimea cursei a fi afectat.

• Multiple atribute Demo

Urmând o cale

În postarea noastră anterioară Lucrul cu text în SVG, ți-am arătat cum să treci textul într-o cale. Este, de asemenea, posibil să faceți același lucru în SVG Animație, putem anima un element care să urmeze o Cale. Iată un exemplu.

Calea este mai bine definită într - un element, așa cum am arătat mai sus. Pentru ca elementul să urmeze Calea, trebuie să definim animația cu și conectați calea id cu element, după cum urmează;

Asta este, acum să vedem în acțiune;

• Urmărirea Demonstrației căii

transformări

Putem folosi, de asemenea, transformarea cum ar fi scară, Traduceți și roti pentru animație, și pentru a face acest lucru vom folosi ;

Transformările în SVG se bazează pe principii similare cu CSS3 și am abordat destul de cuprinzător în postul anterior despre CSS3 2D Transformation.

• Transformare Demo

Gândurile finale

În funcție de competența dvs. în animația SVG puteți crea ceva de genul asta.

Unul dintre avantajele utilizării animației SVG Animation over Flash Animation este că nu se bazează pe pluginurile terță parte pentru a funcționa și este, de asemenea, considerabil mai rapid decât Flash. După ce Adobe și-a oprit suportul Flash în Android, este posibil să doriți să începeți să încercați această abordare pentru a difuza animație pe următorul site web.

Alte referințe

• SVG Animate Documentation
• Tehnici avansate de animație SVG

• Vizualizați demonstrația
• Descărcați sursa