Mootools en 30 jours : jour 10 - Fx.Tween

I. Introduction aux effets Tween

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

Bienvenue dans le Jour 10 des 30 Jours de Tutoriels Mootools, aujourd'hui nous allons étudier la Fx.Tween. Comme toutes les autres fonctions Mootools que nous avons vues, celles-ci sont simples à utiliser, mais vous donner de grandes possibilités. Tween vous permet d'ajouter ces effets “flashy” très sympas que l'on voit sur certains sites - traduisez par transitions animées qui améliorent la convivialité de votre site web pour les utilisateurs.

II. Explications

Raccourcis Tween

Nous commençons souvent avec “les bases,” mais Mootools 1.2 fournit tellement des raccourcis fantastiques pour tween et ils sont tellement faciles à utiliser que je ne peux pas résister à l'idée de commencer directement ici.

.tween();

Un tween est une transition douce entre deux valeurs d'une propriété de style. Par exemple, avec tween vous pouvez faire une transition en douceur d'un div de “width: 100px” vers “width: 300px.”

//créé une nouvelle fonction
var tweenerFunction = function() {
//sélectionnez l'élement sur lequel vous allez faire un tween
//puis appelez .tween
//enfin déclarez la propriété de style et la valeur à changer
$('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
//ici nous pouvons ajouter un évènement à un bouton pour
//lancer le tween sur un click et appelez notre fonction
$('tween_button').addEvent('click', tweenerFunction);
});

Notre html pour le code ci-dessus ressemblera à ça :


.fade();

Cette fonction vous permet d'ajuster l'opacité d'éléments en douceur. La configuration ressemble beaucoup à l'exemple précédent :

//créez une nouvelle fonction
var tweenFadeFifty = function() {
//créez votre sélecteur ici
//puis ajoutez .fade
//enfin déclarez une valeur entre 0 et 1
//(0 est invisible, 1 est visible entièrement)
$('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
//ici nous ajouton un évènement à un bouton pour
//lancer le Tween au click et appelons notre fonction
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

.highlight();

Highlight est un raccourci tween très ciblé (et très utile) qui fournit deux fonctions :

  1. Utilisez le pour faire un tween flash sur une couleur de fond différente
  2. Met immédiatement une couleur de fond différente, puis fait un tween flash sur une autre couleur de fond

Ils sont très utiles pour créer des commentaires utilisateurs. Par exemple, vous pouvez flasher un élément quand quelque chose est sélectionné, ou changer une couleur puis flasher quand il a été sauvegardé et fermé. Il y a des tonnes d'options et c'est très simple à utiliser. Pour cet exemple, créons deux divs et attachons les deux types de surbrillance :

//création d'une fonction
var tweenHighlight = function(event) {
//ici nous utilisons event.target, passé à la fonction
//cela se traduit par "la cible de l'évènement"
//et comme l'effet s'applique au même élément
//que celui attaché à l'évènement
//nous n'avons pas besoin de créer un autre sélecteur
//Note: addEvent passera automatiquement l'objet évènement
//en paramètre à la fonction qu'il appelle... très pratique
event.target.highlight('#eaea16');
}
 
//création d'une fonction
//vous devez passer un paramètre
//puisque la fonction est appelée dans un évènement
//la fonction passera automatiquement l'évènement objet
//et vous pourrez alors faire référence à l'élément avec .target
//(la cible de l'évènement)
var tweenHighlightChange = function(item) {
//ici au lieu d'une seule couleur, nous ajoutons une seconde
//en séparant avec une virgule
//cela mettra la 1ère couleur, et fera une transition vers la 2ème
item.target.highlight('#eaea16', '#333333');
}
 
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});



Exemples de raccourcis

Voici un exemple de quelques raccourcis pour les effets. Essayez de jouer avec les boutons dans des ordres différents et remarquez les comportements :

var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
 
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
 
//.fade acceptera aussi 'out' et 'in', égaux à 0 et 1 respectivement
var tweenFadeOut = function() {
$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {
$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {
event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});






#tweener {
height: 100px
width: 100px
background-color: #3399CC
}

Passez la souris pour voir la surbrillance de type 1

 







Plus sur les Tweens

Créer un nouveau tween

