JavaScript er den siste måten vi skal dekke på animering av SVG. Vi så på CSS, som er flott og ganske komfortabelt, men det kan ikke gjøre en rekke SVG-egenskaper som du kanskje vil animere. Så så vi på SMIL, som er en deklarativ syntaks rett i selve SVG-koden, som er kraftigere ved at den kan animere flere ting, inkludert formen på selve elementet.
JavaScript kan gjøre alt som er mulig, og gjøre det bra. Det koster bare å skrive enten veldig komplisert kode selv, eller overhead på et bibliotek for å hjelpe deg. Men når du er i gang, kan syntaksen være veldig fantastisk og vennlig for animasjoner, og ytelsen kan faktisk være på topp.
En annen fordel med å bruke JavaScript til SVG-animasjoner er støtte. Det er mange quirks å være bekymret for mens du animerer SVG. Noen nettlesere støtter ikke transformasjoner på elementer. Noen nettlesere gjør rare ting med sidezooming. Noen er uforenlige med transform-origin. JavaScript-biblioteker hjelper ofte med disse problemene.
Mens vi snakker om animasjon spesifikt, handler mange JavaScript SVG-biblioteker om å jobbe med SVG generelt. De kan opprette og manipulere det, få tilgang til egenskaper fra elementet, endre dem osv. Liksom å legge til en mer robust API til SVG.
Snag.svg - “jQuery for SVG”
Grunnleggende eksempel på bruk av Snap.svg:
Se Pen BhHix av Chris Coyier (@chriscoyier) på CodePen.
En annen ting vi gjorde i denne videoen med Snap.svg er å konvertere denne CSS-animasjonspennen til Snap.svg, og lære oss at vi kan bruke Snap.svg til å jobbe med innebygd SVG allerede på siden. Adobe har samlet en rekke eksempler selv.
Raphael - eldre bibliotek fra samme skaper som Snap.svg
SVG.js - “Et lett bibliotek for å manipulere og animere SVG.” Her er klokkedemoen vi så på, og viser hvordan disse animasjonene fungerer ved å raskt manipulere DOM.
D3.js - “D3.js er et JavaScript-bibliotek for å manipulere dokumenter basert på data. D3 hjelper deg med å bringe data til liv ved hjelp av HTML, SVG og CSS. ” Her er en veiledning om hvordan du kommer i gang med å lage SVG med den og en annen innledende animasjon med den.
GreenSock - "Ultra-ytelse, profesjonell animasjon for det moderne nettet." GreenSock handler om animasjoner på nettet generelt, men støtter ikke SVG. Her er en penn der du kan se hvordan den fungerer.
Velocity.js - “Akselerert JavaScript-animasjon.” Også et bibliotek om animasjon på nettet generelt, som tilfeldigvis støtter SVG. Julian Shapiro opprettet den og har skrevet om hvorfor JavaScript-animasjon faktisk kan være den mest performante stilen til animasjon, samt hvordan Velocity.js fungerer. Her er en veldig enkel demo som animerer noen SVG-spesifikke egenskaper.
Du er også fri til å gå for det alene med JavaScript-animasjoner uten hjelp av et rammeverk. Husk at innebygd SVG er i DOM, så alle vanlige DOM API-ting er tilgjengelig for deg. Liksom deg hvordan du egentlig ikke trenger jQuery for å jobbe med DOM, det gjør det ofte ofte lettere. Her er et eksempel som gjør ting på sin egen måte som er ganske interessante.