Mootools en 30 jours : jour 11 - Fx.Morph

I. Introduction à Fx.Morph avec Mootools 1.2

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédent de notre série de 30 jours.

Aujourd'hui, nous allons continuer à explorer la section Fx de la librairie. Tout d'abord, nous apprendrons comment utiliser Fx.Morph (qui permet principalement de faire un tween sur plusieurs propriétés de style), puis nous allons regarder quelques unes des options Fx qui s'appliquent à Fx.Tween et Fx.Morph, et enfin nous verrons comment utiliser les évènements Fx comme “onComplete” et “onStart.” Avec ces options et évènements, nous aurons plus de contrôle sur les transitions animées.

II. Explications

Fx.Morph

Créer un nouveau Fx.Morph

La création d'un nouveau "morph" ressemble beaucoup à celle d'un nouveau "tween", sauf qu'il faut prendre en compte plusieurs propriétés de style.

//avant tout, plaçons notre élément dans une variable
var morphElement = $('morph_element');
 
//puis, nous créons notre morph
var morphObject = new Fx.Morph(morphElement);
 
//nous pouvons alors définir les propriétés de style
//comme avec Fx.Tween

//sauf que nous pouvons placer plusieurs propriétés ici
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
 
//nous pouvons aussi lancer notre morph comme pour un tween
//sauf que nous pouvons placer plusieurs propriétés ici
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});

Et c'est tout ce qu'il faut créer, pour définir et lancer un morph.

Pour faire ça bien, il faudrait créer nos variables, séparer nos fonctions et créer quelques évènements pour contrôler tout ça :

var morphSet = function(){
//nous pouvons définir les propriétés de style comme Fx.Tween
//sauf que nous pouvons placer plusieurs propriétés ici
this.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
 
var morphStart = function(){
//nous pouvons aussi commencer un morph comme un tween
//sauf que nous pouvons entrer plusieurs propriétés de style
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
 
 
var morphReset = function(){
//définition des valeurs d'origine
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
 
window.addEvent('domready', function() {
//d'abord, commençons par mettre notre élément dans une variable
var morphElement = $('morph_element');
 
//puis créons notre morph
var morphObject = new Fx.Morph(morphElement);
 
//ici nous ajoutons l'évènement click aux boutons
//et nous faisons un bind de morphObject et la fonction
//pour pouvoir utiliser le "this" plus haut
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});



 





Les options Fx

Les options suivantes sont acceptées par Fx.Tween et Fx.Morph. Elles sont simples à implémenter et vous donne beaucoup de contrôle sur vos effets. Pour définir ces options, utilisez la syntaxe suivante :

//définissez votre tween ou morph
//puis définissez vos options entre les { }
var morphObject = new Fx.Morph(morphElement, {
//en premier il s'agit du nom de l'option
//placez un :
//puis mettez la valeur de votre option
duration: 'long',
transition: 'sine:in'
});

fps (frames par seconde)

Cette option détermine le nombre de frames par seconde d'une animation. Par défaut c'est 50, et cela acceptera des nombres et variables qui contiennent des nombres.

//définissez votre tween ou morph
//puis définissez votre options entre les { }
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
 
//ou
var framesPerSecond = 60;
 
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});

unit

Cette option définit le nombre d'unités. Par exemple, voulez-vous que ‘100′ signifie px, % ou ems?

//définissez votre tween ou morph
//puis définissez vos options entre les { }
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});

link

Link vous apporte un moyen de gérer les appels multiples pour démarrer un effet. Par exemple, si vous avez un effet sur mouseover, voulez-vous qu'il démarre à chaque fois que l'utilisateur passe sur l'élément ? Ou, si une personne va deux fois sur l'objet, faut-il ignorer les 2ème appel ou faut-il le mettre à la suite et recommencer une deuxième fois quand la première est terminée? Link a trois paramètres :

  • ‘ignore’ (par défaut) - ignore tous les appels à démarrer jusqu'à ce que l'effet soit terminé
  • ‘cancel’ - annulera l'effet en cours si un autre appel est réalisé, donnant l'avantage au nouvel appel
  • ‘chain’ - vous permet de mettre bout à bout les effets, de les placer sur une file d'attente et de les exécuter quand c'est leurs tours.
//définissez votre tween ou morph
//puis définissez vos options entre les { }
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});

duration

Duration vous permet de définir la durée de l'animation. La durée n'est pas la même chose que la vitesse, donc si vous voulez faire bouger un objet de 100px pendant 1 seconde, cela ira moins vite qu'un objet qui bouge de 1000px en 1 seconde. Vous pouvez entrer un nombre (exprimé en millisecondes), une variable qui contient un nombre, ou un de ces trois raccourcis :

  • ’short’ = 250ms
  • ‘normal’ = 500ms (par défaut)
  • ‘long’ = 1000ms
//définissez votre tween ou morph
//puis placez vos options entre les { }
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
 
//ou
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});

transition