Si vous voulez plus de flexibilité et contrôle sur vos effets tween, vous voudrez certainement créer un nouveau tween au lieu d'utiliser les raccourcis. Remarquez l'utilisation de  “new” pour créer une nouvelle instance de Fx.Tween:

window.addEvent('domready', function() {
//avant tout nous passons l'élément dans une variable
var newTweenElement = $('newTween');
 
//puis nous créons un nouvel évènement tween,
//et passons cet élément en paramètre

var newTween = new Fx.Tween(newTweenElement);
});


 

Configurer des styles avec tween

Quand vous créez un nouveau tween sur un élément, vous pouvez facilement mettre une propriété de style avec .set();. Cela fonctionne instantanément et fonctionne comme .setStyle();

var newTweenSet = function() {
//remarquez l'utilisation de "this"
//lisez la suite pour savoir comment "this" est utilisé
this.set('width', '300px');
}

Comme nous l'avons appris avant, nous voulons séparer nos fonctions de l'évènement domready, mais dans ce cas nous allons créer un tween à l'intérieur du domready, puis y faire référence à l'extérieur. Nous avons déjà couvert une façon de passer des paramètres à l'extérieur du domready (en créant une fonction anonyme et en passant un paramètre) et aujourd'hui nous allons apprendre une meilleure méthode Moo pour passer l'objet tween (ce n'est pas pour dire qu'une fonction anonyme n'est jamais la plus appropriée).

.bind();

Avec .bind();, nous pouvons faire un paramètre égal à “this” aux yeux d'une fonction donnée :

//d'abord nous ajoutons un évènement click sur le bouton
//puis, au lieu d'appeler simplement la fonction
//on appelle la fonction et ajoute ".bind()"
//et nous plaçons ce que nous voulons passer à la fonction
//maintenant, à l'intérieur de la fonction "newTweenSet,"
//"this" fera référence à "newTween"

$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

Donc si nous regardons à la fonction ci-dessous, “this” est maintenant équivalent à “newTween” (qui est notre objet tween).

 

Mettons tout cela ensemble :

//voici notre fonction
var newTweenSet = function() {
//comme nous utilisons bind, "this" fait référence à "newTween"
//donc nous pouvons écrire
//newTween.set('width', '300px')
this.set('width', '300px');
}
 
window.addEvent('domready', function() {
//en premier plaçons notre élément dans une variable
var newTweenElement = $('newTween');
 
//puis créons un nouveau FX.Tween et assignons le à sa propre variable
var newTween = new Fx.Tween(newTweenElement);
 
//puis ajoutons notre évènement et relions newTween et newTweenSet
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});

Commencer un effet tween

Maintenant que nous avons notre objet tween configuré, que notre fonction est en dehors du domready et que nous avons appris comment mettre en place un paramètre de style avec .set(); , regardons de plus près le "tweening". Commencer un effet tween est très simple et ressemble à .fade();, il y a deux manières d'utiliser .start();

  1. Faire un Tween sur une valeur de propriété de la valeur existente vers une autre
  2. Configurer une valeur de propriété, puis faire un tween vers une autre
//cela fera un tween de la vauer existente vers 300px
newTween.start('width', '300px');
 
//cela mettra la valeur de width sur 100px, puis tween vers 300px
newTween.start('width', '100px', '300px');

Maintenant, vous pouvez démarrer avec .start(); un tween à l'intérieur d'une fonction et utiliser ‘this’ après avoir fait un .bind() de la fonction avec “newTween.”

C'est tout sur les tweens pour le moment...

Malgré tout, il reste beaucoup de choses dont nous pourrions parler concernant les effets tween. Par exemple, si vous voulez  faire un “tween” sur plusieurs propriétés de style en même temps, vous pouvez utiliser .morph();. Et vous pouvez utiliser la librairie des transitions pour changer, euh, la transition. Mais ce tutoriel est déjà assez long, donc nous laisserons ça pour un autre jour.

III. Conclusion du tutorial

Pour en savoir plus…

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

Il inclut le noyau Mootools 1.2, les exemples ci-dessus, un fichier javascript externe, une page html simple et un fichier css.

Comme toujoours, votre meilleur ami est la doc de Mootools 1.2

Tutoriel de demain

Nous continuerons à étudier la librairie Fx, et notamment les morph, les options Fx et évènements.