Animazioni

In quesi ultimi capitoli della guida vedremo come rendere un file SVG dinamico creando delle animazioni che possono essere realizzate utilizzando il linguaggio di scripting, come vedremo in questo capitolo, o il linguaggio SMIL, come vedremo nei capitoli successivi.
Un'animazione ottenuta con uno script viene realizzata utilizzando una funzione che va a modificare in maniera dinamica alcuni attributi di un elemento, come ad esempio la posizione.
Consideriamo il seguente esempio:

<svg width="400" height="300" viewBox="0 0 400 300">
  <script type="text/ecmascript"><![CDATA[
      
    var elemento;
    var scrittaCx;
    var intervallo=10;

    function startAnimazione(evt){
      elemento=evt.target.ownerDocument.getElementById("cerchio");
      scrittaCx=evt.target.ownerDocument.getElementById("valoreCx");
      anima();    
    }

    function anima(){                  
      var posizionex=parseFloat(elemento.getAttribute("cx"));      
      posizionex++;      
      if (posizionex<351) {
        elemento.setAttribute("cx",posizionex);        
        scrittaCx.firstChild.nodeValue=posizionex;
        setTimeout("anima()",intervallo);  
      }
    }
    
    function resetAnimazione(evt){
      elemento=evt.target.ownerDocument.getElementById("cerchio");
      scrittaCx=evt.target.ownerDocument.getElementById("valoreCx");
      elemento.setAttribute("cx",50);  
      scrittaCx.firstChild.nodeValue=50;
    }
  ]]></script>

  <line x1="50" y1="50" x2="350" y2="50" fill="none" stroke="black" stroke-width="2"/>
  <circle id="cerchio" cx="50" cy="50" r="10" fill="red" stroke="black" stroke-width="2" />
  <text x="200" y="130" fill="black" font-family="arial" font-size="24" text-anchor="middle">
  Cx:
  <tspan id="valoreCx" dx="10" fill="red">50</tspan>
  </text>
  <g onclick="startAnimazione(evt)">
    <rect x="100" y="150" width="200" height="50" rx="5" fill="yellow" stroke="black" stroke-width="2"/>
    <text x="200" y="180" fill="black" font-family="arial" font-size="24" text-anchor="middle" >Start</text>
  </g>
  <g onclick="resetAnimazione(evt)">
    <rect x="100" y="220" width="200" height="50" rx="5" fill="green" stroke="black" stroke-width="2"/>
    <text x="200" y="250" fill="black" font-family="arial" font-size="24" text-anchor="middle" >Reset</text>
  </g>
</svg>

Link esempio: scriptanim.svg

Cliccando sul pulsante "start" il cerchio rosso inizia a muoversi lungo la linea fino al termine della linea stessa e cliccando poi sul pulsante "reset" il cerchio torna alla posizione iniziale.
La scritta presente al centro dell'immagine visualizza costantemente il valore dell'attributo cx dell'elemento circolare, per mettere meglio in evidenza come viene realizzata l'animazione.
La funzione startAnimazione, dopo aver memorizzato in due variabili i riferimenti agli oggetti che verranno modificati per realizzare l'animazione, manda in esecuzione la funzione anima. Questa funzione, finché il cerchio è all'interno della linea, va a modificare dinamicamente il valore dell'attributo cx, facendo così muovere orrizzontalmente il cerchio di una posizione. Inoltre aggiorna il valore dell'elemento testuale che visualizza sull'immagine il valore di cx.
Successivamente viene lanciata ricorsivamente la stessa funzione anima con l'aiuto della funzione predefinita setTimeout che si ocuppa di lanciare anima dopo un certo intervallo di tempo (nel nostro caso 50 ms). La funzione viene lanciata dopo un certo intervallo di tempo perché altrimenti l'animazione sarebbe troppo rapida e verrebbe visualizzata male.
La posizione del cerchio viene quindi spostata di un pixel verso destra ogni 50 ms finché il cerchio non raggiunge il termine della linea, andando così a realizzare l'animazione voluta.
Da notare nell'esempio un metodo alternativo per aver un riferimento all'elemento root del documento SVG: l'uso del metodo ownerDocument applicato al riferimento ad un elemento grafico.