La dernière option, transition, vous donne la possibilité de déterminer le type de transition. Par exemple, est-ce que cela doit être une transition en douceur ou cela doit-il démarrer doucement puis s'accélérer vers la fin. Voyez plutôt les exemples de transitions disponibles avec le noyau de la librairie Mootools :

var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});

Note: la première barre de transition lance un clignotement rouge au démarrage puis un clignotement orange à la fin. Regardez comment utiliser les évènements Fx plus bas.

‘quad:in’
‘quad:out’
‘quad:in:out’
‘cubic:in’
‘cubic:out’
‘cubic:in:out’
‘quart:in’
‘quart:out’
‘quart:in:out’
‘quint:in’
‘quint:out’
‘quint:in:out’
‘expo:in’
‘expo:out’
‘expo:in:out’
‘circ:in’
‘circ:out’
‘circ:in:out’
’sine:in’
’sine:out’
’sine:in:out’
‘back:in’
‘back:out’
‘back:in:out’
‘bounce:in’
‘bounce:out’
‘bounce:in:out’
‘elastic:in’
‘elastic:out’
‘elastic:in:out’

Les 30 types de transitions ci-dessus se décompose en 10 catégories :

  • Quad
  • Cubic
  • Quart
  • Quint
  • Expo
  • Circ
  • Sine
  • Back
  • Bounce
  • Elastic

Chaque catégorie possède trois options:

  • Ease In
  • Ease Out
  • Ease In Out

Evènements Fx

L'évènement Fx vous donne l'opportunité de lancer du code à différents endroits pendant l'effet d'animation. Cela peut être très pratique pour créer un retour utilisateur et vous donne un autre niveau de contrôle sur vos tweens et morphs:

  • onStart - se lancera quand Fx démarre
  • onCancel - se lancera quand Fx est annulé
  • onComplete - se lancera quand le Fx est terminé
  • onChainComplete - se lancera quand les Fx en chaîne sont terminés

Lors de la construction d'un tween ou un morph, vous pouvez définir un de ces évènements comme vous le feriez avec une option, sauf que ça ne prend pas une valeur, mais une fonction :

//d'abord passons le nouveau Fx.Tween dans une variable
//puis définissons l'élément qui va subir un tween
quadIn = new Fx.Tween(quadIn, {
//quelques options ici
link: 'cancel',
transition: ‘quad:in,
 
//voici un évènement
onStart: function(passes_tween_element){
//cet évènement passsera l'objet tween
//ici nous appliquons l'effet "highlight"
//quand l'animation démarre
passes_tween_element.highlight('#C54641');
},
 
//remarquez que les virgules sont toujours présentes
//entre chaque option et évènement
//mais PAS DE VIRGULE APRES LE DERNIER évènement ou option
onComplete: function(passes_tween_element){
//ici nous appliquons un effet highlight sur la fin
passes_tween_element.highlight('#C54641');
}
});

Exemple

Pour générer le code de la transition ci-dessus, nous pouvons réutiliser nos fonctions d'une manière différente de ce que nous avons vu jusqu'à présent. Tous les éléments de transition ci-dessus utilisent deux fonctions, une pour un effet sur mouse enter (souris qui entre) et un quand la souris quitte (mouse leave):

 
//voici la fonction à utiliser sur mouse enter,
//change la largeur en 700px

var enterFunction = function() {
this.start('width', '700px');
}
 
//voici la fonction à utiliser sur mouse leave,
//remet la largeur sur 300px

var leaveFunction = function() {
this.start('width', '300px');
}
 
window.addEvent('domready', function() {
//ici nous créons des éléments dans des variables
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
 
//puis nous créons trois éléments tween,
//une pour chaque variabe ci-dessus

quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
 
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
 
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
 
//puis nous ajoutons les évènements mouse enter et mouse leave
//remarquez l'utilisation de .addEvents
//cela fonctionne comme .addEvent
//sauf que vous pouvez ajouter plusieurs évènements
$('quadin').addEvents({
//En premier, vous définissez les types d'évènements,
//placez le type d'évènement entre 'quotes'

//puis placez un :
//enfin placez la fonction
//dans ce cas, c'est une fonction reliée au tween
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
 
$('quadout').addEvents({
//remarquez comment nous utilisons les mêmes fonctions ici
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
 
$('quadinout').addEvents({
//nous utilisons encore les mêmes fonctions ici
//mais chaque fois elles s'appliquent sur un évènement
//d'un évènement différent

//et sont reliées à un effet tween différent
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});

III. Conclusion du tutorial

Pour en savoir plus…

Vous pouvez avoir encore plus de contrôle sur vos effets avec les outils de la librairie Fx. Lisez la rubrique Fx dans les docs, tout comme tween, morph et transitions

Télécharger un zip avec tout ce qu'il vous faut pour débuter

Il inclut les exemples intéractifs de cette page, le noyau Mootools 1.2, un fichier javascript externe, un fichier css externe et un fichier html simple.

Tutoriel Mootools 1.2 de demain

Jour 12 - Glisser et déposer avec Drag.Move