Press "Enter" to skip to content

Realizzare animazioni con JavaScript, ecco come fare

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]

Condividi l'articolo con i tuoi amici
  1. Credo che la SetTimeout non determini QUANTE VOLTE la funzione viene ripetuta, ma OGNI QUANTI millisecondi… (vedi commenti)

    io ho bisogno di impostare una fermata non via button ma semplicemente dopo tot pixel di spostamento. Mi sai dire come fare?

  2. Ciao Emiliano,

    forse non sono stato chiarissimo, setTimeout richiama la funzione specificata come primo parametro ogni tot (millisecondi) specificato come secondo parametro.

    Per il tuo problema, così su due piedi (puoi trovare soluzioni migliori ragionandoci un pò su), posso consigliarti di prevedere un’altra variabile globale da usare come contatore:

    var cont=0;

    Incrementi la variabile all’interno della funzione “animate”:

    cont++;

    Poi, sempre in “animate”, determini quando l’animazione deve finire, in questo caso quando il contatore arriva a 100 (poi sceglierai tu quando ti serve di fermarla):

    if (cont<100)
    id = setTimeout(animate,msec);
    else stopAnimate();

    Spero di esserti stato utile.

  3. Più che utile!

    Gentile e puntualissimo, grazie di cuore.

    Faccio un pò di esperimenti (spero di non tornare qui piagnucolando la mia incompetenza in materia di JS – per fortuna me la cavo decentemente con altro) e ti faccio sapere!

    Saluti cordiali, e ancora grazie.

  4. Phate Phate

    Ciao, per questo tipo di animazioni basta utilizzare il tag in html puro.

  5. Conosco il tag marquee ma l’obiettivo di questo articolo, tramite un semplice esempio, è quello di illustrare un metodo per progettare animazioni utilizzando JavaScript 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.