Vaata skaleeritavat vektorgraafikat (SVG)

Täna jätkame arutelu jätkamist Skaalautuva vektorgraafika (SVG), ja seekord me töötame SVG animatsioon. Ära karda aga, SVG Animatsioon on suhteliselt lihtne ja selles postituses alustame algusest.

Põhiline rakendamine

Animatsiooni SVG-s saab teha läbi element;

Nagu näete ülaltoodud koodilõigust, lisame sees element, mida see mõjutab. See sisaldab mõningaid järgmisi atribuute;

atribuutNimi: See atribuut määrab, millist elemendi atribuuti animatsioon mõjutab.

alates: See atribuut on valikuline, saame määrata täpse väärtuse või jätta selle lasta alustada sellest, kust see oli.

kuni: See atribuut määrab animatsiooni suuna. Sõltuvalt määratud väärtusest atribuutNimi, tulemused võivad erineda. Kuid selles näites laiendab see kõrgus.

dur: See atribuut määrab animatsiooni kestuse. Selle atribuudi väärtus väljendatakse kella väärtuse süntaksis. Näiteks, 02:33 on 2 minutit ja 33 sekundit 3h on võrdne 3 tunniga, kuid me ei vaja seda kaua, et täpsustada õiglase kestuse 3s või 3 sekundit;

Sama asi läheb element, kuid seekord suuname ringi raadiuse atribuudi (r).

• Põhiline rakendamise demo

Liikuv element

SVG elementide liigutamisel on vaja ainult elemendi koordinaati suunata x ja y;

Ülaltoodud näites liigutame ristküliku 0 kuni 200 3 sekundi pärast ilmub ristkülik horisontaalselt vasakult paremale. Samuti, kui vaatate hoolikalt, lisasime ka teise atribuudi element, nimelt täitke.

täitke atribuut siin pole midagi pistmist taustavärviga nagu teistes SVG elementides. See atribuut määrab, kuidas animatsioon pärast kestuse lõppu toimib. Selles näites me külmutada kahjustatud element, nii et see jääb animatsiooni lõppu.

See töötab ka sarnaselt element, saame kasutada cx või cy, meeldib nii:

• Liikuv elementide demo

Animeerida mitu atribuuti

Siiani oleme sihtinud ainult ühte atribuuti, et olla animeeritud, kuid samuti on võimalik animeerida rohkem kui üht atribuuti korraga. Järgnev näide näitab, kuidas me seda teeme:

Nagu näete, toimib see sarnaselt, ainult nüüd on meil kaks elemendid sees sihtida raadius ja löögi laius mõjutada.

• Mitu atribuutide demo

Tee järel

Meie eelmises postituses Tekstiga töötamine SVG-s, me oleme teile näidanud, kuidas tekst teksti mööda liikuda. Sama on võimalik teha ka SVG animatsioon, saame animeerida elementi, et järgida teed. Siin on näide.

Tee on paremini määratletud a nagu eespool näidatud. Selleks, et element järgiks rada, peame määratlema animatsiooni ja ühendage tee id koos element;

See ongi see, nüüd vaatame seda tegevuses;

• Path Demo järgimine

Transformatsioonid

Me saame kasutada ka muundamist skaala, tõlkida ja pöörake animatsiooni jaoks ja seda me kasutame ;

SVG-de ümberkujundamine jagab sarnaseid põhimõtteid CSS3-ga ja me oleme selle eelmises postituses CSS3 2D teisenduse kohta üsna põhjalikult käsitlenud.

• Transformatsiooni demo

Lõplikud mõtted

Sõltuvalt SVG Animatsiooni oskusest saate luua midagi sellist.

Üks SVG Animatsiooni kasutamise eelis Flash Animatsiooni kasutamisel on see, et see ei sõltu kolmanda osapoole pluginatest ja see on samuti tunduvalt kiirem kui Flash. Pärast seda, kui Adobe on peatanud oma Flash-toe Androidis, võite proovida seda lähenemisviisi proovida, et teenida animatsiooni järgmises veebisaidil.

Edasised viited

• SVG animatsiooni dokumentatsioon
• Täiustatud SVG animatsioonitehnikad

• Kuva demo
• Allalaadimise allikas