Tutorial de Mootools: Animaciones simples

0Sebastian Barria • 7th Mar 2010 • Javascript, Mootools, Tutoriales

En este segundo mini-tutorial, explicaré como comenzar a jugar con las animaciones que ofrece Mootools: fades y slides.

Lo bueno es que con esta librería es posible comenzar a hacer cosas con una simple línea o función, y luego podemos ir detallando y complejizando más nuestra animación. Ahora veremos como.

Otro de los beneficios que ofrece Mootools es la posibilidad de hacer animaciones de una manera muy simple. Este es un ejemplo (suponiendo que tenemos un DIV id=”div_animable”:

$('div_animable').slide('out');

Este tipo de función se puede aplicar a cualquier objeto. Por ejemplo, si tenemos un botón, podríamos decirle que al hacerle click, se esconda un DIV específico:

<input type="button" value="Esconder DIV" onclick="$('div_animable').slide('out');" />

Los efectos más simples que ofrece Mootools son slide() y fade(). Ambos funcionan de la misma manera y son muy fáciles de implementar. La siguiente es la lista de opciones que se puede utilizar (el ejemplo está hecho con slide, pero se puede reemplazar por fade y funciona exactamente igual):

$('div_animable').slide('in');
$('div_animable').slide('out');
$('div_animable').slide('show');
$('div_animable').slide('hide');
$('div_animable').slide('toggle');

Al utilizar este tipo de efectos, se genera una animación con sus propiedades por defecto. Para modificar el comportamiento de cada una de ellas, es necesario primero definir la siguiente línea:

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
});
miEfecto.slideOut();

En este caso, primero se define un nuevo efecto y se almacena en una variable (miEfecto). Para definir este nuevo efecto, es necesario definir el tipo de efecto (Fx.Slide); al efecto definido se le deben pasar dos parámetros (separados por coma): el DIV que será animado a través de este efecto, y las propiedades que tendrá esta animación (también separadas por coma y encerradas entre llaves {propiedad1, propiedad2, etc}).

La línea siguiente ejecuta la función slideOut() a partir del efecto que generamos anteriormente. Esta puede ser ejecutada en la línea siguiente o seguida de Fx.Slide(), separada por un punto (ver siguiente ejemplo).

Las propiedades, que van dentro de los corchetes son opcionales, es decir que se pueden omitir. Una versión más simple de esto, sería algo así (sin definir propiedades):

var miEfecto = new Fx.Slide('div_animable').slideOut();

Es un poco más engorroso hacerlo de esta manera, pero a veces es necesario que podamos modificar los ajustes por defecto.

Ahora: ¿cómo hacer una secuencia de animaciones?. ¡Fácil!…claro…fácil si alguien te lo explica. Lo que se debe hacer es utilizar la función chain().

La función chain() se aplica seguida de algún efecto, y dentro de ella se debe definir el nombre de una función que queramos ejecutar, o escribir function(){ } y escribir dentro de las llaves lo que queramos que pase.

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
}).slideOut().chain(function(){
    alert("hola");
});

En caso de querer hacer varios efectos del mismo tipo, se pueden simplemente poner uno detrás de otro, después de haber definido Fx.Slide.

var miEfecto = new Fx.Slide('div_animable').slideOut().slideIn().slideOut();

La función chain() no puede ser aplicada directamente sobre fade() o slide(), es decir, que no puedes hacer esto:

$('div_animable').fade('out').chain(function(){
 alert("hola");
 });