JavaScript – La mia prima animazione (parte 1)
É vero, l’abbiamo già detto svariate volte che reinventare la ruota non è sempre la scelta più giusta, tuttavia, in alcuni casi, può essere sinonimo di arricchimento del proprio bagaglio personale di esperienze e di conoscenze.
jQuery, MooTools, Prototype, DoJo e tante altre; le librerie JavaScript a nostra disposizione sono sempre di più e sempre più efficienti.
Detto questo, la domanda sorge spontanea: allora perchè reinventare la ruota ?? perchè creare una funzione per animare un oggetto nel mio sito, quando posso benissimo utilizzare una libreria per avere a disposizione tantissimi effetti con poche righe di codice ??
Beh, per poter procedere con questo articolo c’è bisogno di un ingrediente fondamentale: la curiosità. É infatti quest’ultima (e non solo) che ci aiuterà a fare progressi e ad avere maggiore padronanza del linguaggio.
É ancora la curiosità, che ci porta a farci domande del tipo: Ma perchè se utilizzo il metodo “animate” (ad es. in jquery), riesco ad effettuare animazione sull’elemento ?? Che cosa accade “realmente” quando io chiamo questo metodo ??
In questo articolo partiremo dall’inizio, vedremo insieme la logica, e a fine articolo riuscirai a creare una animazione da zero, che sia performante, e compatibile con i principali browser.
Le animazioni in JavaScript, di cosa si tratta ?
Il concetto che si trova alla base di un’animazione in JavaScript è semplice, si tratta infatti di muovere uno (o più) elementi del DOM all’interno della pagina, utilizzando una funzione che ne modifichi le propietà a determinati intervalli o frame rate.
In JavaScript abbiamo a disposizione dei temporizzatori setTimeout(f, t) e setInterval(f, t); il primo esegue con un ritardo di “n” ms la funzione che riceve come primo argomento, mentre la seconda esegue la funzione ogni “n” ms fino a quando non viene interrotta.
Abbiamo appena parlato di DOM (Document Objet Model), cerchiamo di capire che cos’è.
Il DOM, può essere immaginato come una struttura ad albero che rappresenta una gerarchia di nodi (ad esempio di tipo html o xml).
In realtà il DOM è un Application Programming Interface (API) per documenti HTML e XML che permette a noi sviluppatori di lavorare sui suoi nodi, aggiungedoli, eliminandoli o modifando specifiche parti della pagina.
Ecco un’immagine che rappresenta il Document Object Model (fonte: http://www.w3.org/) non è un capolavoro di grafica, ma rende bene l’idea:
Ritardo e Spostamento costanti: evitiamoli
nb: Il tempo che il nostro script impiega ad essere processato dipende dalla macchina che utilizziamo e dal browser, di conseguenza, la nostra animazione non verrà vista da tutti gli utenti allo stesso modo.
Più avanti, nell’esempio fornito con questo articolo, vedremo una semplice funzione ricorsiva che utilizza il temporizzatore setTimeout per chiamare se stessa con un piccolo ritardo di 30ms; la funzione, in fine, si ferma al raggiungimento di un determinato valore.
Il suo obbiettivo è quello di spostare, ogni volta che viene chiamata, uno specifico elemento di 5px verso destra, fino a quando non raggiunge una distanza ( da sinistra ) di 600px; a quel punto non prosegue.
L’esempio evidenzia subito due potenziali problemi:
- il ritardo è costante ( 30ms ):
questo significa che la funzione chiama se stessa con un ritardo costante di 30ms, sempre. - lo spostamento è costante ( 5px ogni 30ms ):
la funzione sposta di 5px l’elemento ogni 30 ms, sempre.
Per evitare il ritardo costante, bisognerebbe, ad ogni chiamata della funzione a se stessa, impostare un tempo diverso; in questo modo, il ritardo sarebbe diverso da fotogramma a fotogramma.
Lo spostamento costante è un’altro problema, perchè se durante l’animazione ci fosse un picco di utilizzo di CPU, diventerebbero molto evidenti gli scatti (delle piccole interruzioni).
Queste micro-interruzioni ci sono sempre, ed è impossibile evitarle, tuttavia possiamo “mascherarle” per fare in modo che non vengano notate.
Iniziamo da qualcosa di semplice
Il seguente codice mostra una semplice funzione che tramite l’utilizzo del temporizzatore setTimeout(), esegue un’animazione su un elemento, spostandolo verso destra fino ad arrivare a 600px (left=600px).
Potete vedere questo esempio in funzione facendo click qui.
<script type="text/javascript">
var p=10,t;
function spostalo(obj){
if(p > 595){
clearTimeout(t);
return;
}
p += 5;
obj.style.left = p+'px';
t = setTimeout( function(){ spostalo(obj) }, 30 );
}
window.onload = function(){
setTimeout(function(){
var element = document.getElementById('space');
spostalo(element);
}, 1000);
};
</script>
Il concetto alla base dell’esempio appena visto è il seguente: sposto l’elemento selezionato di 5px, poi tramite l’utilizzo del temporizzatore setTimeout() richiamo nuovamente la funzione di spostamento ma con un ritardo di 30ms; questa operazione viene eseguita fino a quando l’elemento raggiunge i 600px.
Per riprodurre lo spostamento viene incrementata la proprietà “left” dell’elemento di 5px ogni volta che la funzione viene chiamata, fino a, come dicevo prima, il raggiungimento di 600px;
In pratica, la funzione spostalo() riceve come argomento un elemento ricavato dal documento tramite la funzione getElementById().
La prima cosa è controllare se abbiamo raggiunto il limite, in tal caso tramite clearTimeout() interrompiamo eventuali ritardi generati dal temporizzatore setTimeout(); in caso contrario viene aggiornata la sua proprietà css left aggiungendole 5px, a questo punto la funzione chiama nuovamente se stessa ma con un ritardo di 30ms.
Conclusioni
In questo articolo abbiamo gettato le basi per creare delle animazioni in JavaScript; nel prossimo vedremo come evitare il ritardo e lo spostamento costanti, creando delle funzioni avanzate e nella terza parte di questa guida vedremo come implementare effetti di easing sulle animazioni.
Gli articoli di questa guida
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
15 commenti
Trackback e pingback
-
JavaScript – La mia prima animazione (parte 2) | Your Inspiration Web
[...] primo articolo di questa guida abbiamo visto come creare un’animazione in JavaScript molto semplice e per di più, se…
Articolo molto interessante ^^
Aspetto la seconda parte, spero arrivi presto.
Ciao!
Ciao Dario, grazie :).
Vedrai che la seconda parte (insieme alla terza) saranno le più divertenti !!!
Ciao !
Bellooo! :D
Ciao Antonio, grazie :D
Grazie Nic,
questi approfondimenti sono sempre bene accetti :)
Per rispondere alla tua domanda sul perché imparare JavaScript “liscio”, io sono sempre del parere che dal mattone si deve imparare a costruire le case e non viceversa. Quindi, hai tutta la mia stima :)
A presto!
Ciao just, grazie per i complimenti … personalmente trovo affascinante scoprire cosa si “nasconde dietro a i frameworks” e so che è così anche per te :D
Bravo Nic. Ci vuole un ritorno alle origini ogni tanto … tanto :-)
Di principio sono daccordo con quanto hai detto e che Giustino ha ribadito.
Ma sono diventato un drogato di jQuery e indietro non torno.
Strano perchè solitamente (con gli altri linguaggi) non amo molto i framework o pacchetti già fatti. In particolare con PHP voglio fare tutto io altrimenti non mi fido.
Ciao Maurizio, grazie :)
Parli con un’altro drogato di jQuery ahahhaha … questi sono soltanto degli esercizi con i quali prendere dimestichezza con il linguaggio.. non faccio fatica a crederti quando mi dici che non torni indietro.. jQuery è semplice da imparare e ti semplifica veramente il lavoro..
Comunque, ogni tanto (come dici te) bisogna rinfrescarsi la memoria e capire che alla fine, dietro a tutto c’è il nostro amatissimo JavaScript.. mi è capitato di sentire domande tipo: utilizzo JavaScript o jQuery .. è per quello che mi piace fare guide di questo tipo :D
ecco qua un altro “drogfato” di jquery, che all’inizio quando me l’anno proposto come altrativa a prototype ho disprezzato e mi sono anche arrabbiato perché non capivo il senso.
Sicurametne è interessante capire cosa c’è dietro ad un framework e come si arriva ad una soluzione che con jquery impieghi forse 10 righe di codice e non una guida divisa in tre parti :)
Concordo con Maurizio
perché quando prendo codice scritto da altri a volte mi metto le mani nei capelli.
Per lo più, a me capita di trovare plugin che hanno 100.000 opzioni e magari a me servono due cacchiate.. a quel punto mi ci metto e cerco di fare da me.. forse io sono un caso a parte ? :D …
Comunque, quello che cercherò di spiegare in queste tre guide, con jQuery si può fare con una sola riga di codice : animate({left: ‘800px’}, 600, ‘easeBackIn’);
:D …
Grazie per aver commentato Luca, buona giornata :)
Sto già smanettando con la guida di ajax..ma meglio sapere anche del js per imparare più a fondo..
Aspetto anche io le prossime :D
Ciao Dranzer, come dicevo, vedrai che le prossime parti saranno mooooolto più divertenti :D
Ragazzi il link non funziona più…
Ciao Daniele,
ho provato e sembra funzionare.. hai ancora problemi a visualizzare l’esempio ?