Animazioni con jQuery
Giovedì 15 Novembre 2007 - 12:38
di Giuseppe Caruso
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.
Categoria: Scripting | Permalink
Commenti
1
ma sulle prime animazioni, qual’è la differenza? son tutte le stesse!
# - postato da smal - 15 Novembre 2007 - 14:14
2
Meglio fare riferimento agli esempi con grafico: http://hosted.zeh.com.br/mctwe.....types.html
3
@smal - Le differenze sono realmente minime. Sono per lo più nell’esponente di moltiplicazione dell’accelerazione e nella curva che creano. Significa, cioè, se l’accelerazione sarà più o meno veloce, alla fine “in”, all’inizio “out” o in entrambe “InOut”.
@Senamion - Potete trovare delle utili animazioni con grafici anche sul sito di Penner. Forse però le animazioni applicate a dei div sono più immediate, anche per chi non ha molta dimestichezza con grafici cartesiani.
4
belli i grafici, ma io oramai avrei scritto “double click to play”, dato che la Adobe ha modificato il player in modo che per attivarlo bisogna cliccarci sopra una volta, e dopo un’altra volta per avviare l’animazione. speriamo che con la versione 10 del player facciano un passo indietro, a quando non era così fastidioso usare un’animazione.
# - postato da smal - 15 Novembre 2007 - 15:51
5
@smal
hai le idee un po’ confuse su chi e perchè ha modificato il player flash :)# - postato da Grab - 15 Novembre 2007 - 16:29
6
molto confuse…
# - postato da simone - 16 Novembre 2007 - 09:17