comparte el articulo 

Manejo de Efectos con MooTools

Actualizado el 29/05/2012 < > 0 Comentarios

Resumen: En este artículo exponemos varias maneras de utilizar efectos respetado la filosofía de MooTools. Explicamos las opciones, eventos y métodos que poseen los efectos.

Los efectos de animación son una de las principales razones por las que miles de diseñadores web utilizan los frameworks de JavaScript como herramienta de apoyo al momento de llevar a cabo sus desarrollos.

Lejos de interesarse por un mejor estructuración o por facilitar la comunicación con el servidor para el envío y recibimiento de información, para la mayoría de los usuarios estas animaciones siguen siendo la característica más llamativa de los frameworks.

Es de reconocer, que MooTools tiene un gran apartado de animaciones y se encuentra muy bien posicionado en este aspecto, ya que sus efectos se caracterizan por llevar las transiciones de manera sutil y con los tiempos adecuados. En este artículo mostraremos varias maneras de utilizar los efectos respetado la filosofía que trata de transmitir MooTools.

El origen de los efectos en Mootools

Cómo ya habíamos planteado en artículos anteriores MooTools es un framework que esta basado en una estructura modular, la cual nos permite utilizar las características del modelo de herencia de prototipos con el que cuenta JavaScript. Este modelo de herencia es el que nos llevará a identificar el origen de los efectos que utilizaremos.

Todos los efectos MooTools heredan la misma estructura, si analizamos a detalle algunos ejemplos de uso de la librería, observaremos que al momento de llamar varios efectos de esta, las propiedades que se transmiten son exactamente las mismas y lo único que varia son los valores.

Si por ejemplo quisiéramos realizar una transición muy sencilla para mostrar contenido en nuestra página, podemos optar por utilizar el efecto “Fx.Morph”, el cual nos permite animar nuestro contenido aplicando múltiples propiedades CSS a la vez, el código de declaración de la instancia luciría así:

    var morph = new Fx.Morph('elemento',{
        transition: 'quart:out',
        duration: 500,
        link: 'chain',
        onStart: function(){
            message.set('html','Empieza transicion').highlight();
        },
        onComplete: function(){
            message.set('html','Termina transicion').highlight();
        }
    });

Y la función a llamar esa instancia luciría así:

    var efecto_morph = function(){
        morph.start({
            'background-color': 'steelblue',
            'border-color': '#ccc',
        });
    };

Finalmente la función “efecto_morph” será llamada desde el evento que queramos nosotros, ya sea al dar clic en un link, en un botón o pasar el mouse sobre algún elemento.

Lo que debemos observar y resaltar aquí, es que las propiedades que utilizamos para crear la instancia son exactamente las mismas que utilizamos en el artículo anterio, cuando definimos el efecto Tweenr.

Esto se debe a que todos los efectos de MooTools tienen un origen en común, y este origen es la clase Fx, de la cual todos heredan sus métodos, propiedades, opciones y eventos.

Por lo que si quisiéramos definir otra transición para el mismo contenido, quizás un “Fx.Scroll” que permita desplazar la vista principal del navegador hacia arriba o hacia abajo, tendríamos que hacer prácticamente lo mismo:

    var scroll = new Fx.Scroll('elemento',{
        transition: 'elastic:out',
        duration: 2000,
        link: 'cancel',
        onStart: function(){
            message.set('html','Empieza scroll').highlight();
        },
        onComplete: function(){
            message.set('html','Termina scroll').highlight();
        }
    });

Opciones, eventos y métodos de los efectos de MooTools

Al crear una instancia de la clase Fx heredamos sus propiedades, por lo que cada efecto que utilicemos dentro de nuestro código tendrá una estructura similar.

Dentro de esta tendremos opciones que representan argumentos que son mandados a la clase, también tenemos los eventos que sirven para manipular las acciones y a la vez existen métodos los cuales son llamados para realizar cierta actividad especifica sobre la instancia.

Como se puede apreciar en las dos instancias de efecto que creamos en la sección anterior, tanto para Fx.Scroll como para Fx.Morph utilizamos las mismas tres opciones. Las opciones “transition”, “duration” y “link” son consideradas las más comunes, pero existen otras opciones las cuales raramente son modificadas de sus valores default.

Entre las más comunes encontramos la opción “fps” que simplemente se encarga de decir cuántos cuadros por segundo se desplegarán, y también tenemos la opción “unit” que nos sirve para cambiar la unidad de medida de píxeles a cualquier otra, como porcentaje o em.

En los eventos de MooTools se presenta el mismo caso, ya que todos las instancias de efecto que creemos tendrán el mismo manejo de eventos, es decir, todas podrán utilizar los eventos “start”, “complete”, “cancel”, “chainComplete”, entre otras.

En la mayoría de los casos el nombre del evento describe su funcionalidad, “start” sirve para atrapar los eventos de inicio de una transición, “complete” cuando la transición termina, “cancel” cuando esta se interrumpe y “chainComplete” que únicamente tiene función si utilizamos el valor “chain” para la opción “link” que se encarga de definir una fila de espera de eventos.

Estás son algunas formas de llamar a los eventos:

var miEfecto = new Fx.Efecto('elemento',{
  onStart: function(){
    //Acción
  }
});

miEfecto.addEvent('start',function(){
  //Acción
});

var accion = function(){
  //Acción
};
miEfecto.addEvent('start', accion);

Por otra parte, existen una serie de métodos pertenecientes a la clase Fx los cuales nos permitirán realizar acciones de efecto de manera rápida y sencilla, controlando cada parte de este. Entre estos métodos encontramos “start”, “set”, “cancel”, “pause” y “resume”.

var miEfecto = new Fx.Efecto('elemento');

miEfecto.start(propiedad, origen, destino);
miEfecto.set(propiedad, destino); //sin animación, solo establece el valor
miEfecto.cancel(); //el efecto es cancelado
miEfecto.pause();
miEfecto.resume();

Conclusión

Como pudimos observar el uso de efectos con MooTools es bastante sencillo, si has manejado llamadas a AJAX con anterioridad notarás que es un proceso bastante similar, ya que se construyen utilizando opciones, métodos y eventos.

El resto de la estructura puede ser complementada con la documentación de MooTools, de esa manera sabremos que propiedades utilizar y que valores otorgar.

Publicado el 29/05/2012, última actualización 29/05/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras