Žiūrėkite į mastelio keičiamo vektoriaus grafiką (SVG)

Šiandien mes tęsime diskusijas Scalable Vector Graphic (SVG), ir šį kartą dirbame SVG animacija. Nebijokite, nors SVG animacija yra gana paprasta ir iš tikrųjų šiame poste pradėsime nuo pagrindų.

Pagrindinis įgyvendinimas

Animaciją SVG galima atlikti per elementas;

Kaip matote iš pirmiau pateikto kodo fragmento, pridedame viduje elementas, kuris bus paveiktas. Tai yra keletas iš šių atributų;

atributasName: Šis atributas nurodo, kuris elemento atributas bus paveiktas animacijoje.

nuo: Šis atributas yra neprivalomas, galime nurodyti tikslią vertę arba palikti ją leisti pradėti nuo vietos, kurioje jis buvo.

į: Šis atributas nurodo animacijos kryptį. Priklausomai nuo nurodytos vertės atributasName, rezultatai gali skirtis. Tačiau šiame pavyzdyje jis bus pratęstas aukštis.

dur: Šis atributas nurodo animacijos trukmę. Šio atributo reikšmė išreiškiama „Laikrodžio reikšmės sintaksė“. Pavyzdžiui, 02:33 reiškia 2 minutes ir 33 sekundes 3h yra lygi 3 valandoms, bet mums to nereikia, todėl nurodėme teisingą trukmę 3s arba 3 sekundės;

Tas pats vyksta elementas, tačiau šį kartą taikome apskritimo spindulio atributą (r).

• Pagrindinis diegimo demonstravimas

Judantis elementas

Perkeliant SVG elementus reikia nukreipti tik elemento koordinates x ir y;

Pirmiau pateiktame pavyzdyje mes perkeliame stačiakampį iš 0 į 200 per 3 sekundes stačiakampis bus rodomas horizontaliai judant iš kairės į dešinę. Be to, jei atidžiai žiūrėsite, pridėjome dar vieną atributą elementas, būtent užpildyti.

užpildyti atributas čia nėra susijęs su fono spalva, kaip ir kituose SVG elementuose. Šis atributas nurodo, kaip animacija veiks po trukmės pabaigos. Šiame pavyzdyje mes užšaldyti paveiktas elementas, kad jis liktų ten, kur baigiasi animacija.

Jis taip pat veikia panašiai kaip elementas, mes galime naudoti cx arba cy, kaip ir taip:

• Judantis elementas Demo

Animuoti kelis atributus

Iki šiol mes nukreipiame tik vieną atributą, kuris bus animuotas, bet taip pat galima animuoti daugiau nei vieną atributą vienu metu. Toliau pateiktas pavyzdys rodo, kaip mes tai darome:

Kaip matote, jis veikia panašiai, tik dabar turime du elementų viduje nukreipti spindulys ir smūgio plotis paveikti.

• Kelios atributų demonstracijos

Po kelio

Mūsų ankstesniame įraše Darbas su tekstu SVG, mes parodėme jums, kaip tekinti tekstą į kelią. Taip pat galima padaryti tą patį SVG animacija, mes galime animuoti elementą, kad galėtume sekti Kelias. Čia yra pavyzdys.

Kelias yra geriau apibrėžtas a elementas, kaip parodyta aukščiau. Kad elementas galėtų sekti Kelias, mes turime apibrėžti animaciją su ir susieti kelią ID su elementas;

Štai taip, dabar pažiūrėkime jį į veiksmą;

• Po kelio demo

Transformacijos

Taip pat galime naudoti transformaciją skalė, versti ir pasukti animacijai ir tai padarysime ;

SVG transformacijos dalijasi panašiais principais su CSS3, ir apie tai išsamiai aptarėme ankstesniame pranešime apie CSS3 2D transformaciją.

• Transformacijos demonstracija

Galutinės mintys

Priklausomai nuo jūsų kalbos apie SVG animaciją galite sukurti kažką panašaus.

Vienas iš SVG animacijos privalumų, palyginti su „Flash“ animacija, yra tai, kad jis nesiremia trečiųjų šalių įskiepiais ir jis taip pat žymiai greičiau nei „Flash“. „Adobe“ sustabdžius „Flash“ palaikymą „Android“, galbūt norėsite pradėti išbandyti šį metodą, kad galėtumėte pateikti animaciją kitoje svetainėje.

Kitos nuorodos

• SVG animacinis dokumentas
• Išplėstinė SVG animacijos technika

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį