JavaScript is de laatste manier waarop we het hebben over het animeren van SVG. We hebben gekeken naar CSS, wat geweldig en redelijk comfortabel is, maar het kan een aantal SVG-eigenschappen niet uitvoeren die je misschien wilt animeren. Vervolgens keken we naar SMIL, een declaratieve syntaxis in de SVG-code zelf, die krachtiger is omdat het meer dingen kan animeren, inclusief de vorm van het element zelf.
JavaScript kan alles wat beide kunnen doen, en doet het goed. Het gaat gewoon ten koste van het zelf schrijven van echt ingewikkelde code of de overhead van een bibliotheek om u te helpen. Maar als je eenmaal aan de slag bent, kan de syntaxis echt geweldig en vriendelijk voor animaties zijn en kunnen de prestaties zelfs van topklasse zijn.
Een ander voordeel van JavaScript voor SVG-animaties is ondersteuning. Er zijn genoeg eigenaardigheden om je zorgen over te maken bij het animeren van SVG. Sommige browsers ondersteunen geen transformaties op elementen. Sommige browsers doen rare dingen met het zoomen van pagina's. Sommige zijn niet consistent met de oorsprong van transformatie. JavaScript-bibliotheken helpen vaak bij deze problemen.
Hoewel we het specifiek over animatie hebben, gaan veel JavaScript SVG-bibliotheken over het werken met SVG in het algemeen. Ze kunnen het maken en manipuleren, toegang krijgen tot eigenschappen van het element, deze wijzigen, enz. Een beetje zoals het toevoegen van een robuustere API aan SVG.
Snag.svg - "jQuery voor SVG"
Eenvoudig voorbeeld van het gebruik van Snap.svg:
Zie de Pen BhHix van Chris Coyier (@chriscoyier) op CodePen.
Een ander ding dat we in deze video met Snap.svg hebben gedaan, is deze CSS-animatiepen omzetten naar Snap.svg, waardoor we leren dat we Snap.svg kunnen gebruiken om te werken met inline SVG die al op de pagina staat. Adobe heeft zelf een aantal voorbeelden verzameld.
Raphael - oudere bibliotheek van dezelfde maker als Snap.svg
SVG.js - "Een lichtgewicht bibliotheek voor het manipuleren en animeren van SVG." Hier is de klokdemo die we hebben bekeken, die laat zien hoe deze animaties werken door de DOM snel te manipuleren.
D3.js - “D3.js is een JavaScript-bibliotheek voor het manipuleren van documenten op basis van gegevens. D3 helpt je gegevens tot leven te brengen met HTML, SVG en CSS. " Hier is een tutorial om aan de slag te gaan met het maken van SVG ermee en nog een inleidende animatie ermee.
GreenSock - "Ultra-high-performance, professionele animatie voor het moderne web." GreenSock gaat over animaties op het web in het algemeen, maar ondersteunt SVG wel. Hier is een pen waar u kunt zien hoe het werkt.
Velocity.js - "Versnelde JavaScript-animatie." Ook een bibliotheek over animatie op het web in het algemeen, die toevallig SVG ondersteunt. Julian Shapiro heeft het gemaakt en heeft geschreven over waarom JavaScript-animatie eigenlijk de meest performante animatiestijl kan zijn en ook hoe Velocity.js werkt. Hier is een heel eenvoudige demo die enkele SVG-specifieke eigenschappen animeert.
Je bent ook vrij om er zelf voor te gaan met JavaScript-animaties zonder de hulp van een framework. Onthoud dat inline SVG zich in de DOM bevindt, dus alle reguliere DOM API-dingen zijn voor u beschikbaar. Zoals jij, hoe heb je jQuery niet echt nodig om met de DOM te werken, het maakt het gewoon vaak gemakkelijker. Hier is een voorbeeld dat dingen op hun eigen manier doet, dat is best interessant.