Molto spesso gli sviluppatori sono portati ad utilizzare gli effetti grafici
come "contorno ludico" alla vera e propria interazione con l'utente. La
diretta conseguenza di questo atteggiamento, è che spesso ci troviamo
di fronte a pagine piene di inutili animazioni che ricordano molto dei
giochi in Flash o le vecchie pagine anni '90 farcite di gif animate.
In realtà, le animazioni sono uno strumento fondamentale per
catturare l'attenzione dell'utente, creare relazioni fra gli
elementi dell'interfaccia e creare un'interazione più fluida con i
visitatori.
In jQuery UI l'approccio usato dagli sviluppatori è stato quello di
implementare gli effetti grafici soprattutto come estensioni
dei metodi già presenti nella libreria di base.
Animazioni sul colore
La libreria estende anzitutto le capacità del metodo .animate()
nativo, introducendo le transizioni di colore che permettono di
sostituire un colore con un altro con un effetto graduale.
Le proprietà CSS che supportano questo effetto sono: backgroundColor,
borderBottomColor, borderLeftColor, borderRightColor,
borderTopColor, color, outlineColor.
L'animazione eseguirà una transizione dal colore attuale ad uno
impostato in formato esadecimale, rgb o stringa (ad esempio "red", esempio).
//CSS
.error { background-color: #F00; color:#FFF; }
//JS
$("#box").text("Errore!").addClass("error",1000);Animazioni "di classe"
Seguendo l'approccio ad estensione, UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle
classi CSS. Così, passando un numero in millsecondi come secondo
parametro di .addClass(), le proprietà CSS definite nella
classe saranno applicate con una transizione della durata indicata:
$("#box").text("Errore!").addClass("error",1000,"linear",function () {
alert("Errore Notificato!");
});L'introduzione di questa particolare tipologia di effetti è molto
importante, in quanto permette di separare la parte di
scripting da quella grafica,
semplificando futuri adattamenti grafici o addirittura l'adozione di
diversi stili grafici pur mantenendo inalterato il codice JavaScript.
Oltre al parametro della durata, il metodo .addClass()
accetta altri due argomenti opzionali indicanti l'andamento (easing)
dell'animazione ed una funzione da lanciare alla sua conclusione (callback).
$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
alert("Animazione conclusa!");
});Ecco un esempio live.
Altri metodi coinvolti nell'estensione
sono .removeClass() e.toggleClass(); ambedue
accettano i tre argomenti come .addClass().
Per concludere è stato aggiunto un quarto metodo, .switchClass(),
che permette di animare un'elemento a partire da una classe
applicandogli le proprietà di una seconda. Nell'ordine gli argomenti
sono: classe iniziale, classe finale, durata, andamento (opzionale) e:
funzione conclusiva (opzionale)
$("#box").switchClass('classeCorrente','nuovaClasse',500,'easeOutBounce',function(){
alert("Animazione conclusa!");
});Easing avanzato
Il terzo campo nel quale UI estende jQuery è il numero di andamenti,
in inglese easing, disponibili.
Nato
come plugin per jQuery, questo specifico codice JavaScript permette di
modificare la dinamica con cui si svolge l'animazione, simulando
effetti elastici o di attrito al fine di rendere più realistica
l'animazione.
Potete trovare la lista di tutti gli andamenti disponibili sulla home page
del progetto.