MooTools - Opciones de FX

MooTools proporciona diferentes Fx.Options que ayudarán a Fx.Tween y Fx.Morph. Estas opciones le permitirán controlar los efectos.

Analicemos algunas opciones que ofrece MooTools. Antes de continuar, eche un vistazo a la siguiente sintaxis para configurar opciones.

Sintaxis

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

fps (fotogramas por segundo)

Esta opción determina el número de fotogramas por segundo en la animación mientras se transforma. Podemos aplicar estos fps a las funcionalidades Morph o Tween. Por defecto, el valor de fps es 50. Esto significa que cualquier funcionalidad tomará 50 fotogramas por segundo mientras se transforma.

Ejemplo

Tomemos un ejemplo en el que transformaremos un elemento div usando 5 fps. Eche un vistazo al siguiente código.

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

Recibirá el siguiente resultado:

Salida

Clickea en el STARTpara encontrar la animación morphing. Esto nos ayuda a observar el número de fotogramas utilizados para la animación. Use diferentes valores para fps para obtener la diferencia en la animación. Se recomienda utilizar un valor de fps inferior a 10. Esto le ayudará a obtener la diferencia fácilmente.

unidad

Esta opción se utiliza para configurar el tipo de unidad para los números. Generalmente, tenemos tres tipos diferentes de unidades: px,% y ems. Eche un vistazo a la siguiente sintaxis.

Sintaxis

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

La sintaxis anterior sirve para asignar porcentaje a unidades. Esto significa que todos los valores en números se tratan como porcentajes.

enlace

Esta opción proporciona una forma de administrar varias llamadas para iniciar una animación. Si aplica varias llamadas de eventos a la vez, estas llamadas se aceptarán como llamadas de enlace. Una vez que finaliza la primera llamada, la segunda se ejecuta automáticamente. Contiene las siguientes tres opciones:

ignore- Ésta es la opción predeterminada. Ignora cualquier número de llamadas hasta que completa el efecto.
cancel- Esto cancela el efecto actual, cuando se está realizando otro. Sigue la precedencia de llamadas más reciente.
Chain- Esto le permite encadenar los efectos y mantener la pila de llamadas. Ejecuta todas las llamadas hasta que pasa por todas las llamadas encadenadas en la pila.

Eche un vistazo a la siguiente sintaxis para usar la opción de enlace.

Sintaxis

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

Duración

Esta opción se utiliza para definir la duración de la animación. Por ejemplo, si desea que un objeto se mueva 100px en la duración de 1 segundo, entonces irá más lento que un objeto que se mueva 1000px en 1 segundo. Puede ingresar un número que se mide en milisegundos. O puede usar cualquiera de estas tres opciones en lugar de números.

Corto = 250ms
Normal = 500ms (predeterminado)
Largo = 1000ms

Eche un vistazo a la siguiente sintaxis para usar la duración.

Sintaxis

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

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

transición

Esta opción se utiliza para determinar el tipo de transición. Por ejemplo, si debe ser una transición suave o si debe comenzar lentamente, acelere hacia el final. Eche un vistazo a la siguiente sintaxis para aplicar la transición.

Sintaxis

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

La siguiente tabla describe los diferentes tipos de transiciones.

S.No.	Tipo de transición y descripción
1	Lineal Muestra una transición lineal con eventos de entrada, salida, entrada y salida
2	Patio Muestra una transición cuadrática con eventos de entrada, salida, entrada y salida
3	Cúbico Muestra una transición cubicular con eventos de entrada, salida, entrada y salida.
4	Cuarto de galón Muestra una transición cuartética con eventos de entrada, salida, entrada y salida.
5	Quinta Muestra una transición quíntica con eventos de entrada, salida, entrada y salida.
6	Pow Se utiliza para generar Quad, Cubic, Quart y Quint con eventos in, out, in-out
7	Expo Muestra una transición exponencial con eventos de entrada, salida, entrada y salida
8	Circ Muestra una transición circular con eventos de entrada, salida, entrada y salida.
9	Seno Muestra una transición sinusoidal con eventos de entrada, salida, entrada y salida
10	atrás Hace que la transición vaya hacia atrás y luego hacia adelante con eventos de entrada, salida y salida.
11	Rebotar Hace que la transición sea rebosante con eventos de entrada, salida, entrada y salida.
12	Elástico Transición de curva elástica con eventos de entrada, salida, entrada y salida

↰ Previous page Next page ↱