Animatie van SVG is een beetje uniek omdat er drie duidelijk verschillende manieren zijn waarop u het animeren kunt benaderen.
1. Animeren met CSS @ keyframes
SVG-elementen kunnen worden getarget en gestileerd met CSS. Dit betekent dat u animatie kunt toepassen via @keyframes. Zoals dit:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )U kunt op deze manier animeren als ...
- De animatie is vrij eenvoudig.
- U hoeft alleen eigenschappen te animeren die CSS kan animeren.
- U kent al en bent vertrouwd met CSS-animaties.
2. Animeren met SMIL
Er is een syntaxis voor animaties ingebouwd in SVG. Hier is een heel eenvoudig voorbeeld:
Hier is een grote tutorial over alles wat SMIL is.
U kunt op deze manier animeren als ...
- U moet eigenschappen animeren die CSS niet kan, zoals de vorm zelf.
- Je hebt andere SMIL-specifieke functies nodig, zoals het starten van een animatie wanneer een andere eindigt zonder handmatig de duur / vertragingen te synchroniseren. Of interactiemateriaal, zoals het starten van een animatie met een klik.
3. Animeren met JavaScript
Met JavaScript hebt u toegang tot zaken als requestAnimationFrame (of andere loops), dus u kunt animaties maken door alleen de eigenschapswaarden snel te wijzigen. Er zijn ook frameworks voor het werken met SVG waarin doorgaans animatiemateriaal is ingebouwd. Of animatieframeworks die met SVG werken. Zoals SnapSVG, GreenSock, SVG.js of Velocity.js.
Hier is een voorbeeld met SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);U kunt op deze manier animeren als ...
- Je werkt sowieso in JavaScript, misschien heeft je animatie te maken met gegevens die je ontvangt met JSON of iets dergelijks.
- Je hebt sowieso JavaScript nodig, omdat je de logica of wiskunde of iets anders nodig hebt dat eigenlijk alleen daar mogelijk is.
- U bent geïnteresseerd in het oplossen van enkele bugs door JavaScript.
- De reikwijdte van uw animatie is vrij groot / ingewikkeld en u heeft de abstractie en organisatie nodig die JavaScript kan bieden.
Demo
Zie Pen Three Ways to Animimate SVG door Chris Coyier (@chriscoyier) op CodePen.
Heeft de manier waarop u de SVG uiteindelijk gebruikt niet invloed op uw opties?
Het doet. Als je SVG-as- gebruikt , kun je geen CSS-animaties uit een ander stylesheet gebruiken. Maar je SMIL-animaties zullen in sommige browsers werken (op het moment van schrijven, Chrome ja, Firefox nee). Het zou me niet verbazen als ingesloten CSS in SVG-bestanden werkt of ooit zal werken. JavaScript, waarschijnlijk niet.
Als je SVG in een CSS-achtergrondafbeelding gebruikt, kan ik me voorstellen dat het een soortgelijk verhaal is als hierboven.
Als u inline gebruikt , staan alle mogelijkheden voor u open.
Als u SVG via een objectof gebruikt iframe, moet u de scripts / stijlen rechtstreeks in de SVG insluiten om het te laten werken.