Animiranje SVG je nekoliko edinstveno, saj lahko na tri različne načine pristopite k njegovi animaciji.
1. Animiranje s CSS @keyframes
Elemente SVG lahko ciljate in jih oblikujete s CSS. To pomeni, da lahko animacijo uporabite prek @keyframes. Všečkaj to:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Animacijo lahko izberete na ta način, če ...
- Animacija je dokaj preprosta.
- Animirati morate le lastnosti, ki jih lahko CSS animira.
- Z animacijami CSS že veste in vam je všeč.
2. Animiranje s SMIL
Sintaksa za animacije je vgrajena neposredno v SVG. Tu je zelo preprost primer:
Tu je velika vadnica o vsem, kar je SMIL.
Animacijo lahko izberete na ta način, če ...
- Morate animirati lastnosti, ki jih CSS ne more, tako kot sama oblika.
- Potrebujete druge funkcije, specifične za SMIL, na primer začetek animacije, ko se druga konča brez ročne sinhronizacije trajanja / zamud. Ali stvari za interakcijo, na primer začetek animacije s klikom.
3. Animiranje z JavaScriptom
Z JavaScriptom imate dostop do stvari, kot je requestAnimationFrame (ali druge zanke), tako da lahko animirate samo s hitro spreminjajočimi se vrednostmi lastnosti. Obstajajo tudi okviri za delo s SVG, ki imajo običajno vgrajene animacijske stvari. Ali pa tudi animacijski okviri, ki delujejo s SVG. Tako kot SnapSVG, GreenSock, SVG.js ali Velocity.js.
Tu je primer s SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Animacijo lahko izberete na ta način, če ...
- Vseeno delate v JavaScriptu, morda je vaša animacija povezana s podatki, ki jih prejmete z JSON-om ali podobno.
- Vseeno potrebujete JavaScript, ker potrebujete logiko ali matematiko ali kaj drugega, kar je resnično mogoče le tam.
- Zanima vas, da vam JavaScript reši nekaj napak.
- Obseg vaše animacije je precej velik / zapleten in potrebujete abstrakcijo in organizacijo, ki jo lahko zagotovi JavaScript.
Demo
Oglejte si Pen Three Ways to Animate SVG Chrisa Coyierja (@chriscoyier) na CodePen.
Ali način uporabe SVG ne vpliva na vaše možnosti?
Res je. Če uporabljate SVG-as- , ne boste mogli uporabljati animacij CSS iz drugega sloga. Ampak vi ste SMIL-animacije bodo v nekaterih brskalnikih delovale (v času pisanja tega članka Chrome da, Firefox ne). Ne bi me presenetilo, če vdelani CSS v datoteke SVG deluje ali bo nekega dne deloval. JavaScript, verjetno ne.
Če uporabljate SVG v ozadju slike CSS, mislim, da gre za podobno zgodbo kot zgoraj.
Če uporabljate inline , so vam na voljo vse možnosti.
Če SVG uporabljate prek objectali iframe, boste morali skripte / sloge vdelati neposredno v SVG, da bo deloval.