MooTools - Fx.Tween

MooTools proporciona diferentes accesos directos FX.Tween para diferentes transiciones, como efectos llamativos que se traducen en transiciones animadas suaves. Analicemos algunos métodos de los atajos de Tween.

interpolación ()

Este método proporciona transiciones suaves entre dos valores de propiedad de estilo. Tomemos un ejemplo que usa el método de interpolación para cambiar el ancho de un div de 100px a 300px. Eche un vistazo al siguiente código.

Ejemplo

<!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>

Recibirá el siguiente resultado:

Salida

desvanecerse()

Este método ajusta la opacidad o la transparencia del elemento. Tomemos un ejemplo en el que proporcionamos un botón para ajustar la opacidad de un div usando MooTools. Eche un vistazo al siguiente código.

Ejemplo

<!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>

Recibirá el siguiente resultado:

Salida

Clickea en el fade to 50% button para reducir la opacidad div al 50%.

realce()

Este método resalta un elemento con diferentes colores de fondo. Contiene dos funcionalidades principales del Tween Flash.

En la primera funcionalidad, Tween Flash se utiliza para aplicar diferentes colores de fondo a los elementos.
Una vez que Tween Flash establece un color de fondo diferente, cambia a otro color de fondo.

Este método se utiliza para resaltar un elemento después de la selección. Tomemos un ejemplo para entender este método. Eche un vistazo al siguiente código.

Ejemplo

<!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>

Recibirá el siguiente resultado:

Salida

Intente mantener el puntero del mouse en los divs de colores y observe los cambios en los reflejos de flash.

↰ Previous page Next page ↱