Realizzare animazioni con JavaScript, ecco come fare

Pubblicato il 21 Aprile 2009

Sono lontani i tempi in cui, per realizzare animazioni sul web, si usava Flash.

Oggi la stragrande maggioranza di web developer, per inserire animazioni nelle proprie pagine web, si affida a uno dei tanti framework JavaScript, i più famosi sono jQuery, MooTools e Scriptaculous.

I meno esperti penseranno che dietro questi framework c’è qualcosa di “magico” che anima elementi di pagine HTML sulla base di complessi algoritmi sviluppati da chissà quali “geni” della programmazione. Come è possibile realizzare animazioni senza fotogrammi, movieclip e interpolazioni?

In realtà, animare un elemento di una pagina html con JavaScript, è qualcosa di semplice che si basa sull’utilizzo del DOM.

Vediamo un esempio pratico dove utilizzerò la funzione setTimeout per far muovere orizzontalmente un div da sinistra verso destra.

Tramite CSS definiamo lo stile del div che avrà ID uguale a “content“:

<style type=”text/css”>

#content {
position:absolute;
left:10px;
top:10px;
width:300px;
background:#336699;
border:1px solid #003366;
padding:5px;
color:#FFFFFF;
}

</style>

Passiamo al JS e specifichiamo tre variabili globali:

var div = null;
var msec = 30;
var id = 0;

L’oggetto associato al div, il numero di millisecondi per cui si ripeterà l’azione di spostamento e l’id associato alla funzione setTimeout. La funzione setTimeout richiama la funzione specificata come primo parametro dopo tot tempo dichiarato (in millisecondi) come secondo parametro:

setTimeout(“funzione da richiamare”, tempo in millisecondi);

Vediamo ora le funzioni necessarie per animare il div:

function init() {
div = document.getElementById(‘content’); //DIV da animare
div.style.left = ‘0px’; //Punto di partenza dell’animazione
animate(); //Chiamata alla funzione che anima il div
}

function animate() {
div.style.left = parseInt(div.style.left)+1+’px’;//Sposta il div verso destra di un pixel alla volta
id = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi
}

I commenti per ogni riga spiegano tutto, l’animazione partirà completato il caricamento della pagina:

window.onload = init;

Se vogliamo permettere l’interruzione dell’animazione possiamo inserire un pulsante che richiama una funzione clearTimeout. La funzione clearTimeout cancella un timeout precedentemente inizializzato con setTimeout:

function stopAnimate() {
clearTimeout(id);//Cancella l’animazione avviata da setTimeout
}

Se volete spostare il div dall’alto verso il basso non dovete fare altro che agire sulla proprietà top invece di left, a voi la scelta dell’animazione da eseguire.

Potete vedere il risultato qui: animazione in javascript

Sotto potete scaricare il file di questo tutorial

[dm]12[/dm]

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: