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.
Se vuoi aggiornamenti su Design inserisci la tua email nel box qui sotto:
