Realizzare animazioni con JavaScript, ecco come fare
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3.67 out of 5)
Loading ... Loading ...



Pubblicato il 21/4/2009 alle 12:15

animazioni con javascript

Sono lontani i tempi in cui, per realizzare animazioni sul web, si usava il buon vecchio 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

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Animazioni in JavaScript (101B)
added: 21/04/2009
clicks: 453
description: Realizzare animazioni con javascript senza utilizzare alcun framework

Google Buzz
Pubblicato in HTML, JavaScript, MooTools, News, Programmazione, Scriptaculous, Scripts, Web 2.0, jQuery | 8 Commenti »

Condividi




Realizzazione siti web



Altri articoli che potrebbero interessarti

8 Responses to “Realizzare animazioni con JavaScript, ecco come fare”

  1. Filippo Riggio Says:
    Aprile 22nd, 2009 at 06:39

    E’ interessante notare come la funzione animate sia ricorsiva….

  2. EmaWebDesign Says:
    Aprile 22nd, 2009 at 13:24

    Si,possiamo tranquillamente definirla ricorsiva ;)

  3. Emiliano Says:
    Maggio 13th, 2009 at 11:06

    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?

  4. EmaWebDesign Says:
    Maggio 13th, 2009 at 12:06

    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.

  5. Emiliano Says:
    Maggio 13th, 2009 at 14:20

    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.

  6. Phate Says:
    Ottobre 25th, 2009 at 01:50

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

  7. EmaWebDesign Says:
    Ottobre 25th, 2009 at 11:25

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

  8. EmaWebDesign goto 2010 | EmaWebDesign :: Web Programming / Web Design / SEO Says:
    Gennaio 4th, 2010 at 15:16

    [...] 04) Realizzare animazioni con JavaScript, ecco come fare [...]

Leave a Reply