L'animazione di SVG è un po 'unica in quanto ci sono tre modi distintamente diversi in cui puoi avvicinarti all'animazione.
1. Animazione con CSS @keyframes
Gli elementi SVG possono essere scelti come target e con stili CSS. Significa che puoi applicare l'animazione tramite @keyframes. Come questo:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Potresti scegliere di animare in questo modo se ...
- L'animazione è abbastanza semplice.
- Hai solo bisogno di animare le proprietà che i CSS possono animare.
- Conosci già e ti senti a tuo agio con le animazioni CSS.
2. Animazione con SMIL
Esiste una sintassi per le animazioni incorporata direttamente in SVG. Ecco un esempio molto semplice:
Ecco un grande tutorial su tutto ciò che è SMIL.
Potresti scegliere di animare in questo modo se ...
- Devi animare proprietà che CSS non possono, come la forma stessa.
- Hai bisogno di altre funzionalità specifiche di SMIL, come iniziare un'animazione quando un'altra finisce senza sincronizzare manualmente durate / ritardi. O cose di interazione, come iniziare un'animazione con un clic.
3. Animazione con JavaScript
Con JavaScript, hai accesso a cose come requestAnimationFrame (o altri cicli), quindi puoi animare semplicemente cambiando rapidamente i valori delle proprietà. Esistono anche framework per lavorare con SVG che in genere hanno elementi di animazione incorporati. O framework di animazione che funzionano con SVG. Come SnapSVG, GreenSock, SVG.js o Velocity.js.
Ecco un esempio con SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Potresti scegliere di animare in questo modo se ...
- Stai comunque lavorando in JavaScript, forse la tua animazione ha a che fare con i dati che ricevi con JSON o simili.
- Hai comunque bisogno di JavaScript, perché hai bisogno della logica o della matematica o di qualcos'altro davvero possibile solo lì.
- Ti interessa che JavaScript risolva alcuni bug per te.
- Lo scopo della tua animazione è piuttosto ampio / complicato e hai bisogno dell'astrazione e dell'organizzazione che JavaScript può fornire.
Demo
Guarda Pen Three Ways to Animate SVG di Chris Coyier (@chriscoyier) su CodePen.
Il modo in cui alla fine utilizzi l'SVG non influisce sulle tue opzioni?
Lo fa. Se stai usando SVG-as- , non sarai in grado di usare animazioni CSS da un altro foglio di stile. Ma le animazioni del tuo SMIL funzioneranno, in alcuni browser (al momento in cui scrivo, Chrome sì, Firefox no). Non sarei sorpreso se i CSS incorporati nei file SVG funzionassero o funzionassero un giorno. JavaScript, probabilmente no.
Se stai usando SVG in un'immagine di sfondo CSS, immagino che sia una storia simile a quella sopra.
Se usi inline , tutte le possibilità sono aperte a te.
Se utilizzi SVG tramite objecto iframe, dovrai incorporare gli script / stili direttamente nell'SVG affinché funzioni.