svgjs: animare elementi svg

Approfondendo il discorso iniziato nel precedente post su svgjs, oggi proviam ad animare gli oggetti creati precedentemente tramite dei bottoni javascript. La libreria è abbastanza semplice, ma offre già un buon numero di metodi per interagire con i nostri oggetti.
Procediamo quindi con l’html del precedente post e la creazione degli elementi tramite la libreria:

<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
...
<div id="box1"></div>
<div id="box2"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });

var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}
</script>

Per interagire con i nostri due elementi inseriremo 3 bottoni html, all’intenro dei quali intercetteremo l’evento onClick, poi questo passaggio operativamente potrebbe essere fatto in mille modi più intelligenti.

<input type="button" value="Nascondi" onClick="nascondi()">
<input type="button" value="Mostra" onClick="mostra()">
<input type="button" value="Animazione" onClick="animazione()">

Per quanto riguarda le prime due funzioni il codice è banale: gli elementi sono già disponibili in quanto definiti come variabili globali, si tratterà di utilizzare i metodi show() e hide() rispettivamente per mostrare e nascondere gli elementi.
Decisamente più interessante è invece la terza funzione: il metodo animate() mi permette di animare i miei elementi, il parametro passato determina la durata dell’animazione in millisecondi, un eventuale second parametro permetterebbe di definire l’accellerazione.  In entrambi i casi procediamo a una traslazione di 75px verso sinistra e verso il basso, contemporanemaente nel primo caso procediamo con una rotazione di 45° mentrenel secondo modifichiamo il colore di riempimento. Ancora una volta si noti la comodità della conatenabilità che rende il codice decisamente sintetico.

function nascondi(){
rect.hide();
circle.hide();
}
function mostra(){
rect.show();
circle.show();
}
function animazione(){
rect.animate(2000).move(75, 75).rotate(45);
circle.animate(2000).move(75, 75).attr({ fill: '#f03' });
}

L’esempio