JavaScript je zadnji od načinov, ki jih bomo obravnavali pri animiranju SVG. Ogledali smo si CSS, ki je odličen in precej udoben, vendar ne more narediti številnih lastnosti SVG, ki bi jih morda želeli animirati. Nato smo pogledali SMIL, ki je izjavna sintaksa v sami kodi SVG, ki je močnejša, saj lahko animira več stvari, vključno z obliko samega elementa.
JavaScript lahko naredi vse, kar lahko naredi kateri koli, in to dobro. To stane samo s pisanjem resnično zapletene kode ali z režijo knjižnice, ki vam bo v pomoč. Ko pa začnete delovati, je lahko sintaksa res čudovita in prijazna do animacij, zmogljivost pa je dejansko lahko vrhunska.
Druga prednost uporabe JavaScript za animacije SVG je podpora. Med animiranjem SVG je treba skrbeti za številne muhe. Nekateri brskalniki ne podpirajo preoblikovanja elementov. Nekateri brskalniki počnejo čudne stvari s povečevanjem strani. Nekateri niso v skladu s preoblikovalnim izvorom. Knjižnice JavaScript pogosto pomagajo pri teh težavah.
Medtem ko govorimo posebej o animaciji, je veliko knjižnic SVG JavaScript namenjeno delu s SVG na splošno. Lahko ga ustvarijo in z njim manipulirajo, dostopajo do lastnosti elementa, jih spreminjajo itd. Tako kot dodajanje močnejšega API-ja v SVG.
Snag.svg - “jQuery za SVG”
Osnovni primer uporabe Snap.svg:
Oglejte si Pen BhHix Chrisa Coyierja (@chriscoyier) na CodePen.
Še ena stvar, ki smo jo naredili v tem videoposnetku z Snap.svg, je pretvorba tega CSS animacijskega pisala v Snap.svg, ki nas uči, da lahko Snap.svg uporabljamo za delo z vgrajenim SVG že na strani. Adobe je sam zbral številne primere.
Raphael - starejša knjižnica istega ustvarjalca kot Snap.svg
SVG.js - »Lahka knjižnica za manipulacijo in animiranje SVG.« Tukaj smo si ogledali predstavitev ure, ki prikazuje, kako te animacije delujejo s hitrim manipuliranjem DOM-a.
D3.js - »D3.js je knjižnica JavaScript za obdelavo dokumentov na podlagi podatkov. D3 vam pomaga oživiti podatke z uporabo HTML, SVG in CSS. " Tu je vadnica o tem, kako začeti ustvarjati SVG z njo, in še ena predstavitev animacije z njo.
GreenSock - "Izjemno zmogljiva profesionalna animacija za sodobni splet." GreenSock govori o spletnih animacijah na splošno, vendar podpira SVG. Tu je pisalo, kjer lahko vidite, kako deluje.
Velocity.js - »Pospešena animacija JavaScript.« Tudi knjižnica o animaciji na spletu na splošno, ki podpira SVG. Julian Shapiro ga je ustvaril in napisal o tem, zakaj je animacija JavaScript dejansko lahko najučinkovitejši slog animacije, pa tudi o tem, kako deluje Velocity.js. Tukaj je zelo preprost demo, ki animira nekatere lastnosti SVG.
Lahko se tudi sami odločite za to z animacijami JavaScript brez pomoči okolja. Ne pozabite, da je vgrajeni SVG v DOM-u, zato so vam na voljo vse običajne stvari o API-ju DOM. Nekako tako kot vi, zares ne potrebujete jQueryja za delo z DOM-om, vendar ga preprosto olajšate. Tu je primer, ki stvari počne po svoje, kar je precej zanimivo.