Elemento animazione SVG <Animation>

L'elemento di animazione <Animation> di SVG viene utilizzato per creare animazioni per grafici SVG. Gli elementi di animazione sono stati originariamente definiti nel linguaggio di integrazione multimediale sincrono (SMIL). Nell'animazione, è necessario specificare attributi, movimenti, colori, il tempo di inizio dell'animazione e i valori di inizio e fine della durata dell'animazione.

È possibile animare le forme delle immagini SVG. Ci sono diversi metodi per animare le forme SVG. In questo articolo, presenterò tutte le possibilità.

Esempio di animazione SVG

Questo è un esempio di animazione SVG semplice:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="110" width="110"
　　　　　　　　　style="stroke:#ff0000; fill: #0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0 60 60"
　　　　　　　　　　　　to="360 60 60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Attenzione a come l'elemento <rect> è contenuto all'interno dell'elemento <animateTransform>. È proprio questo elemento che rende animato il rettangolo.

Questo è l'animazione SVG generata:

Panoramica delle opzioni di animazione

L'animazione viene realizzata manipolando le proprietà che la forma cambia nel tempo. Questo può essere fatto utilizzando uno o più degli elementi di animazione SVG:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Ogni elemento di animazione SVG qui menzionato imposta o imposta l'animazione di diversi aspetti delle forme SVG. Questi elementi di animazione saranno spiegati nel resto dell'articolo.

set

Questo elemento set è uno degli elementi più semplici degli elementi di animazione SVG. Dopo un intervallo di tempo specifico, imposta semplicemente l'attributo a un valore specifico. Pertanto, la forma non subisce un'animazione continua, ma cambia solo il valore dell'attributo una volta.

Questo è un esempio di elemento <set>:

<svg　width="500"　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<set attributeName="r" attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

Attenzione, l'elemento <set> è contenuto all'interno dell'elemento circle. Questo è il modo in cui si applica l'elemento <set> alla forma - attraverso la sua nesting all'interno dell'elemento SVG da applicare.

L'elemento <set> imposta il valore dell'attributo in un momento specifico. Il nome dell'attributo da impostare è specificato nell'attributo attributeName. Il valore impostato è specificato nell'attributo to. Il momento in cui viene impostato il valore dell'attributo è specificato nell'attributo begin.

L'esempio precedente imposta l'attributo r a 100 dopo 5 secondi. Effetto dell'immagine dopo l'esecuzione:

attributeType

L'esempio precedente contiene anche un attributo attributeType nell'elemento <set>. Il valore è impostato su XML. Questo è perché l'attributo da impostare nel esempio (l'attributo r) è un attributo dell'elemento SVG Circle. Poiché gli elementi SVG sono elementi XML, gli attributi SVG sono anche attributi XML.

È possibile anche impostare l'animazione delle proprietà CSS della forma. Se si fa così, è necessario impostare attributeType su CSS. Se non viene fornito l'attributo attributeType, il browser tenterà di indovinare quale attributo da animare è un attributo XML o CSS.

animate

L'elemento animate viene utilizzato per impostare animazioni sulle proprietà delle forme SVG. È possibile nesting l'elemento animate all'interno della forma da applicare. Ecco un esempio:

<svg　width="500"　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<animate　attributeName="cx"　attributeType="XML"
　　　　　　　　　　　　　from="30"　to="470"
　　　　　　　　　　　　　begin="0s"　dur="5s"
　　　　　　　　　　　　　fill="remove"　repeatCount="indefinite"/>
</circle></svg>

Questo esempio anima l'attributo cx dell'elemento <circle> da un valore di 30 (proprietà "from") a un valore di 479 (proprietà "to"). L'animazione inizia a 0 secondi (proprietà "begin") e dura 5 secondi (proprietà "dur").

