In questo capitolo andremo ad analizzare le tecniche per realizzare le animazioni in SVG utilizzando SMIL.
Syncronized Multimedia Integration Language è un linguaggio basato su XML, che descrive un insieme di elementi base per realizzare animazioni, che possono essere applicati a qualsiasi linguaggio XML.
SVG consente di integrare elementi SMIL all'interno del suo codice per creare animazioni ed inoltre definisce delle estensioni compatibili con le animazioni SMIL.
Prima di vedere come sono realizzate in pratica le animazioni, descriviamo in modo schematico quelli che sono gli elementi e le estensioni principali di SMIL supportati da SVG.
- animate: elemento utilizzato per animare un singolo attributo o una proprietà ;
- set: elemento che assegna un determinato valore ad un attributo;
- animateMotion: elemento che permette di animare un oggetto grafico lungo un percorso definito da un path;
- animateColor: elemento che consente di modificare il colore di un elemento.
- animatetransform: estensione che definisce un elemento per modificare una trasformazione SVG nel corso del tempo;
- mpath: estensione che definisce un elemento con il quale descrivere il path utilizzato da animateMotion;
Passiamo adesso ad analizzare gli attributi principali degli elementi appena descritti a seconda della loro funzione.
Attributi per specificare l'elemento SVG da animare:
- attributeName: attributo nel quale viene specificato il nome dell'attributo dell'elemento;
- attributeType: indica il namespace dell'attributo da animare. I possibili valori sono: CSS (attributo definito nel namespace CSS), XML (attributo relativo al namespace dell'elemento animato) e auto (il namespace viene definito in maniera automatica dal visualizzatore).
Attributi per il controllo della temporizzazione dell'animazione:
- begin: attributo che indica l'inizio dell'animazione. È possibile indicare ad esempio una valore temporale, espresso in secondi, o definire un particolare evento che ha il compito di dare il via all'animazione (ad esempio il click del mouse);
- dur: attributo che indica la durata dell'animazione;
- end: attributo che specifica il termine dell'animazioni;
- restart: attributo con il quale indicare quando l'animazione deve essere ripetuta una volta terminata. I possibili valori sono: always (sempre), whenNotActive (può essere ripetuta solo se terminata) e never (mai);
- repeatCount: attributo per definire il numero di volte in cui l'animazione deve essere ripetuta;
- repeatdur: attributo che definisce la durata totale delle ripetizioni;
- fill: attributo che stabilisce il comportamento dell'elemento al termine dell'animazione. I possibili valori sono: remove (l'elemento viene rimosso al termine dell'animazione) e freeze (l'elemento viene mantenuto nello stato in cui è giunto al termine dell'animazione).
Attributi per definire i valori dell'animazione:
- from: attributo che indica il valore iniziale dell'attributo da animare;
- to: attributo che indica il valore finale dell'attributo;
- values: attributo nel quale indicare i valori che assume l'attributo dell'elemento animato;
- calcMode: attributo che permette di specificare il modo di interpolazione che verrà utilizzato per produrre l'animazione. I possibili valori sono: discrete (nessuna interpolazione), linear (interpolazione lineare nella quale i segmenti sono di uguale durata), paced (interpolazione realizzata mantenendo costante la velocità con cui variano i valori dell'attributo) e spline (interpolazione tramite una curva cubica di Bezier)
- keyTimes: attributo nel quale specificare i valori temporali usati per controllare la temporizzazione dell'animazione;
- keySplines: attributo nel quale indicare una serie di punti di controllo (per le curve di Bezier) relativi alla lista di valori espressi in keyTimes.
