Animering af SVG er lidt unik, fordi der er tre forskellige måder, du kan nærme dig at animere det på.
1. Animering med CSS @keyframes
SVG-elementer kan målrettes og styles med CSS. Betydning, du kan anvende animation via @keyframes. Sådan her:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Du vælger muligvis at animere på denne måde, hvis ...
- Animationen er ret enkel.
- Du skal kun animere egenskaber, som CSS kan animere.
- Du kender allerede og er fortrolig med CSS-animationer.
2. Animering med SMIL
Der er en syntaks for animationer indbygget lige ind i SVG. Her er et meget simpelt eksempel:
Her er en stor tutorial om alt, hvad der er SMIL.
Du vælger muligvis at animere på denne måde, hvis ...
- Du skal animere egenskaber, som CSS ikke kan, som selve formen.
- Du har brug for andre SMIL-specifikke funktioner, som at starte en animation, når en anden slutter uden manuelt at synkronisere varigheder / forsinkelser. Eller interaktions ting, som at starte en animation med et klik.
3. Animering med JavaScript
Med JavaScript har du adgang til ting som requestAnimationFrame (eller andre sløjfer), så du kan animere bare ved hurtigt at ændre ejendomsværdier. Der er også rammer derude til at arbejde med SVG, der typisk har animerede ting indbygget. Eller animationsrammer, der fungerer med SVG. Ligesom SnapSVG, GreenSock, SVG.js eller Velocity.js.
Her er et eksempel med SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Du vælger muligvis at animere på denne måde, hvis ...
- Du arbejder alligevel i JavaScript, måske har din animation at gøre med data, du modtager med JSON eller lignende.
- Du har brug for JavaScript alligevel, fordi du har brug for logikken eller matematikken eller noget andet, der kun er muligt der.
- Du er interesseret i JavaScript, der løser nogle fejl for dig.
- Omfanget af din animation er ret stort / kompliceret, og du har brug for den abstraktion og organisation, JavaScript kan levere.
Demo
Se pennen tre måder at animere SVG af Chris Coyier (@chriscoyier) på CodePen.
Påvirker ikke hvordan du i sidste ende bruger SVG dine muligheder?
Det gør det. Hvis du bruger SVG-as- , kan du ikke bruge CSS-animationer fra et andet typografiark. Men du er SMIL-animationer, der fungerer i nogle browsere (på tidspunktet for denne skrivning, Chrome ja, Firefox nej). Jeg ville ikke blive overrasket, hvis indlejret CSS i SVG-filer fungerer eller fungerer en dag. JavaScript sandsynligvis ikke.
Hvis du bruger SVG i et CSS-baggrundsbillede, kan jeg forestille mig, at det er en lignende historie som ovenfor.
Hvis du bruger inline , er alle muligheder åbne for dig.
Hvis du bruger SVG gennem en objecteller iframe, skal du integrere scripts / stilarter lige i SVG for at det skal fungere.