Dentro de la librería Mootools, nos encontramos los siguientes recursos para construir efectos para nuestras webs:
Clase Fx
La clase Fx es la clase base para el core de Mootools para realizar varias clases derivadas, que implementan diversos tipos de efectos útiles para enriquecer la experiencia de usuario.
Es importante, no obstante, 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
Fx.CSS
Esta clase tiene funcionalidades para interpretar estilos y clases CSS.
Todos los métodos y propiedades de esta clase son privados.
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.
Método fade()
Podríamos hacer un fundido de opaco a transparente con la sentencia:
$("mielemento").fade("out");
Para hacer un fundido de transparente a opaco, se puede invocar el método fade() de esta manera:
$("mielemento").fade("in");
Método highlight()
$("mielemento").highlight("#ccc");
El método genera un efecto de cambio gradual del color de fondo del elemento, desde su color actual hasta el color que le enviamos por parámetro, volviendo de nuevo a su color original. Si el elemento anteriormente no tenía color asignado, o si era transparente, se toma el blanco como color por defecto del elemento.
$("mielemento").highlight("#f07990","#ccc");
Doble transición de color.
Método tween()
Tiene 3 parámetros:
- nombre de atributo CSS.
- valor inicial, ( con unidades ).
- valor final, ( con unidades ).
El efecto que resultará es una transición entre el valor inicial y el final.
$("micapa").tween("width", "0px", "300px");
Transforma el elemento cuyo id="micapa" en ancho de 0 a 300 px.
$("micapa").tween("width", "300px");
En este caso solo recibe el valor final.
Clase Fx.Tween
Sirve para hacer efectos avanzados.
Para hacer efectos con esta clase tenemos que instanciar un objeto Fx.Tween. Al constructor tenemos que enviarle el identificador del elemento HTML sobre el que queramos hacer los efectos, así como otros datos opcionales que veremos más tarde.
miEfecto = new Fx.Tween("micapa");
Con esto tenemos un objeto en la variable "miEfecto" con el que podemos invocar diversas acciones para realizar transiciones mendiante la alteración de propiedades CSS del elemento "micapa".
Lo más básico que podremos desear hacer con esta clase es poner en marcha un efecto y para ello disponemos del método start(), que podemos usar por ejemplo de esta manera:
miEfecto.start("background-color", "#ff8800");
Datos opcionales
Forma de setear ciertos parámetros avanzados de los efectos Mootools, como definir la duración o la propiedad CSS que se debe alterar cuando se ponga en marcha el efecto.
Todos estos parámetros opcionales se envían en un objeto "options" al constructor.
efectoColorTexto = new Fx.Tween("capatxt", {
property: 'color',
duration: 'long',
fps: 100
});
property: 'color'
Sirve para especificar que la propiedad CSS sobre la que queremos hacer el efecto es "color", para cambiar el color del texto.
duration: 'long'
Sirve para indicar que la duración del efecto debe ser larga ("long" equivale a 1 segundo de duración). Podríamos haber especificado una duración con un número en milisegundos (ms) u otros valores en texto como "normal" que equivale a 500 ms o "short" que equivale a 250 ms.
fps: 100
Con fps indicamos los "frames por segundo", es decir, la cantidad de veces que se actualiza la propiedad CSS en cada segundo que ocupe la transición.
Una vez creado el objeto de la clase Fx.Tween, habría que invocar al método start() para iniciar el efecto, de manera similar a como vimos en el ejemplo anterior. Sin embargo, como en este caso ya hemos indicado la propiedad CSS que se debe alterar en las "options", dentro del la propiedad "property", ya no es necesario indicar esa propiedad en el método start().
efectoColorTexto.start("#ff8800");
Nota: como podremos ver en la documentación de Mootools, el método start() de la clase Fx.Tween recibe como mínimo un parámetro y como máximo tres. El único parámetro que es obligado es el valor de finalización del efecto. Los otros dos parámetros opcionales son el nombre del atributo CSS a alterar y el valor del atributo de inicio para el efecto.
myFx.start([property,] [from,] to);
Eventos de efectos en Mootools
Para codificar comportamientos a realizar en respuesta a eventos tenemos dos posibilidades:
1. Codificar el evento dentro de los "options" enviados al contructor de la clase.
Eventos en la clase Fx y las que heredan de ésta
Los eventos que soportan las clases de efectos en Mootools, es decir, las clases que dependen en la jerarquía de herencia de Fx, son los siguientes:
* Evento start: que se produce cuando el efecto comienza a ejecutarse
* Evento cancel: que se lanza cuando se para manualmente un efecto
* Evento complete: ocurre en el momento que el efecto termina su ejecución
* Evento chainComplete: en caso de encadenar varios eventos con chain, algo que no hemos visto todavía en el manual, se lanza cuando la pila de efectos ha sido completada.
var efecto = new Fx.Tween("capaefectos",{
property: 'width',
duration: 1000,
unit: "px",
onStart: function(){
$("mensaje").set("html", "Comenzando el efecto...");
}
});
2. Codificar el evento por medio del método addEvent() sobre el objeto ya instanciado.
Ahora veremos otro modo posible de asignar eventos, que se hace con el propio evento instanciado y el método addEvent.
efecto.addEvent("complete", function(){
$("mensaje").set("html", "Terminó el efecto.");
});
Con este código conseguimos que al efecto, instanciado en la variable "efecto", se le añada un evento "complete", que se ejecutará cuando el proceso del efecto termine.
El código del evento es bien simple, ya que sólo actualiza el HTML de la capa "mensaje".
Ahora, cuando iniciemos el efecto y éste se complete, se actualizará el texto de la capa mensaje. Sólo nos quedaría llamar al método start() del evento, que invocaremos cuando el usuario haga clic sobre un par de enlaces creados en la página.
$("enlaceencoger").addEvent("click", function(e){
e.stop();
efecto.start(100);
});
$("enlaceestirar").addEvent("click", function(e){
e.stop();
efecto.start(750);
});
Tenemos pues dos enlaces con identificadores "enlaceencoger" y "enlaceestirar", que llaman al método start() del efecto creado anteriormente, enviando el valor numérico que queremos asignar a la propiedad CSS dada de alta en las "options", que era width. Además, como en las "options" ya habíamos asignado las unidades CSS "px", con pasar un valor numérico a start(), será suficiente, porque el efecto ya sabe que son píxeles lo que estamos midiendo.
Podemos ver el código :
window.addEvent("domready", function(){
var efecto = new Fx.Tween("capaefectos",{
property: 'width',
duration: 1000,
unit: "px",
onStart: function(){
$("mensaje").set("html", "Comenzando el efecto...");
}
});
efecto.addEvent("complete", function(){
$("mensaje").set("html", "Terminó el efecto.");
});
$("enlaceencoger").addEvent("click", function(e){
e.stop();
efecto.start(100);
});
$("enlaceestirar").addEvent("click", function(e){
e.stop();
efecto.start(750);
});
});
Y el body tendría algo así
<div id="capaefectos" style="width: 500px; background-color: #ffcc66; padding: 10px; overflow: hidden;">
Esta capa es sobre la que voy a crear los efectos con la clase Fx.Tween, a los que asignaremos diferentes eventos para probar.
</div>
<a href="#" id="enlaceestirar">Estirar capa con efecto</a>
<a href="#" id="enlaceencoger">contraer capa con efecto</a>
<div id="mensaje"></div>
value" width="550" height="164">