Selvom animering af SVG med CSS kan være mere behagelig for den gennemsnitlige frontend-person, har SVG en anden måde at lave animation ind i selve SVG-syntaksen. Dette er præcis det, vi kort fortæller i denne video, men hvis du vil have en komplet referencevejledning, skal du helt sikkert tjekke A Guide to SVG Animations (SMIL) af Sara Soueidan lige her på CSS-Tricks.
SMIL står for Synchronized Multimedia Integration Language. Som jeg forstår det, er det en "ting" for sig selv, der tilfældigvis er indbygget i SVG. Men SVG har nogle af sine egne SMIL-lignende tilføjelser. Jeg vil bare henvise til det hele som SMIL, selvom jeg er sikker på, at jeg nogle gange er teknisk forkert.
For meget enkle animationer betyder det ikke meget, om du gør det i SMIL eller CSS, det gør det samme på omtrent samme sværhedsgrad. Nogle ting kan endda være lettere i CSS. Men her er nogle ting, hvor SMIL er vejen at gå:
- Du skal animere noget, som CSS ikke kan røre ved. Ligesom formen på en polygon eller sti.
- Du vil bruge begivenheder til at påvirke animationen, som en
clickellermouseovereller noget. - Du vil lave additive animationer, f.eks. Animere, hvorfra du nu er, yderligere x pixels.
- Du vil have animationer, der relaterer direkte til andre animationer, som når denne animation er færdig, start denne næste animation (uden manuelt at manipulere varigheder).
- Jeg er sikker på, at der er flere.
Syntaksen føles skræmmende i starten, men det er virkelig ret let, jeg lover. Her er et grundlæggende eksempel:
Se Pen jAipI af Chris Coyier (@chriscoyier) på CodePen.
Den "formmorfere" ting er virkelig super unik med SMIL, så her er et bedre eksempel end det underlige, vi gjorde i videoen:
Se Pen Shape Morph Button af Chris Coyier (@chriscoyier) på CodePen.
I denne demo håndteres begivenhederne af JavaScript i stedet for SMIL. Bare rart at vide, at du også kan gøre det. SMIL-hændelsesudløsere er seje, men så skal det, der skal klikkes, være i den SVG snarere end bare andre steder i DOM.