IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ MooToolsConsultez toutes les FAQ

Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 1 décembre 2012 

 
OuvrirSommaireLes formulaires HTML et autres objetsLes formulairesLes effets visuels

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 :

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

Nous pourrions très bien lui changer sa taille :

 
Sélectionnez
$("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 :

 
Sélectionnez
$("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 :

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

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

//De... à...
$("id_div").tween("width", "150", "300");
Créé le 2010-12-31  par vermine

Lien : Exemple

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 :

 
Sélectionnez
<div id="id_div" style="background-color:#6699FF">Ma div</div>
<input id="id_bouton" type="button" value="Changer le style">
 
Sélectionnez
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 :

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


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

 
Sélectionnez
//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 :

 
Sélectionnez
//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...

Créé le 2010-12-31  par vermine

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.

 
Sélectionnez
//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).

Créé le 2010-12-31  par vermine

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 :

 
Sélectionnez
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 :

 
Sélectionnez
//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'});
Créé le 2010-12-31  par vermine

[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 :

 
Sélectionnez
.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 :

 
Sélectionnez
$('id_element').fade('in');
Créé le 2011-03-03  par vermine

Lien : Page de test

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.