In questo articolo vorrei illustrare i princìpi alla base delle animazioni di jQuery. Sia che si tratti di metodi che operano su animazioni particolari (come fadeIn()) o su animazioni più complesse (come animate()), essi sono tutti accomunati da caratteristiche comuni rintracciabili nell'oggetto fx di jQuery. Questo oggetto è direttamente accessibile dagli sviluppatori. Non è un caso che plugin come Easing lo utilizzino per estendere la gamma degli effetti disponibili in jQuery. Vediamo di seguito le caratteristiche principali delle animazioni jQuery.
Gli step
Ogni animazione jQuery è suddivisa in atomi di tempo chiamati step. Ciascuno step può anche essere considerato come l'unità di misura base di un animazione. Quando creiamo un'animazione, viene automaticamente creata una sequenza di step che porterà jQuery a variare una proprietà CSS dell'elemento dallo stato iniziale a quello finale.
Quando scriviamo:
$('#test').animate({
width: 200
});
jQuery legge la proprietà width iniziale dell'elemento (per esempio 0) e crea la sequenza di step che porterà l'elemento ad avere la larghezza finale di 200 pixel. In questo caso, poichè non è stata specificata una velocità per l'animazione, jQuery userà il valore fast come valore iniziale.
A questo punto jQuery crea la sequenza di step rapportandola con la velocità specificata in modo da creare l'effetto di una maggiore o minore velocità dell'animazione. Un'animazione con un parametro di velocità inferiore ha più step di un'animazione che ha un parametro di velocità più elevato.
Gli step servono anche per tener traccia dell'inizio e della fine dell'animazione. Possiamo accedere a tali step usando il secondo oggetto letterale del metodo animate():
$('#test').animate({
width: 200
},
{
step: function() {
//...
}
}
);
A scopo di test potremmo inizializzare un contatore e incrementarlo su ogni step. Potremo così vedere di fatto il numero di step utilizzati in un'animazione:
var counter = 0;
$('#test').animate({
width: 200
},
{
step: function() {
counter++;
console.log(counter);
}
}
);
Il metodo step() non ha un'utilità immediata. Osservando cosa accade nella console JavaScript del browser, noteremo una elevata velocità del nostro contatore che non corrisponde ovviamente alla velocità globale dell'animazione. In altre parole, step e velocità funzionano in modo asimmetrico.
L'animazione termina quando la sequenza di step ha portato il valore iniziale al suo stato finale (nel nostro esempio da 0 a 200).
Animazioni sequenziali e animazioni simultanee
Come abbiamo visto, un'animazione jQuery non è altro che una sequenza di step che modifica un valore portandolo da uno stato iniziale ad uno finale. Tuttavia molti metodi di jQuery che gestiscono animazioni accettano una funzione di callback da invocare quando l'animazione è completa.
Possiamo utilizzare tali funzioni per creare animazioni sequenziali:
$('#test').animate({
width: 200
}, 'slow', function() {
$(this).animate({
left: 100
}, 'slow', function() {
$(this).animate({
width: 100
}, 'slow');
});
});
Ossia:
- l'elemento raggiunge la larghezza di 200 pixel
- viene spostato verso destra di 100 pixel
- la sua larghezza viene reimpostata a 100 pixel
Queste animazioni sono sequenziali. Un'animazione simultanea sarebbe invece stata la seguente:
$('#test').animate({
width: 200,
left: 100
}, 'slow');
In questo caso le due proprietà CSS vengono modificate simultaneamente.
Animazioni ripetute
Le animazioni jQuery possono essere ripetute nel tempo. Per far ciò occorre utilizzare le funzioni setTimeout() o setInterval() di JavaScript. Possiamo utilizzare setInterval() in questo modo:
var interval = setInterval(function() {
$('#test').animate({
width: 200
}, 500, function() {
$(this).animate({
width: 100
}, 500);
});
}, 1000);
L'unico accorgimento da usare in questi casi riguarda il tempo delle animazioni, che deve sempre coincidere con la durata del timer JavaScript. In questo caso il nostro timer ha una durata di 1000 millisecondi, quindi ciascuna animazione dovrà durare 500 millisecondi (o un altro valore la cui somma restituisca 1000).