Anche sul web esistono mode e tendenze. La grafica, il layout e il look&feel evolvono sotto la spinta di forze diverse: da una parte abbiamo le novità introdotte dalla tecnologia, come le Rich Internet Application (RIA), l'accesso via mobile e il cloud storage. Dall'altra parte abbiamo delle vere e proprie mode, che esigono da grafica e layout il rispetto di canoni estetici. Un esempio classico sono stati i bordi arrotondati dei box HTML, che dopo aver imperversato per anni adesso sembrano pronti a passare lo scettro ad una grafica più minimalista.
Una delle poche costanti, in un scenario in continua evoluzione, è la presenza di piccoli elementi animati, o addirittura widget interattivi, all'interno delle pagine web. La prime animazioni erano delle semplici GIF animate, che sono andate man mano sostituite da componenti Flash. Con l'avvento di HTML5 e CSS3 probabilmente assisteremo al ritorno di animazioni realizzate con linguaggi di scripting, come ad esempio JavaScript, MooTools o jQuery.
E' in quest'ottica che la conoscenza base delle animazioni JavaScript rimane un cardine portante dello sviluppo web. Oggi vedremo come realizzare una semplice animazione con poche righe di codice, che useremo come esempio per illustrare alcuni dei concetti fondamentali.
Per motivi didattici divideremo il codice in due parti. La prima parte riguarda il codice di controllo dell'animazione, che in linea di massima potrebbe restare lo stesso per la maggior parte delle animazioni di cui abbiamo bisogno. Eccolo
var ref;
function run() {
ref = setInterval('move()', 100) ;
}
function stop() {
clearInterval(ref) ;
}
il codice qui sopra è un esempio di utilizzo di due funzioni molto importanti per realizzare le animazioni. La funzione setInterval si occupa di specificare l'intervallo di tempo che dovrà scandire l'animazione. Per certi versi la funzione assomiglia alla definizione del numero di frame per secondo, o alla velocità di scorrimento di un filmato. Nell'esempio qui sopra abbiamo usato setInterval per dire al browser di eseguire la funzione move() ogni 100 millisecondi. Ciò significa che la funzione move() verrà girerà un numero infinito di volte, al ritmo di un'esecuzione ogni 100 millisecondi (10 volte al secondo).
Molte animazioni utilizzano questo schema ciclico, ovvero ripetono una sequenza all'infinito: ciò vale indifferentemente dal fatto che siano realizzate in JavaScript, Flash o con una semplice GIF animata. Con questa modalità di esecuzione non è necessario avere il controllo dell'animazione, ovvero non abbiamo bisogno di arrestarla. E' comunque utile sapere come terminare il ciclo di esecuzione infinita, per almeno due motivi: è bene conoscere l'argomento per padroneggiare le animazioni; la possibilità di arrestare l'animazione è molto utile in fase di sviluppo e debug.
Per fermare l'animazione usiamo la funzione clearInterval, passando il valore ref, ovvero il valore ritornato dalla chiamata alla setInterval. Un'ottima domanda a questo punto potrebbe essere: cosa contiene la variabile ref?
Una risposta esaudiente dovrebbe illustrare la gestione dei processi del browser, cosa che non ci interessa in questa sede. Per capire qual è lo scopo della variabile ref basta un semplice ragionamento: una pagina web potrebbe contenere svariate invocazioni della setInterval, ad esempio
setInterval('move_1()', 20) ;
setInterval('move_2()', 50) ;
setInterval('move_3()', 70) ;
setInterval('move_1()', 90) ;
dove move_1(), move_2() e move_3() potrebbero essere animazioni diverse. Notiamo però, nell'esempio qui sopra, che abbiamo eseguito l'animazione move_1() due volte: la prima volta con l'intervallo 20, la seconda volta con l'intervallo 90. Nulla ci vieta di eseguire la stessa animazione più volte, purché sappiamo quello che stiamo facendo. E' evidente che non possiamo fermare un'animazione mediante il comando
clearInterval('move_1()')
perché il browser non saprebbe quale delle due istanze di move_1() arrestare. Ecco perché, al momento di esecuzione della setInterval abbiamo un valore di ritorno, che rappresenta l'ID unico di quella animazione: è questo il valore che verrà memorizzato nella variabile ref. Notiamo che, in genere, non ci interessa sapere qual è questo valore: ci basta sapere che è un numero, probabilmente progressivo, assegnato dal browser ad ogni animazione per poterle distinguere. Grazie a questo ID, memorizzato nella variabile ref, per arrestare una certa animazione basta invocare la funzione clearInterval passando la variabile ref, come nell'esempio run() - stop() visto più sopra.
Dopo la teoria generale, possiamo mostrare un possibile esempio di implementazione della funzione move(), che contiene l'animazione vera e propria
var x0 = 1.8 ;
var y0 = .25 ;
var baseX = 290 ; // (box width - image width)/2
var baseY = 40 ; // (box height - image height)/2
var time = 0 ;
var images = document.getElementsByTagName("img") ;
function move() {
for (i = 0 ; i < images.length ; i++) {
if (images[i].className == "animate") {
s = images[i].style;
s.position = 'absolute';
// Algoritmo di animazione
s.left = ( baseX*Math.sin(time/10 + i/4 + x0) + baseX) + "px" ;
s.top = ( baseY*Math.cos(time/20 + i/4 + y0) + baseY) + "px" ;
}
}
time++ ;
}
l'esempio qui sopra implementa l'animazione di tutte le immagini aventi classe CSS animate all'interno di un box di dimensioni 600x100. Le singole immagini hanno dimensione 20x20.
La parte forse meno intuitiva del codice è l'algoritmo di animazione vero e proprio, che in questo caso utilizza due funzioni sinusoidali per ottenere un effetto di oscillazione armonica: le immagini oscilleranno su e giù per lo schermo, come se fossero appese ad un pendolo, attaccato a sua volta ad una molla. Il modo migliore di capirlo è provare a far girare il codice nel browser.
Se stiamo muovendo i primi passi nel mondo della grafica animata non preoccupiamoci troppo dell'algoritmo di animazione: l'importante, per iniziare, è comprendere il framework concettuale alla base del codice. Per le prime animazioni andrà benissimo un semplice s.left = time + "px": col tempo impareremo a sbizzarrirci e potremo creare animazioni via via più complesse.
