Un'animazione in SVIL (Scalable Vector Graphics)
Oggi continueremo la nostra discussione Scalable Vector Graphic (SVG), e questa volta lavoreremo con Animazione SVG. Non avere paura, SVG Animation è relativamente facile e in questo post inizieremo dalle basi.
Implementazione di base
L'animazione in SVG può essere eseguita attraverso
Come puoi vedere dallo snippet di codice sopra, aggiungiamo il
nome attributo: Questo attributo specifica quale attributo dell'elemento sarà interessato nell'animazione.
a partire dal: Questo attributo è facoltativo, possiamo specificare un valore esatto o lasciarlo partire dal punto in cui era.
a: Questo attributo specifica la direzione dell'animazione. A seconda del valore specificato in nome attributo, i risultati possono variare. Ma in questo esempio si estenderà il altezza.
dur: Questo attributo specifica la durata dell'animazione. Il valore di questo attributo è espresso in Clock Value Sintassi. Per esempio, 02:33 rappresenta 2 minuti e 33 secondi, mentre 3h è uguale a 3 ore, ma non abbiamo bisogno di così tanto tempo, quindi abbiamo specificato la durata per solo 3s o 3 secondi;
La stessa cosa vale r).
- Demo di implementazione di base
Elemento in movimento
Nello spostamento di elementi SVG, è sufficiente scegliere come target le coordinate dell'elemento X e y;
Nell'esempio sopra, spostiamo il rettangolo da 0 a 200 in 3 secondi, il rettangolo apparirà spostandosi orizzontalmente da sinistra a destra. Inoltre, se guardi attentamente, abbiamo aggiunto anche un altro attributo al riempire.
riempire l'attributo qui non ha nulla a che fare con il colore di sfondo come negli altri elementi SVG. Questo attributo specifica in che modo l'animazione si comporterà al termine della durata. In questo esempio noi congelare l'elemento interessato in modo che rimanga dove termina l'animazione.
Funziona anche allo stesso modo cx o cy, così:
- Elemento mobile Demo
Animare più attributi
Finora, abbiamo scelto come target solo un attributo da animare, ma è anche possibile animare più di un attributo alla volta. L'esempio seguente mostra come lo facciamo:
Come puoi vedere, funziona in modo simile, solo ora ne abbiamo due
- Demo di attributi multipli
Seguendo un percorso
Nel nostro precedente post su Lavorare con il testo in SVG, ti abbiamo mostrato come far scorrere il testo in un percorso. È anche possibile fare la stessa cosa in Animazione SVG, possiamo animare un elemento per seguire un percorso. Ecco un esempio.
Il percorso è meglio definito all'interno di a id con
Ecco, ora vediamo in azione;
- Seguendo la demo del percorso
trasformazioni
Possiamo anche usare la trasformazione come scala, tradurre e ruotare per l'animazione, e per farlo useremo
Le trasformazioni in SVG condividono principi simili con i CSS3 e ne abbiamo già ampiamente parlato nel nostro post precedente sulla trasformazione 2D di CSS3.
- Demo di trasformazione
Pensieri finali
A seconda della tua competenza su SVG Animation puoi creare qualcosa di simile.
Uno dei vantaggi dell'utilizzo di SVG Animation su Flash Animation è che non si basa su plug-in di terze parti e che è anche molto più veloce di Flash. Dopo che Adobe ha interrotto il supporto Flash in Android, potresti iniziare a provare questo approccio per offrire l'animazione nel tuo prossimo sito web.
Ulteriori riferimenti
- SVG Animate Documentation
- Tecniche avanzate di animazione SVG
- Visualizza la demo
- Scarica fonte
