Efectos con Mootools

Vamos a dar un salto en el Manual de Mootools para irnos a la clase Fx, que nos servirá para hacer efectos de todo tipo sobre páginas web. Nos hemos dejado por el medio varias clases importantes, que veremos más adelante en el manual. Nos vendrá bien ver antes los efectos para hacer ejemplos más interesantes cuando expliquemos las cosas que hemos dejado pendientes.

Para estudiar los efectos en Mootools, comenzaremos explicando cómo hacer cosas sencillas, como hacer un fundido de opaco a transparente para ocultar un elemento. Luego nos detendremos más en los detalles y aprenderemos a utilizar las clases que heredan de Fx con todas sus posibilidades y comprobaremos que las herramientas de Mootools son bastante potentes.

Clase Fx

La clase Fx sirve para hacer efectos especiales, pero raramente la utilizaremos a ella misma. En realidad sirve como base para el core de Mootools para realizar varias clases derivadas, que implementan diversos tipos de efectos que nos pueden venir bien para enriquecer la experiencia de usuario.

Sin embargo, será importante conocer un poco esta clase, o al menos tenerla en cuenta cuando consultemos la documentación de Mootools, porque tiene muchas cosas que son comunes a todas las clases derivadas para hacer efectos.

Clases que heredan de Fx

Como ya se adelantaba, existen varias clases que se construyen en Mootools a partir de Fx, que sirven para hacer efectos de diversos tipos concretos. Estas clases son:

Fx.CSS
Esta clase tiene funcionalidades para interpretar estilos y clases CSS. Pero todos los métodos y propiedades de esta clase son privados, con lo que no podemos hacer nada con ella, sino que sirve para que las otras clases de Fx la utilicen.

Fx.Tween
Una clase que sirve para hacer una transición de cualquier propiedad CSS, de un valor a otro. Con ella podremos hacer efectos con cualquier duración, de modo que su presentación sea suave. Por ejemplo si hacemos un efecto para alterar la propiedad "top" de un elemento de la página, desde el valor 0 al 100, lo que ocurrirá es que el elemento se moverá por la página 100 píxeles hacia abajo, desde el pixel 0 al 100. Si habíamos configurado el estilo con una duración de, por ejemplo, 1 segundo, el movimiento del elemento, desde que está en la posición inicial a que llega a la final, tardará 1 segundo, con lo que el usuario lo verá suavizado.

Fx.Morph
Esta clase es parecida a Fx.Teen, con la diferencia que permite alterar varias propiedades CSS al mismo tiempo.

Fx.Transitions
Para hacer efectos más detallistas, que ajustan el proceso de transición con una función matemática. Por ejemplo esto sirve para hacer un desplazamiento de un elemento, pero donde la velocidad del movimiento no es linear, sino que es por ejemplo exponencial, siendo más rápido al inicio o al final del movimiento. Existen diferentes funciones matemáticas preestablecidas para genera efectos simpáticos, como movimientos con un rebote cuando llegan al final o que se pasan y luego vuelven, como si fuera un elástico.

Ejemplos sencillos de efectos con Mootools

Para acabar esta introducción a los efectos, vamos a mostrar cómo hacer algunos efectos sobre elementos de la página con Mootools. Para hacer estos efectos sencillos vamos a utilizar algunos métodos rápidos que tiene Fx.Tween.

Cuando tenemos la clase Fx.Tween cargada, se crean unos métodos nuevos para los elementos de la página (clase Element), para hacer efectos muy recurridos, como fundidos o resaltados. Estos métodos los podemos invocar sobre cualquier elemento, como cualquier otro método de los de la clase Element.

• Método fade()
• Método highlight()
• Método tween()