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: https://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:

  1. il ritardo è costante ( 30ms ):
    questo significa che la funzione chiama se stessa con un ritardo costante di 30ms, sempre.
  2. 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

  1. JavaScript, la mia prima animazione: capire il funzionamento e conoscere i principali limiti.
  2. JavaScript, la mia prima animazione: creare delle animazioni basilari ed evitare i problemi ad esse legati.
Tag: ,

L'autore

Nicolas è un programmatore web con la passione per il web design e per javascript. Passa la maggior parte del suo tempo libero alla ricerca di nuove idee e nuovi progetti da sviluppare. É fanatico di Wordress e jQuery e si diverte nella creazione di plugins per quest'ultimo.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

15 commenti

Trackback e pingback

  1. 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…