Dopo la fine dell'animazione, le proprietà animazione vengono impostate di nuovo sui loro valori originali (proprietà fill=“remove” impostata). Se si desidera che le proprietà animazione mantengano il valore "to" dell'animazione, impostare l'attributo "fill" su "freeze". L'animazione viene ripetuta indefinitamente (proprietà "repeatCount").

Ecco l'animazione generata:

animateTransform

L'elemento <AnimateTransform> può impostare animazioni per l'attributo Transform delle forme. L'elemento <Animate> non può fare questo.

Ecco un esempio:

<svg　width="500"　height="100"><rect　x="20"　y="20"　width="100"　height="40"
　　　　style="stroke:　#ff00ff;　fill:none;"　>
　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100"　to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

Questo esempio di <animateTransform> anima le proprietà dell'elemento <rect> incluso nel transform. L'attributo type è impostato su rotate (funzione di trasformazione rotatoria), il che significa che la trasformazione animata sarà una rotazione. Gli argomenti delle proprietà from e to sono animati e passati alla funzione rotate. Questo esempio ruota attorno al punto 100,100 da 0 gradi a 360 gradi.

Questo è un esempio di animazione di proporzioni del quadrato:

<svg width="500" height="200">
　　　　<rect x="20" y="20" width="40" height="40"
　　　　　　　　　　style="stroke: #ff00ff; fill: none;">
　　　　　　　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1 1" to="2 3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateTransform>
　　　　</rect>
</svg>

Ancora una volta, gli attributi from e to contengono i valori che di solito vengono passati alla funzione di trasformazione scale() come parametri.

Ecco l'animazione generata:

animateMotion (movimento animato)

L'elemento <animateMotion> può animare la forma lungo la traiettoria. Può anche ruotare la forma per adattarsi alla pendenza della traiettoria, come un'auto che guida su una collina. Ecco un esempio:

<svg width="500" height="150">
　　　　<path d="M10,50 q60,50 100,0 q60,-50 100,0"
　　　　　　　　　　style="stroke: #000000; fill: none;"
　　　　　　　　　　　　</path>
　　　　<rect x="0" y="0" width="30" height="15"
　　　　　　　　　　style="stroke: #ff0000; fill: none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50 q60,50 100,0 q60,-50 100,0"
　　　　　　　　　　　　　　　　begin="0s" dur="10s" repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

L'elemento path specifica la traiettoria dell'animazione rettangolare nell'attributo dell'elemento <animateMotion>. L'attributo path utilizza la stessa sintassi dielemento pathLa stessa sintassi.

Questa è anche l'animazione dei risultati della traiettoria mostrata, quindi è possibile seguire meglio il movimento.

Per ruotare il quadrato in modo che si allinei con l'inclinazione della traiettoria, impostare l'attributo rotate dell'elemento <animateMotion> su auto. Ecco un esempio:

<svg width="500" height="150">
　　　　<path d="M10,50 q60,50 100,0 q60,-50 100,0"
　　　　　　　　　　style="stroke: #000000; fill: none;"></path>
　　　　<rect x="0" y="0" width="30" height="15"
　　　　　　　　　　style="stroke: #ff0000; fill: none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50 q60,50 100,0 q60,-50 100,0"
　　　　　　　　　　　　　　　　begin="0s" dur="10s" repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

Ecco l'animazione generata. Nota come la rotazione del quadrato cambia per adattarsi alla traiettoria.

È possibile anche impostare l'attributo rotate con un valore specifico, ad esempio 20 o 30 ecc. In questo modo, la forma ruoterà di quell'angolo durante tutto l'animazione.

unità di tempo

Quando si definisce un'animazione SVG, è possibile specificare il tempo di inizio e la durata dell'animazione. Quando si specificano, è possibile scegliere tra diverse unità di tempo. Gli attributi begin, dur e end di vari elementi animazione sono specificati all'interno di queste unità di tempo.

In questi attributi, è possibile specificare un numero, seguito da una unità di tempo, come nell'esempio di questo documento. Ad esempio, 5s5 secondi. Ecco l'elenco delle unità di tempo che è possibile utilizzare:

