Un Tween est un effet de transition lors d'un changement de style sur un élément afin d'obtenir un effet visuel plus joli.

Imaginons cette div :

<div id="id_div" style="background-color:#6699FF">Ma div</div>

Nous pourrions très bien lui changer sa taille :

$("id_div").tween("width", "150");

Le changement de taille sera progressif. Visuellement c'est bien plus agréable. De même, le changement de couleur va passer par différents niveaux :

$("id_div").tween("background-color","#6E9D47");

Bien entendu la force des Tweens est plus grande que cela et je ne donne ici que quelques exemples :

//Opacité
$("id_div").fade("0.5");

//Sorte de flash temporaire
$("id_div").highlight("#888888");

//De... à...
$("id_div").tween("width", "150", "300");

Certains Tweens sont prédéfinis (fade, highlight...) mais vous pouvez créer vos propres outils. Pour cela nous utilisons une nouvelle instance de la classe Fx.Tween à laquelle nous passons en argument l'élément sur lequel sera appliqué le changement de style :

<div id="id_div" style="background-color:#6699FF">Ma div</div>
<input id="id_bouton" type="button" value="Changer le style">

var ma_div = $("id_div");
var mon_tween = new Fx.Tween(ma_div);

Une fois l'objet créé, nous devons encore le démarrer. C'est la méthode start :

$("id_bouton").addEvent("click", function(){
    mon_tween.start("width", "150");
});

On peut utiliser get et set pour paramétrer le Tween :

//Mettre la durée de transition à "long"
$("id_div").set('tween', {duration: "long"});

//Récupérer le Tween de l'élément et lui préciser certaines valeurs, puis démarrer la transition
$("id_div").get("tween", {property:"opacity", duration:"long"}).start(0);

On peut bien entendu effectuer plusieurs changements en même temps. Pour ce faire nous employons la classe Morph ou bien la méthode morph :

//Classe Morph:
var ma_div = $("id_div");
//Définitions d'effets: durée longue, méthode sinusoïdale
var mes_effets = new Fx.Morph(ma_div, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
  
//Changements de styles
mes_effets.start({
	'width': [150, 400],
	'background-color': "#6E9D47"
});
	
//Méthode morph:
ma_div.morph({height: 100, width: 150});

Il existe divers types de transitions : linéaire, quadratique, sinusoïdale, cubique...

Oui ! Vous pouvez lancer des évènements selon l'état des Tweens. Vous voulez faire quelque chose quand l'effet se lance ? C'est possible. Quand l'effet est annulé ? C'est également possible, etc.

//Lancer une alert au démarrage de l'animation
var mes_effets = new Fx.Morph(ma_div, {duration: 'long',
                                       link: 'cancel',
                                       onStart: function(){
                                                    alert("Ok");
                                                }
                                       }
                              );

Ici, nous avons utilisé l'évènement onStart qui se lance donc au démarrage. Vous pouvez définir la fonction que vous voulez lancer à ce moment-là. L'action est parallèle à l'animation. L'une n'attend pas l'autre. Outre le onStart, vous pouvez interagir lorsque l'animation est terminée (onComplete), annulée (onCancel) ou à la fin des animations chainées (onChainComplete).

On peut mettre en pause la transition d'un style vers un autre ou la stopper via les méthodes d'un objet de type Fx :

var mon_objet_fx = new Fx.Tween("mon élément");
var mes_effets_fx = new Fx.Morph("mon élément", {"mes effets"});

//Mettre en pause
mon_objet_fx.pause();
mes_effets_fx.pause();

//Redémarrer
mon_objet_fx.resume();
mes_effets_fx.resume();

//Stopper définitivement
mon_objet_fx.cancel();
mes_effets_fx.cancel();

Mais il existe une autre manière de gérer l'enchainement des effets. C'est avec l'attribut link de Morph qui peut enchainer des effets, annuler un effet si un autre est lancé ou bien interdire de lancer un effet tant que le premier n'est pas fini :

//Enchaine les effets
var mes_effets_fx = new Fx.Morph("mon élément", {link: 'chain'});

//Ignore l'effet car le précédent n'est pas terminé
var mes_effets_fx = new Fx.Morph("mon élément", {link: 'ignore'});

//Annule en cours l'effet et lance le nouveau
var mes_effets_fx = new Fx.Morph("mon élément", {link: 'cancel'});

[version 1.2.4 et 1.3]

Le problème de l'opacity est qu'elle est gérée de manière différente d'un navigateur à l'autre. Pour éviter d'avoir à penser à tous les cas et obtenir ceci :

.ma_class{
   filter:alpha(opacity=0);
   opacity:0;
   -moz-opacity:0;
}

MooTools propose la méthode fade. Elle accepte un paramètre qui détermine l'opacité voulue :

• in - équivant à 100% ;
• out - équivaut à 0% ;
• show - passe immédiatemment l'opacité à 100% ;
• hide - passe immédiatemment l'opacité à 0% ;
• toggle - si l'opacité est à 100%, elle passe à 0%. Si l'opacité est à 0% elle passe à 100% ;
• un nombre - un nombre décimal entre 0 et 1 permettant d'obtenir un pourcentage entre 0 et 100.

Cette méthode s'utilise ainsi :

$('id_element').fade('in');