Javascript - Usare le equazioni di Robert Penner per ottenere effetti da Hollywood nelle nostre pagine web.
Sono davvero parecchi i siti e le applicazioni web2.0/ajax che si appoggiano su framework più o meno collaudati come jquery, mootools e prototype. La maggior parte delle volte gli stessi siti sfruttano dei plugin delle librerie a cui si appoggiano ( come scriptacolous e interface ) per realizzare degli effetti molto carini, inutili ma sicuramente di effetto.
Chi sa un minimo di javascript dovrebbe poter dire "anche io potrei realizzare la stessa cosa in 2 minuti, basta un setInterval, no?".
Diciamo di si, ma se vogliamo realizzare degli effetti "a molla" o roba del genere e non siamo matematici ci conviene imparare ad utilizzare le equazioni di Robert Penner.
Queste sono delle funzioni che permettono di ottenere un valore a partire da altri dati che gli forniremo. Sono state scritte per Action Script, d’altra parte i due linguaggi sono molto simili e perciò implementarle sarà molto semplice; quasi un “copia/incolla” direi 
Iniziamo scaricandole da qui e copiandole in un file js. Queste potranno essere utilizzate secondo i termini descritti nello stesso file.
Vediamo subito un esempio di come implementarle:
-
transitions = {
-
‘linearTween’: function (t, b, c, d) {
-
return c*t/d + b;
-
},
-
-
‘easeInQuad’: function (t, b, c, d) {
-
return c*(t/=d)*t + b;
-
},
-
-
‘easeOutBounce’: function (t, b, c, d) {
-
if ((t/=d) < (1/2.75)) {
-
return c*(7.5625*t*t) + b;
-
} else if (t < (2/2.75)) {
-
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
-
} else if (t < (2.5/2.75)) {
-
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
-
} else {
-
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
-
}
-
}
-
}
Ovviamente ne ho messe poche per motivi di brevità: in realtà ce ne sono circa una trentina.
Fatto ciò creiamoci una funzione che sia in grado di utilizzarle:
-
function animate(idObj, prop, init, end, duration, transition) {
-
var obj = document.getElementById(idObj),
-
change = end-init,
-
pos,
-
time = new Date().getTime(),
-
timer,
-
totaltime = time + duration,
-
duration = duration / 1000,
-
transition = transitions[transition || ‘easeInQuad’],
-
i = setInterval(function() {
-
timer = new Date().getTime();
-
if(timer > totaltime) {
-
clearInterval(i);
-
obj.style[prop] = end + ‘px’;
-
} else {
-
pos = transition((timer - time)/1000, init, change, duration)
-
obj.style[prop] = pos + ‘px’;
-
}
-
}, 5);
-
}
Concentriamoci sulla riga 16: alla transizione passiamo 4 argomenti:
- time: il tempo passato dall’inizio della transizione in secondi;
- init: la posizione iniziale ( costante );
- change: la differenza tra end ed init ( costante );
- duration: la durata dell’intera transizione in secondi.
Infine ecco un esempio funzionante: http://www.sitomega.com/expl/robertpenner.htm
In fin dei conti non è stato molto difficile… Come potete notare però questa è una funzioncina creata giusto come esempio e supporta solo animazioni di grandezze in pixel. Ora tocca a voi creare la prossima killer application!