MooTools - Fx.Tween

MooTools fournit différents raccourcis FX.Tween pour différentes transitions telles que des effets flashy qui se traduisent par des transitions animées fluides. Laissez-nous discuter de quelques méthodes des raccourcis Tween.

interpolation ()

Cette méthode fournit des transitions fluides entre deux valeurs de propriété de style. Prenons un exemple qui utilise la méthode tween pour changer la largeur d'un div de 100px à 300px. Jetez un œil au code suivant.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            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 tweenFunction = function(){
            $('body_div').tween('width','300px');
         }
         
         window.addEvent('domready', function() {
            $('tween_button').addEvent('click', tweenFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Production

fondu ()

Cette méthode ajuste l'opacité de l'élément ou la transparence. Prenons un exemple dans lequel, nous fournissons un bouton pour ajuster l'opacité d'un div à l'aide de MooTools. Jetez un œil au code suivant.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            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 fadeFunction = function(){
            $('body_div').fade('.5');
         }
         
         window.addEvent('domready', function() {
            $('fade_button').addEvent('click', fadeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "fade_button" value = "fade to 50%"/>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Production

Clique sur le fade to 50% button pour réduire l'opacité div à 50%.

surligner()

Cette méthode met en évidence un élément en utilisant différentes couleurs d'arrière-plan. Il contient deux fonctionnalités principales du Tween Flash.

Dans la première fonctionnalité, Tween Flash est utilisé pour appliquer différentes couleurs d'arrière-plan aux éléments.
Une fois que Tween Flash a défini une couleur d'arrière-plan différente, il passe à une autre couleur d'arrière-plan.

Cette méthode est utilisée pour mettre en évidence un élément après la sélection. Prenons un exemple pour comprendre cette méthode. Jetez un œil au code suivant.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <style>
         #div1 {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: #145A32;
            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 highlightFunction = function(){
            $('div1').highlight('#eaea16');
         }
         
         var highlightChangeFunction = function(){
            $('div2').highlight('#eaea16', '#FBFCFC');
         }
         
         window.addEvent('domready', function() {
            $('div1').addEvent('mouseover', highlightFunction);
            $('div2').addEvent('mouseover', highlightChangeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "div1"> </div><br/>
      <div id = "div2"> </div>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Production

Essayez de garder le pointeur de la souris sur les divs colorés et observez les changements dans les hautes lumières du flash.