Animácia SVG je trochu jedinečná v tom, že existujú tri zreteľne odlišné spôsoby, ako môžete k jej animácii pristupovať.
1. Animácia pomocou CSS @keyframes
Na prvky SVG je možné zacieliť a štylizovať ich pomocou CSS. To znamená, že animáciu môžete použiť prostredníctvom @keyframes. Páči sa ti to:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Týmto spôsobom môžete zvoliť animáciu, ak ...
- Animácia je pomerne jednoduchá.
- Musíte iba animovať vlastnosti, ktoré dokáže animovať CSS.
- S animáciami CSS už viete a sú vám pohodlné.
2. Animácia pomocou SMIL
Syntax pre animácie je zabudovaná priamo do SVG. Tu je veľmi jednoduchý príklad:
Tu je veľký návod na všetko, čo je SMIL.
Týmto spôsobom môžete zvoliť animáciu, ak ...
- Musíte animovať vlastnosti, ktoré CSS nemôžu, napríklad samotný tvar.
- Potrebujete ďalšie funkcie špecifické pre SMIL, napríklad začatie animácie, keď iná skončí, bez manuálnej synchronizácie trvania / oneskorenia. Alebo veci týkajúce sa interakcie, napríklad začatie animácie po kliknutí.
3. Animácia pomocou JavaScriptu
Pomocou JavaScriptu máte prístup k veciam ako requestAnimationFrame (alebo k iným slučkám), takže môžete animovať iba prostredníctvom rýchlo sa meniacich hodnôt vlastností. Existujú aj rámce na prácu s SVG, ktoré majú zvyčajne zabudované animačné prvky. Alebo animačné rámce, ktoré pracujú s SVG. Rovnako ako SnapSVG, GreenSock, SVG.js alebo Velocity.js.
Tu je príklad s SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Týmto spôsobom môžete zvoliť animáciu, ak ...
- V každom prípade pracujete v JavaScripte, možno vaša animácia súvisí s údajmi, ktoré dostávate pomocou JSON alebo podobne.
- Aj tak potrebujete JavaScript, pretože tu potrebujete logiku, matematiku alebo niečo iné, čo je skutočne možné.
- Zaujíma vás, ako za vás JavaScript vyrieši nejaké chyby.
- Rozsah vašej animácie je dosť veľký / komplikovaný a potrebujete abstrakciu a organizáciu, ktorú vám môže poskytnúť JavaScript.
Ukážka
Pozrite si pero Three Ways to Animate SVG od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Nemá to, ako nakoniec použijete SVG, vplyv na vaše možnosti?
Robí. Ak používate program SVG-as- , nebudete môcť používať animácie CSS z inej šablóny štýlov. Ale ste, že SMIL animácie budú v niektorých prehliadačoch fungovať (v čase písania tohto článku Chrome áno, Firefox nie). Nečudoval by som sa, keby vložené CSS do súborov SVG fungovali alebo raz budú fungovať. JavaScript, asi nie.
Ak používate SVG v CSS pozadí, myslím si, že je to podobný príbeh ako vyššie.
Ak použijete vložený riadok , máte k dispozícii všetky možnosti.
Ak používate SVG cez objectalebo iframe, budete musieť vložiť skripty / štýly priamo do SVG, aby to fungovalo.