Selv om animering av SVG med CSS kan være mer behagelig for den gjennomsnittlige frontpersonen, har SVG en annen måte å gjøre animasjon innebygd rett inn i selve SVG-syntaksen. Dette er nøyaktig hva vi kort dekker i denne videoen, men hvis du vil ha en komplett referanseguide, kan du definitivt sjekke ut En guide til SVG-animasjoner (SMIL) av Sara Soueidan her på CSS-Tricks.
SMIL står for Synchronized Multimedia Integration Language. Slik jeg forstår det, er det en "ting" for seg selv som tilfeldigvis er innebygd i SVG. Men SVG har noen av sine egne SMIL-lignende tillegg. Jeg vil bare referere til det hele som SMIL, selv om jeg er sikker på at jeg er teknisk feil noen ganger.
For veldig enkle animasjoner spiller det ingen rolle om du gjør det i SMIL eller CSS, det vil gjøre det samme på omtrent samme vanskelighetsgrad. Noen ting kan til og med være enklere i CSS. Men her er noen ting der SMIL er veien å gå:
- Du må animere noe som CSS ikke kan berøre. Som formen på en polygon eller sti.
- Du vil bruke hendelser for å påvirke animasjonen, som en
clickellermouseovereller noe. - Du vil gjøre additive animasjoner, som å animere fra hvor du nå er, en annen x piksler.
- Du vil ha animasjoner som er direkte relatert til andre animasjoner, for eksempel når denne animasjonen er ferdig, kan du starte denne neste animasjonen (uten å manuelt manipulere varighetene).
- Jeg er sikker på at det er flere.
Syntaksen føles skremmende i begynnelsen, men det er egentlig ganske enkelt jeg lover. Her er et grunnleggende eksempel:
Se Pen jAipI av Chris Coyier (@chriscoyier) på CodePen.
"Form morphing" -tingen er virkelig super unik med SMIL, så her er et bedre eksempel enn det rare vi gjorde i videoen:
Se Pen Shape Morph Button av Chris Coyier (@chriscoyier) på CodePen.
I den demoen håndteres hendelsene av JavaScript i stedet for SMIL. Bare hyggelig å vite at du kan gjøre det også. SMIL-hendelsesutløsere er kule, men da må tingen som må klikkes være i den SVG snarere enn bare noe annet sted i DOM.
