MooTools - Options Fx.

MooTools fournit différentes Fx.Options qui aideront à Fx.Tween et Fx.Morph. Ces options vous donneront un contrôle sur les effets.

Laissez-nous discuter de quelques options fournies par MooTools. Avant de continuer, jetez un œil à la syntaxe suivante pour configurer les options.

Syntaxe

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (images par seconde)

Cette option détermine le nombre d'images par seconde dans l'animation pendant le morphing. Nous pouvons appliquer ces fps aux fonctionnalités Morph ou Tween. Par défaut, la valeur de fps est 50. Cela signifie que toute fonctionnalité prendra 50 images par seconde lors du morphing.

Exemple

Prenons un exemple dans lequel, nous allons transformer un élément div en utilisant 5 fps. Jetez un œil au code suivant.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Production

Clique sur le STARTbouton pour trouver l'animation de morphing. Cela nous aide à observer le nombre d'images utilisées pour l'animation. Utilisez des valeurs différentes de fps pour obtenir la différence d'animation. Il est recommandé d'utiliser une valeur fps inférieure à 10. Cela vous aidera à faire la différence facilement.

unité

Cette option est utilisée pour définir le type d'unité pour les nombres. Généralement, nous avons trois types d'unités différents: px,% et ems. Jetez un œil à la syntaxe suivante.

Syntaxe

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

La syntaxe ci-dessus consiste à attribuer un pourcentage aux unités. Cela signifie que toutes les valeurs en nombres sont traitées comme des pourcentages.

lien

Cette option permet de gérer plusieurs appels pour démarrer une animation. Si vous appliquez plusieurs appels d'événements à la fois, ces appels seront pris en tant qu'appels de liaison. Une fois le premier appel terminé, le deuxième appel s'exécute automatiquement. Il contient les trois options suivantes -

  • ignore- C'est l'option par défaut. Il ignore n'importe quel nombre d'appels jusqu'à ce qu'il termine l'effet.

  • cancel- Ceci annule l'effet actuel, quand il y en a un autre en cours de création. Il suit la dernière priorité des appels.

  • Chain- Cela vous permet d'enchaîner les effets et de maintenir la pile d'appels. Il exécute tous les appels jusqu'à ce qu'il passe par tous les appels chaînés de la pile.

Jetez un œil à la syntaxe suivante pour utiliser l'option de lien.

Syntaxe

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

Durée

Cette option permet de définir la durée de l'animation. Par exemple, si vous souhaitez qu'un objet se déplace de 100 pixels en 1 seconde, il ira plus lentement qu'un objet se déplaçant de 1 000 pixels en 1 seconde. Vous pouvez saisir un nombre mesuré en millisecondes. Ou vous pouvez utiliser l'une de ces trois options à la place des nombres.

  • Court = 250 ms
  • Normal = 500 ms (par défaut)
  • Long = 1000 ms

Jetez un œil à la syntaxe suivante pour utiliser la durée.

Syntaxe

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Ou,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

transition

Cette option est utilisée pour déterminer le type de transition. Par exemple, si la transition doit être douce ou si elle doit commencer lentement, accélérez vers la fin. Jetez un œil à la syntaxe suivante pour appliquer la transition.

Syntaxe

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

Le tableau suivant décrit les différents types de transitions.

S.No. Type de transition et description
1

Linéaire

Affiche une transition linéaire avec des événements d'entrée, de sortie, d'entrée-sortie
2

Quad

Affiche une transition quadratique avec des événements d'entrée, de sortie, d'entrée-sortie
3

Cubique

Affiche une transition cubiculaire avec des événements in, out, in-out
4

Litre

Affiche une transition quartétique avec des événements d'entrée, de sortie, d'entrée-sortie
5

Quint

Affiche une transition quintique avec des événements in, out, in-out
6

Pow

Utilisé pour générer des événements Quad, Cubic, Quart et Quint avec des événements in, out, in-out
sept

Expo

Affiche une transition exponentielle avec des événements in, out, in-out
8

Circ

Affiche une transition circulaire avec des événements d'entrée, de sortie, d'entrée-sortie
9

Sinus

Affiche une transition sinusoïdale avec des événements in, out, in-out
dix

Retour

Rend la transition en arrière, puis tout en avant avec des événements in, out, in-out
11

Rebondir

Rend la transition dynamique avec des événements in, out, in-out
12

Élastique

Transition de courbe élastique avec événements in, out, in-out