MooTools - Fx.Options

A MooTools oferece diferentes opções Fx que ajudarão a Fx.Tween e Fx.Morph. Essas opções darão a você um controle sobre os efeitos.

Vamos discutir algumas opções que a MooTools oferece. Antes de continuar, dê uma olhada na sintaxe a seguir para configurar opções.

Sintaxe

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

fps (quadros por segundo)

Esta opção determina o número de quadros por segundo na animação durante a transformação. Podemos aplicar esses fps às funcionalidades Morph ou Tween. Por padrão, o valor de fps é 50. Isso significa que qualquer funcionalidade levará 50 quadros por segundo durante a transformação.

Exemplo

Vamos dar um exemplo em que iremos transformar um elemento div usando 5 fps. Dê uma olhada no código a seguir.

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

Você receberá a seguinte saída -

Resultado

Clique no STARTbotão para encontrar a animação de metamorfose. Isso nos ajuda a observar o número de quadros usados para animação. Use valores diferentes para fps para obter a diferença na animação. Recomenda-se usar o valor fps menor que 10. Isso o ajudará a obter a diferença facilmente.

unidade

Esta opção é usada para definir o tipo de unidade para números. Geralmente, temos três tipos diferentes de unidades - px,% e ems. Dê uma olhada na seguinte sintaxe.

Sintaxe

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

A sintaxe acima é alocar porcentagem para unidades. Isso significa que todos os valores em números são tratados como porcentagens.

ligação

Esta opção fornece uma maneira de gerenciar várias chamadas para iniciar uma animação. Se você aplicar várias chamadas de evento ao mesmo tempo, essas chamadas serão recebidas como chamadas de link. Assim que a primeira chamada termina, a segunda chamada é executada automaticamente. Ele contém as três opções a seguir -

ignore- Esta é a opção padrão. Ele ignora qualquer número de chamadas até completar o efeito.
cancel- Isso cancela o efeito atual, quando houver outro sendo feito. Ele segue a precedência de chamada mais recente.
Chain- Isso permite encadear os efeitos juntos e manter a pilha de chamadas. Ele executa todas as chamadas até passar por todas as chamadas encadeadas na pilha.

Dê uma olhada na sintaxe a seguir para usar a opção de link.

Sintaxe

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

Duração

Esta opção é usada para definir a duração da animação. Por exemplo, se você deseja que um objeto se mova 100 px na duração de 1 segundo, ele irá mais devagar do que um objeto que se move 1000 px em 1 segundo. Você pode inserir um número que é medido em milissegundos. Ou você pode usar qualquer uma dessas três opções no lugar dos números.

Curto = 250ms
Normal = 500ms (padrão)
Long = 1000ms

Dê uma olhada na seguinte sintaxe para usar a duração.

Sintaxe

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

Ou,

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

transição

Esta opção é usada para determinar o tipo de transição. Por exemplo, se deve ser uma transição suave ou se deve começar devagar, então acelere no final. Dê uma olhada na seguinte sintaxe para aplicar a transição.

Sintaxe

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

A tabela a seguir descreve os diferentes tipos de transições.

S.No.	Tipo de transição e descrição
1	Linear Exibe uma transição linear com eventos de entrada, saída, entrada e saída
2	Quad Exibe uma transição quadrática com eventos de entrada, saída, entrada e saída
3	Cúbico Exibe uma transição cubicular com eventos de entrada, saída, entrada e saída
4	Quart Exibe uma transição quartética com eventos de entrada, saída, entrada e saída
5	Quint Exibe uma transição quântica com eventos de entrada, saída, entrada e saída
6	Pancada Usado para gerar Quad, Cubic, Quart e Quint com eventos de entrada, saída, entrada e saída
7	Expo Exibe uma transição exponencial com eventos de entrada, saída, entrada e saída
8	Circ Exibe uma transição circular com eventos de entrada, saída, entrada e saída
9	Seno Exibe uma transição senoidal com eventos de entrada, saída, entrada e saída
10	De volta Faz a transição voltar, depois avançar com eventos de entrada, saída, entrada e saída
11	Pulo Torna a transição saltitante com eventos de entrada, saída, entrada e saída
12	Elástico Transição de curva elástica com eventos de entrada, saída, entrada e saída