JavaScript er den sidste af måderne, vi dækker på animering af SVG. Vi kiggede på CSS, som er fantastisk og ret behageligt, men det kan ikke udføre et antal SVG-egenskaber, som du måske vil animere. Så kiggede vi på SMIL, som er en deklarativ syntaks lige i selve SVG-koden, som er mere kraftfuld, fordi den kan animere flere ting inklusive selve elementets form.
JavaScript kan gøre alt, hvad begge disse kan, og gøre det godt. Det koster bare enten at skrive virkelig kompliceret kode selv eller overhead på et bibliotek for at hjælpe dig. Men når du først er i gang, kan syntaksen være virkelig vidunderlig og venlig over for animationer, og ydeevnen kan faktisk være i topklasse.
En anden fordel ved at bruge JavaScript til SVG-animationer er support. Der er masser af quirks at være bekymrede over, mens du animerer SVG. Nogle browsere understøtter ikke transformeringer af elementer. Nogle browsere gør underlige ting med sidezoomning. Nogle er inkonsistente med transform-origin. JavaScript-biblioteker hjælper ofte med disse problemer.
Mens vi taler specifikt om animation, handler mange JavaScript SVG-biblioteker om at arbejde med SVG generelt. De kan oprette og manipulere det, få adgang til egenskaber fra elementet, ændre dem osv. Ligesom at tilføje en mere robust API til SVG.
Snag.svg - “jQuery for SVG”
Grundlæggende eksempel på brug af Snap.svg:
Se Pen BhHix af Chris Coyier (@chriscoyier) på CodePen.
En anden ting, vi gjorde i denne video med Snap.svg, er at konvertere denne CSS-animationspen til Snap.svg og lære os, at vi kan bruge Snap.svg til at arbejde med inline SVG allerede på siden. Adobe har selv samlet et antal eksempler.
Raphael - ældre bibliotek fra samme skaber som Snap.svg
SVG.js - “Et letvægtsbibliotek til manipulation og animering af SVG.” Her er urdemoen, vi kiggede på, og viser, hvordan disse animationer fungerer ved hurtigt at manipulere DOM.
D3.js - “D3.js er et JavaScript-bibliotek til manipulation af dokumenter baseret på data. D3 hjælper dig med at bringe data til live ved hjælp af HTML, SVG og CSS. ” Her er en tutorial om at komme i gang med at oprette SVG med det og en anden introduktion, der animerer med det.
GreenSock - "Ultrahøjtydende, professionel animation til det moderne web." GreenSock handler generelt om animationer på nettet, men understøtter SVG. Her er en pen, hvor du kan se, hvordan det fungerer.
Velocity.js - "Accelereret JavaScript-animation." Også et bibliotek om animation på nettet generelt, der tilfældigvis understøtter SVG. Julian Shapiro oprettede det og har skrevet om, hvorfor JavaScript-animation faktisk kan være den mest performante stil af animation såvel som hvordan Velocity.js fungerer. Her er en meget enkel demo, der animerer nogle SVG-specifikke egenskaber.
Du er også fri til at gå efter det alene med JavaScript-animationer uden hjælp fra en ramme. Husk, at inline SVG er i DOM, så alle de almindelige DOM API-ting er tilgængelige for dig. Ligesom dig, hvordan du ikke rigtig har brug for jQuery for at arbejde med DOM, det gør det ofte ofte lettere. Her er et eksempel, der gør tingene på deres egen måde, der er ret interessant.