È anche possibile specificare il tempo in un formato che include ore, minuti e secondi. Il formato è il seguente:

hh:mm:ss

Ecco un esempio:

1:30:45

Questo esempio specifica un tempo di 1 ora 30 minuti e 45 secondi (per l'animazione, è chiaramente un periodo di tempo molto lungo).

Sincronizzazione animazione

È possibile sincronizzare l'inizio di un'animazione con la fine di un'altra animazione. Ecco come si fa:

<svg width="500" height="100">
<rect x="0" y="0" width="30" height="15"
　　　　　　style="stroke: #ff0000; fill: none;">
　　　　<animate id="one" attributeName="x" attributeType="XML"
　　　　　　　　　　　　　from="0" to="400"
　　　　　　　　　　　　　begin="0s" dur="10s" fill="freeze"
　　　　　　　　　　</animate>
　　　　<animate attributeName="y" attributeType="XML"
　　　　　　　　　　　　from="0" to="50" begin="one.end" dur="10s" fill="freeze"
　　　　　　　　　　</animate>
</rect>
　　　　</svg>

Ecco l'animazione generata:

L'attributo id della prima animazione è impostato su one.

La seconda animazione si riferisce alla prima animazione tramite il属性 begin. Il valore dell'attributo begin è impostato su one.end, il che significa che l'animazione deve iniziare alla fine dell'animazione con ID one.

Quando un'altra animazione inizia o termina, è possibile avviare l'animazione utilizzando id.begin o id.end. Invece di id, utilizzare l'ID dell'elemento animazione per la sincronizzazione.

È anche possibile specificare un offset di tempo rispetto all'inizio o alla fine di un'altra animazione, come segue:

one.begin+10s
one.end+5s

Inoltre, è possibile specificare un tempo di fine chiaro nell'attributo end dell'animazione. Questo non sostituisce l'attributo dur. Fa semplicemente aggiungere un'altra possibile fine all'animazione, quindi prevale quella che si verifica prima. Ecco un esempio:

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s" end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

La durata dell'animazione è di 10 secondi, o si ferma quando l'animazione con ID one termina, a seconda di chi arriva prima.

Animazione ripetuta

Puoi usare due attributi all'interno dell'elemento animazione per ripetere l'animazione.

Il primo attributo è repeatCount. In questo attributo, puoi impostare un numero che farà ripetere l'animazione questo numero di volte, o indefinite per farla continuare senza fermarsi.

Il secondo attributo è repeatDur, che specifica la durata di riproduzione dell'animazione. Puoi anche usare il valore indefinite in repeatDur, che ha lo stesso effetto dell'uso del valore indefinite in repeatCount.

Questi sono due esempi:

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Combinazione di animazioni

Puoi elencare più animazioni all'interno di un elemento <animation> per combinare animazioni. Come hai visto, ecco un altro esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="40" height="20"
　　　　　style="stroke: #000000; fill: none;">
　　　<animate attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10" to="400"
　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
　　　<animate attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10" to="100"
　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
</rect>
</svg>

Questo esempio ha due animazioni, ognuna delle quali imposta l'animazione per le proprietà x e y del rettangolo. Ecco l'animazione generata:

Quando si combinano gli elementi <animateTransform>, il comportamento predefinito è che l'animazione secondaria annulla l'animazione primaria. Tuttavia, è possibile combinare le animazioni di trasformazione aggiungendo l'attributo additive e il valore sum ai due elementi <animateTransform>. Ecco un esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" width="40" height="20"
　　　　　　style="stroke: #000000; fill: none;">
　　　　<animateTransform attributeName="transform" attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1" to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　</animateTransform>
　　　　<animateTransform attributeName="transform" attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0 30 20" to="360 30 20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite" additiu="sum"
　　　　　　　　　　　　</animateTransform>
</svg>

Questo è l'animazione di zoom e rotazione del rettangolo: