af
Permet de réaliser une animation complexe (transitions de couleur, mouvement circulaire, etc.)
af peut prendre entre 1 et 3 paramètre, le premier est une fonction exécutée à chaque pas de l'animation et à laquelle une valeur comprise entre 0 et 1 (correspondant au ratio de la durée écoulée depuis le début de l'animation sur sa durée total) est passée en paramètre.
Le second paramètre permet de préciser une durée d'animation ou une durée et un indice d'accélération.
Le dernier paramètre permet d'exécuter du code à la fin de l'animation.
Mouvement circulaire :
$('div').af(function (t){
var x=Math.round(50*Math.sin(t*2*Math.PI));
var y=Math.round(50*Math.cos(t*2*Math.PI));
$(this).css('left:'+x+'px; top:'+y+'px');
},2000,function (){
var couleur='red';
if($(this).css('background-color')=='red')
couleur='yellow';
$(this).css('background:'+couleur);
});
Transition de couleur (jaune > rouge > violet) :
$('div').af(function (t){
var r,v,b;
// De 0 à 0.5 : jaune > rouge
if(t<0.5)
{
r=255;
v=Math.round(255*(1-t*2));
b=0;
}
// De 0.5 à 1 : rouge > violet
else
{
r=255;
v=0;
b=Math.round(255*(t*2-1));
}
$(this).css('background:rgb('+r+', '+v+', '+b+')');
},2000);