Hoewel het animeren van SVG met CSS misschien comfortabeler is voor de gemiddelde front-end persoon, heeft SVG een andere manier om animatie rechtstreeks in de SVG-syntaxis zelf te integreren. Dit is precies wat we in deze video in het kort behandelen, maar als je een complete naslaggids wilt, bekijk dan zeker A Guide to SVG Animations (SMIL) van Sara Soueidan hier op CSS-Tricks.
SMIL staat voor Synchronized Multimedia Integration Language. Zoals ik het begrijp, is dat een "ding" op zichzelf dat toevallig in SVG is ingebouwd. Maar SVG heeft enkele van zijn eigen SMIL-achtige toevoegingen. Ik zal het allemaal gewoon SMIL noemen, ook al weet ik zeker dat ik soms technisch incorrect ben.
Voor heel eenvoudige animaties maakt het niet veel uit of je het in SMIL of CSS doet, het zal hetzelfde doen op ongeveer dezelfde moeilijkheidsgraad. Sommige dingen zijn misschien zelfs eenvoudiger in CSS. Maar hier zijn enkele dingen waar SMIL de juiste keuze voor is:
- U moet iets animeren dat CSS niet kan aanraken. Zoals de vorm van een veelhoek of pad.
- U wilt gebeurtenissen gebruiken om de animatie te beïnvloeden, zoals een
clickofmouseoverof zoiets. - U wilt additieve animaties maken, zoals animeren van waar u ook bent, nu nog eens x pixels.
- U wilt animaties hebben die rechtstreeks verband houden met andere animaties, zoals, wanneer deze animatie is afgelopen, begint deze volgende animatie (zonder handmatig de duur te manipuleren).
- Ik weet zeker dat er meer zijn.
De syntaxis voelt in het begin intimiderend, maar het is echt vrij eenvoudig, dat beloof ik. Hier is een eenvoudig voorbeeld:
Zie de Pen jAipI door Chris Coyier (@chriscoyier) op CodePen.
Het "vormvervormende" ding is echt super uniek met SMIL, dus hier is een beter voorbeeld dan het rare dat we in de video hebben gedaan:
Zie de Pen Shape Morph Button door Chris Coyier (@chriscoyier) op CodePen.
In die demo worden de gebeurtenissen afgehandeld door JavaScript in plaats van SMIL. Gewoon leuk om te weten dat je dat ook kunt. SMIL-gebeurtenistriggers zijn cool, maar het ding waarop moet worden geklikt, moet in die SVG staan in plaats van ergens anders in de DOM.