Animazioni con jQuery

Uno dei problemi nella creazione di effetti animati per il web (con Javascript ma non solo) è quello delle transizioni delle animazioni.

Prendiamo quelle create con jQuery. Per animare alcune proprietà  come larghezza o altezza di alcuni elementi (x)html, se ne impostano semplicemente i valori di arrivo per come li si desidera. La transizione avverrà , di default, in modo lineare, cioè, da 0 a 100 in modo costante nell’unità  di tempo impostata.

Per rendere meno “meccaniche” queste trasformazioni vengono in aiuto delle equazioni matematiche, create inizialmente da Robert Penner per l’utilizzo con Flash tramite ActionScript. Queste equazioni creano delle “curve di raccordo”, dette Easing (raccordare con curve, matematiche appunto), tra il valore iniziale e quello finale desiderati.

In questo modo potremo avere delle animazioni più naturali, che possono iniziare velocemente per finire lentamente, o possono essere elastiche e rimbalzare alla fine o all’inizio dell’animazione e così via.

Il loro nome, purtroppo, non è sempre intuitivoÂ… Ci viene incontro Glen Lipka con un comodissimo jQuery Easing Cheat Sheet “live” per individuare a colpo d’occhio l’animazione di cui abbiamo bisogno. Comodissimo.