Le animazioni

Nella lezione precedente abbiamo visto come definire ed applicare effetti di transizione agli elementi di una presentazione SMIL, ora ci soffermiamo sulle animazioni.

Un'animazione è la modifica graduale di un attributo appartenente ad un elemento, durante un certo lasso di tempo. Ad esempio è possibile modificare gradualmente la grandezza o la posizione di un'immagine o di un video.

Per definire un'animazione, abbiamo bisogno, per prima cosa, di scegliere l'elemento a cui applicare l'animazione; per fare ciò si deve inserire l'elemento <animate> all'interno dell'elemento desiderato, ad esempio:

<img src="media/paesaggio.jpg" width="50" fit="meet" dur="10">
  <animate/>
</img>

In questo caso viene applicata un'animazione ad un'immagine. Successivamente è necessario specificare quale attributo animare; per fare ciò si usa l'attributo attributeName all'interno dell'elemento <animate>:

<img src="media/paesaggio.jpg" width="50" fit="meet" dur="10">
  <animate attributeName="width"/>
</img>

Nell'esempio si specifica l'attributo width, pertanto ciò che animeremo sarà la larghezza dell'immagine. A questo punto non ci rimane che specificare i valori di inizio e fine per l'attributo e il tempo in cui si svolge l'animazione, per fare ciò si usano gli attributi from, to e dur:

<img src="media/paesaggio.jpg" width="50" fit="meet" dur="10">
  <animate attributeName="width" from="50" to="200" dur="5"/>
</img>

In questo caso la larghezza dell'immagine varierà da cinquanta a duecento pixel nell'arco di cinque secondi. L'animazione inizia nel momento in cui comincia la visualizzazione dell'immagine, tuttavia è possibile modificare questo comportamento tramite l'attributo begin, così come è possibile specificare una ripetizione per le animazioni attraverso gli attributi repeatCount e repeatDur. Ecco un esempio:

<img src="media/paesaggio.jpg" width="50" fit="meet" dur="10">
  <animate attributeName="width" from="50" to="200" dur="5"
           repeatCount="2"/>
</img>

In questa lezione abbiamo studiate le animazioni SMIL, nella prossima, vedremo alcuni esempi pratici.