Détail des effets d'animation Javascript (easeIn & Out, effet de rebond)

En voila une bonne idée que j'ai eu du coté de la gare de nancy,
voila, il est relativement simple de faire une petite animation en JS :


var timer=0,speed=5,b=0;
for(var i=0;i<100;i++){
setTimeout(function(){elt.style.marginTop=b+"px";b++},(timer*speed));
timer++;}


1) l'effet easeOut (effet de frein)
function easeOut(x){return (x-1)^2;}




var timer=0,speed=5,b=0;
for(var i=0;i<100;i++){
setTimeout(function(){
var y = easeOut(b/100)*100;
elt.style.marginTop=y+"px";
b++},(timer*speed));
timer++;}



2) l'effet easeIn (autrement dit une acceleration)
Ici j'aurais bien pus utiliser une fonction exponentiel, mais j'ai préférer utiliser une fonction carré (question de goût surement)
function easeOut(x){return (((x-1)^2)*(-1)+1);}




3) L'effet de rebond, on pred un peu des autres fonction, on en fait une association genre ' f°g ' et ça donne un jolis rebond à faire en Javascript

function rebond(x){var mil = 0.5;
if(xelse if(x>mil){var y = carre(3*x-(7/3))+(1/2)}return y;}



Enjoy !