Animiranje SVG-a pomalo je jedinstveno po tome što postoje tri različita načina na koja možete pristupiti animiranju.
1. Animiranje s CSS-om @keyframes
SVG elementi mogu se ciljati i stilizirati s CSS-om. Znači, animaciju možete primijeniti putem @keyframes. Kao ovo:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Možete odabrati animiranje na ovaj način ako ...
- Animacija je prilično jednostavna.
- Trebate animirati samo svojstva koja CSS može animirati.
- Već znate i ugodno vam je CSS animacije.
2. Animiranje s SMIL-om
Sintaksa za animacije ugrađena je točno u SVG. Evo vrlo jednostavnog primjera:
Evo velikog vodiča o svemu što je SMIL.
Možete odabrati animiranje na ovaj način ako ...
- Morate animirati svojstva koja CSS ne može, poput samog oblika.
- Potrebne su vam druge značajke specifične za SMIL, poput početka animacije kad se druga završi bez ručne sinkronizacije trajanja / odgode. Ili stvari za interakciju, poput pokretanja animacije na klik.
3. Animiranje s JavaScriptom
S JavaScriptom imate pristup stvarima poput requestAnimationFrame (ili drugim petljama), tako da možete animirati samo brzim promjenama vrijednosti svojstava. Postoje i okviri za rad sa SVG-om koji obično imaju ugrađene stvari za animaciju. Ili okviri za animaciju koji rade sa SVG-om. Poput SnapSVG, GreenSock, SVG.js ili Velocity.js.
Evo primjera sa SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Možete odabrati animiranje na ovaj način ako ...
- Ionako radite na JavaScriptu, možda je vaša animacija povezana s podacima koje primate s JSON-om ili slično.
- Ionako vam treba JavaScript, jer vam treba logika ili matematika ili nešto drugo što je stvarno jedino moguće tamo.
- Zanima vas da JavaScript za vas riješi neke bugove.
- Opseg vaše animacije prilično je velik / složen i potrebna vam je apstrakcija i organizacija koju JavaScript može pružiti.
Demo
Pogledajte olovku Tri načina za animiranje SVG-a Chrisa Coyiera (@chriscoyier) na CodePenu.
Ne utječe li na kraju vaše korištenje SVG-a na vaše mogućnosti?
To radi. Ako koristite SVG-as- , nećete moći koristiti CSS animacije iz druge tablice stilova. Ali vi ste SMIL animacije će raditi u nekim preglednicima (u vrijeme pisanja ovog članka Chrome da, Firefox ne). Ne bih se iznenadio ako ugrađeni CSS u SVG datoteke radi ili će raditi jednog dana. JavaScript, vjerojatno ne.
Ako SVG koristite u CSS-ovoj pozadinskoj slici, pretpostavljam da je to slična priča kao gore.
Ako koristite inline , otvorene su vam sve mogućnosti.
Ako SVG koristite putem objectili iframe, morat ćete ugraditi skripte / stilove točno u SVG da bi to moglo raditi.