JavaScript je posljednji način na koji ćemo se pobrinuti za animiranje SVG-a. Pregledali smo CSS, koji je sjajan i prilično udoban, ali ne može izvesti mnoštvo SVG svojstava koja biste možda željeli animirati. Zatim smo pogledali SMIL, koji je deklarativna sintaksa točno u samom SVG kodu, koji je moćniji po tome što može animirati više stvari, uključujući oblik samog elementa.
JavaScript može učiniti sve što i jedan i drugi mogu i to dobro. To se jednostavno naplaćuje ili sami pišete stvarno komplicirani kôd ili vam trebaju knjižnice koje će vam pomoći. No, nakon što pokrenete, sintaksa može biti zaista prekrasna i prijateljska prema animacijama, a izvedba zapravo može biti vrhunska.
Još jedna prednost odlaska s JavaScriptom za SVG animacije je podrška. Mnogo je hirova zbog kojih treba zabrinuti tijekom animiranja SVG-a. Neki preglednici ne podržavaju pretvorbe na elementima. Neki preglednici rade čudne stvari zumiranjem stranica. Neki nisu u skladu s pretvorbenim podrijetlom. JavaScript knjižnice često pomažu u rješavanju ovih problema.
Iako posebno govorimo o animaciji, mnoge JavaScript SVG knjižnice rade na radu sa SVG-om općenito. Mogu ga stvoriti i manipulirati njime, pristupiti svojstvima elementa, mijenjati ih itd. Nekako poput dodavanja robusnijeg API-ja u SVG.
Snag.svg - "jQuery za SVG"
Osnovni primjer korištenja Snap.svg:
Pogledajte Pen BhHix Chrisa Coyiera (@chriscoyier) na CodePenu.
Još jedna stvar koju smo učinili u ovom videozapisu sa Snap.svg je konvertiranje ove olovke CSS animacije u Snap.svg, poučavajući nas da možemo koristiti Snap.svg za rad s ugrađenim SVG-om već na stranici. Adobe je sam prikupio brojne primjere.
Raphael - starija biblioteka istog kreatora kao i Snap.svg
SVG.js - "Lagana biblioteka za manipulaciju i animiranje SVG-a." Evo demo sata koji smo pogledali i pokazuje kako ove animacije rade brzom manipulacijom DOM-a.
D3.js - „D3.js je JavaScript knjižnica za manipulaciju dokumentima na temelju podataka. D3 vam pomaže oživjeti podatke koristeći HTML, SVG i CSS. " Evo vodiča o početku stvaranja SVG-a s njim i još jednog uvođenja animacije s njim.
GreenSock - "Ultra visoke performanse, profesionalna animacija modernog weba." GreenSock govori o animacijama na webu općenito, ali podržava SVG. Evo olovke u kojoj možete vidjeti kako to radi.
Velocity.js - "Ubrzana JavaScript animacija." Također knjižnica o animaciji na webu općenito, koja podržava SVG. Julian Shapiro ju je stvorio i napisao je zašto JavaScript animacija zapravo može biti najučinkovitiji stil animacije, kao i kako Velocity.js radi. Evo vrlo jednostavne demonstracije koja animira neka svojstva specifična za SVG.
Također se možete slobodno odlučiti za to pomoću JavaScript animacija bez pomoći okvira. Imajte na umu da je ugrađeni SVG u DOM-u, tako da su vam dostupne sve uobičajene stvari o DOM API-ju. Nešto poput vas, ali zapravo ne trebate jQuery za rad s DOM-om, ali to često olakšava. Evo primjera koji stvari radi na svoj način, što je prilično zanimljivo.