Animering av SVG er litt unikt ved at det er tre forskjellige måter du kan nærme deg å animere det på.
1. Animasjon med CSS @keyframes
SVG-elementer kan målrettes og utformes med CSS. Betydning, du kan bruke animasjon gjennom @keyframes. Som dette:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Du kan velge å animere på denne måten hvis ...
- Animasjonen er ganske enkel.
- Du trenger bare å animere egenskaper som CSS kan animere.
- Du vet allerede og er komfortabel med CSS-animasjoner.
2. Animasjon med SMIL
Det er en syntaks for animasjoner innebygd rett inn i SVG. Her er et veldig enkelt eksempel:
Her er en stor opplæring om alt som er SMIL.
Du kan velge å animere på denne måten hvis ...
- Du må animere egenskaper som CSS ikke kan, som selve formen.
- Du trenger andre SMIL-spesifikke funksjoner, som å starte en animasjon når en annen slutter uten manuell synkronisering av varigheter / forsinkelser. Eller interaksjons ting, som å starte en animasjon med et klikk.
3. Animasjon med JavaScript
Med JavaScript har du tilgang til ting som requestAnimationFrame (eller andre sløyfer), slik at du kan animere bare ved å endre eiendomsverdiene raskt. Det er også rammer der ute for å jobbe med SVG som vanligvis har animerte ting innebygd. Eller animasjonsrammer som fungerer med SVG. Som 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 kan velge å animere på denne måten hvis ...
- Du jobber uansett i JavaScript, kanskje har animasjonen din å gjøre med data du mottar med JSON eller lignende.
- Du trenger uansett JavaScript, fordi du trenger logikken eller matematikken eller noe annet egentlig bare mulig der.
- Du er interessert i at JavaScript løser noen feil for deg.
- Omfanget av animasjonen din er ganske stor / komplisert, og du trenger abstraksjonen og organisasjonen JavaScript kan gi.
Demo
Se pennen tre måter å animere SVG av Chris Coyier (@chriscoyier) på CodePen.
Påvirker ikke hvordan du til slutt bruker SVG alternativene dine?
Det gjør det. Hvis du bruker SVG-as- , vil du ikke kunne bruke bruk av CSS-animasjoner fra et annet stilark. Men du er SMIL-animasjoner som vil fungere, i noen nettlesere (i skrivende stund, Chrome ja, Firefox nei). Jeg vil ikke bli overrasket om innebygd CSS i SVG-filer fungerer eller vil fungere en dag. JavaScript, sannsynligvis ikke.
Hvis du bruker SVG i et CSS-bakgrunnsbilde, kan jeg forestille meg at det er en lignende historie som ovenfor.
Hvis du bruker innebygd , er alle mulighetene åpne for deg.
Hvis du bruker SVG gjennom en objecteller iframe, må du legge inn skriptene / stilene rett i SVG for at den skal fungere.