Ieskatieties mērogojamā vektorgrafikas (SVG) animācijā

Šodien mēs turpināsim diskusiju Mērogojams Vector Graphic (SVG), un šoreiz mēs strādāsim SVG animācija. Vai nav jābaidās, bet SVG animācija ir salīdzinoši vienkārša, un šajā amatā mēs sākam no pamatiem.

Pamata īstenošana

Animāciju SVG var veikt caur elements;

Kā redzams no iepriekš minētā koda fragmenta, mēs pievienojam iekšā elementu, kas ietekmēs. Tas satur dažus no šiem atribūtiem;

atribūtsName: Šis atribūts nosaka, kura elementa atribūts tiks ietekmēts animācijā.

no: Šis atribūts nav obligāts, mēs varam norādīt precīzu vērtību vai atstāt to, lai tas sāktu no tā, kur tas bija.

uz: Šis atribūts nosaka animācijas virzienu. Atkarībā no norādītās vērtības atribūtsName, rezultāti var atšķirties. Bet šajā piemērā tas paplašinās augstums.

dur: Šis atribūts nosaka animācijas ilgumu. Šī atribūta vērtība ir izteikta pulksteņa vērtības sintaksē. Piemēram, 02:33 ir 2 minūtes un 33 sekundes 3h ir vienāds ar 3 stundām, bet mums tas nav vajadzīgs, tāpēc mēs norādījām taisnīguma ilgumu 3s vai 3 sekundes;

Tas pats notiek elementu, bet šoreiz mēs mērķējam apļa rādiusa atribūtu (r).

• Pamata ieviešanas demonstrācija

Kustīgais elements

Pārvietojot SVG elementus, mums tikai jāpievēršas elementa koordinātai x un y;

Iepriekš minētajā piemērā mēs pārvietojam taisnstūri no 0 uz 200 3 sekunžu laikā taisnstūris parādīsies kustībā horizontāli no kreisās uz labo pusi. Tāpat, ja jūs uzmanīgi paskatīsieties, mēs pievienojām arī citu atribūtu elementu, proti, aizpildiet.

aizpildiet atribūts šeit nav nekāda sakara ar fona krāsu kā citos SVG elementos. Šis atribūts nosaka, kā animācija darbosies pēc ilguma beigām. Šajā piemērā mēs iesaldēt ietekmētais elements, lai tas paliktu tur, kur beidzas animācija.

Tas darbojas tāpat kā elementu, mēs varam izmantot cx vai cy, tāpat kā:

• Kustīgā elementa demonstrācija

Animēt vairākus atribūtus

Līdz šim mēs esam mērķējuši tikai vienu atribūtu, kas ir animēts, bet ir iespējams arī animēt vairāk nekā vienu atribūtu. Tālāk redzamais piemērs parāda, kā mēs to darām:

Kā redzat, tas darbojas līdzīgi, tikai tagad mums ir divi elementi mērķēt uz rādiuss un gājiena platums ietekmēt.

• Vairāki atribūti Demo

Pēc ceļa

Mūsu iepriekšējā ziņojumā Darbs ar tekstu SVG, mēs esam parādījuši, kā Teksts virzīties uz ceļu. Ir iespējams izdarīt to pašu SVG animācija, mēs varam animēt elementu, lai sekotu Ceļam. Šeit ir piemērs.

Ceļš ir labāk definēts a elements, kā parādīts iepriekš. Lai elements varētu sekot Ceļam, mums ir jānosaka animācija ar un savienojiet ceļu ID ar elementu;

Tas ir tas, tagad aplūkosim to darbībā;

• Pēc maršruta demo

Transformācijas

Mēs varam izmantot arī transformāciju mērogā, tulkot un pagriezt par animāciju un to izdarīsim, mēs to izmantosim ;

SVG pārveidei ir līdzīgi principi ar CSS3, un mēs par to esam visaptveroši apskatījuši mūsu iepriekšējā postenī par CSS3 2D transformāciju.

• Transformācijas demonstrācija

Galīgās domas

Atkarībā no SVG animācijas prasmes jūs varat izveidot kaut ko līdzīgu.

Viena no priekšrocībām, izmantojot SVG animāciju, izmantojot Flash animāciju, ir tā, ka tā nav atkarīga no trešo pušu spraudņiem darbam, un tā arī ir ievērojami ātrāka par Flash. Pēc tam, kad Adobe ir pārtraukusi Flash atbalstu Android ierīcē, iespējams, vēlēsities sākt izmēģināt šo pieeju, lai nākamā tīmekļa vietne kalpotu animācijai.

Citas atsauces

• SVG animācijas dokumentācija
• Uzlabotas SVG animācijas metodes

• Skatīt demonstrāciju
• Lejupielādēt avotu