Dopo aver definito in maniera teorica gli elementi e gli attributi SMIL utilizzati per animare gli elementi SVG, passiamo a vedere qualche esempio pratico.
Consideriamo il seguente esempio:
<svg width="500" height="300" viewBox="0 0 500 300">
<line x1="100" y1="100" x2="400" y2="100" fill="none" stroke="black" stroke-width="2"/>
<circle cx="100" cy="100" r="10" fill="red" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="XML" begin="1s" dur="5s" fill="freeze" from="100" to="400" repeatCount="indefinite" />
</circle>
</svg>
Link esempio: animSmil1.svg
Questo esempio è molto simile a quello visto nel capitolo delle animazioni realizzate con script. In questo caso l'elemento <circle> viene animato utilizzando il tag SMIL <animate>, inserito al suo interno. L'animazione inizia dopo 1 secondo dal caricamento dell'immagine SVG (begin="1s") e dura per 5 secodi (dur="5s"). Viene realizzata andando a modificare l'attributo cx di <circle> (attributeName="cx"), portandolo da un valore di 100 (from="100") fino ad un valore di 400 (to="400") ed il tutto viene poi ripetuto fino alla chiusura del file SVG (repeatCount="indefinite").
Consideriamo un ulteriore esempio:
<svg width="500" height="300" viewBox="0 0 500 300" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="percorso" d="M100,250 C100,10 400,10 400,250" fill="none" stroke="green" stroke-width="5"/>
<circle cx="0" cy="0" r="10" fill="red" stroke="black" stroke-width="2">
<animateMotion begin="0s" dur="5s" repeatCount="indefinite">
<mpath xlink:href="#percorso"/>
</animateMotion>
</circle>
</svg>
Link esempio: animSmil2.svg
In questo esempio l'elemento <circle> viene fatto muovere lungo un path utilizzando <animateMotion>, dichiarato al suo interno.
L'animazione inizia appena caricato il file SVG (begin="0s"), dura 5 secondi (dur="5s") e viene successivamente ripetuta fino alla chiusura del file (repeatCount="indefinite").
Il path lungo il quale si muove <circle> viene definito dall'elemento <mpath> che contiene al suo interno un link al path chiamato "percorso".
L'ultimo esempio riguarda il funzionamento dell'attributo calcMode:
<svg width="500" height="300" viewBox="0 0 500 500">
<g>
<text x="5" y="100" fill="black" font-family="times" font-size="20">
Discrete
</text>
<line x1="100" y1="100" x2="400" y2="100" fill="none" stroke="black" stroke-width="2"/>
<circle cx="100" cy="100" r="10" fill="red" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="XML" begin="1s" dur="5s" repeatCount="indefinite" values="100;150;250;400" calcMode="discrete"/>
</circle>
</g>
<g transform="translate(0,100)">
<text x="5" y="100" fill="black" font-family="times" font-size="20">
Linear
</text>
<line x1="100" y1="100" x2="400" y2="100" fill="none" stroke="black" stroke-width="2"/>
<circle cx="100" cy="100" r="10" fill="red" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="XML" begin="1s" dur="5s" repeatCount="indefinite" values="100;150;250;400" calcMode="linear"/>
</circle>
</g>
<g transform="translate(0,200)">
<text x="5" y="100" fill="black" font-family="times" font-size="20">
Paced
</text>
<line x1="100" y1="100" x2="400" y2="100" fill="none" stroke="black" stroke-width="2"/>
<circle cx="100" cy="100" r="10" fill="red" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="XML" begin="1s" dur="5s" repeatCount="indefinite" values="100;150;250;400" calcMode="paced"/>
</circle>
</g>
<g transform="translate(0,300)">
<text x="5" y="100" fill="black" font-family="times" font-size="20">
Spline
</text>
<line x1="100" y1="100" x2="400" y2="100" fill="none" stroke="black" stroke-width="2"/>
<circle cx="100" cy="100" r="10" fill="red" stroke="black" stroke-width="2">
<animate attributeName="cx" attributeType="XML" begin="1s" dur="5s" repeatCount="indefinite" values="100;150;250;400" calcMode="spline"/>
</circle>
</g>
</svg>
Link esempio: animSmil3.svg
In questo esempio abbiamo quattro animazioni che fanno muovere un elemento circolare lungo un segmento. I parametri delle animazioni sono uguali nei quattro casi ad eccezione dell'attributo calcMode che assume tutti i valori possibili. Questo esempio serve a mettere in evidenza come cambiando il metodo di interpolazione si posoano creare animazioni differenti pur lasciando invariati gli altri paramentri.
