MooTools - Fx.Tween

MooTools fornece diferentes atalhos FX.Tween para diferentes transições, como efeitos chamativos que se traduzem em transições animadas suaves. Vamos discutir alguns métodos dos atalhos do Tween.

tween ()

Este método fornece transições suaves entre dois valores de propriedade de estilo. Vejamos um exemplo que usa o método de interpolação para alterar a largura de um div de 100 px para 300 px. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado

desvaneça()

Este método ajusta a opacidade do elemento ou a transparência. Vamos dar um exemplo em que fornecemos um botão para ajustar a opacidade de uma div usando MooTools. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado

Clique no fade to 50% button para reduzir a opacidade div para 50%.

realçar()

Este método destaca um elemento usando cores de fundo diferentes. Ele contém duas funcionalidades principais do Tween Flash.

Na primeira funcionalidade, Tween Flash é usado para aplicar cores de fundo diferentes aos elementos.
Depois que o Tween Flash define uma cor de fundo diferente, ele muda para outra cor de fundo.

Este método é usado para destacar um elemento após a seleção. Vamos dar um exemplo para entender esse método. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado

Tente manter o ponteiro do mouse nos divs coloridos e observe as mudanças nos destaques do flash.