JavaScript är det sista sättet vi kommer att täcka på att animera SVG. Vi tittade på CSS, vilket är bra och ganska bekvämt, men det kan inte göra ett antal SVG-egenskaper som du kanske vill animera. Sedan tittade vi på SMIL, som är en deklarativ syntax direkt i själva SVG-koden, som är mer kraftfull genom att den kan animera fler saker inklusive själva elementets form.
JavaScript kan göra allt som någon av dessa kan göra och göra det bra. Det kostar bara antingen att skriva riktigt komplicerad kod själv, eller kostnaden för ett bibliotek för att hjälpa dig. Men när du väl är igång kan syntaxen vara riktigt underbar och vänlig mot animationer och prestanda kan faktiskt vara i toppklass.
En annan fördel med att använda JavaScript för SVG-animationer är support. Det finns massor av konstigheter att oroa sig för när man animerar SVG. Vissa webbläsare stöder inte omvandlingar av element. Vissa webbläsare gör konstiga saker med sidzoomning. Vissa är oförenliga med transform-origin. JavaScript-bibliotek hjälper ofta till med dessa problem.
Medan vi pratar om animering specifikt handlar många SVG-bibliotek med JavaScript om att arbeta med SVG i allmänhet. De kan skapa och manipulera det, komma åt egenskaper från elementet, ändra dem osv. Liksom att lägga till ett mer robust API till SVG.
Snag.svg - “jQuery for SVG”
Grundläggande exempel på att använda Snap.svg:
Se Pen BhHix av Chris Coyier (@chriscoyier) på CodePen.
En annan sak vi gjorde i den här videon med Snap.svg är att konvertera den här CSS-animationspennan till Snap.svg och lära oss att vi kan använda Snap.svg för att arbeta med inbyggd SVG redan på sidan. Adobe har själva samlat ett antal exempel.
Raphael - äldre bibliotek från samma skapare som Snap.svg
SVG.js - ”Ett lätt bibliotek för att manipulera och animera SVG.” Här är klockdemo vi tittade på och visar hur dessa animationer fungerar genom att snabbt manipulera DOM.
D3.js - “D3.js är ett JavaScript-bibliotek för att manipulera dokument baserat på data. D3 hjälper dig att få liv till data med HTML, SVG och CSS. ” Här är en handledning om hur du kommer igång med att skapa SVG med den och en annan inledande animering med den.
GreenSock - "Ultra-högpresterande, professionell animering för den moderna webben." GreenSock handlar om animationer på webben i allmänhet, men stöder SVG. Här är en penna där du kan se hur den fungerar.
Velocity.js - “Accelerated JavaScript animation.” Också ett bibliotek om animering på webben i allmänhet, som råkar stödja SVG. Julian Shapiro skapade den och har skrivit om varför JavaScript-animering faktiskt kan vara den mest performanta stilen för animering samt hur Velocity.js fungerar. Här är en mycket enkel demo som animerar vissa SVG-specifika egenskaper.
Du är också fri att gå för det på egen hand med JavaScript-animationer utan hjälp av ett ramverk. Kom ihåg att inbyggd SVG finns i DOM, så alla vanliga DOM API-saker är tillgängliga för dig. Ganska som du hur egentligen inte behöver jQuery för att arbeta med DOM, det gör det bara ofta lättare. Här är ett exempel som gör saker på sitt eget sätt som är ganska intressant.