JOURMOLY

Para comenzar a jugar con los efectos de Mootools haré una breve explicación de los métodos, opciones y eventos de Fx.Base ejemplificándolos con la clase Fx.Style. Recordemos que Fx.Style hereda todos los métodos, opciones y eventos de Fx.Base.

¿Qué es Fx.Style?

Usamos Fx.Style cuando deseamos modificar solo una propiedad css de un elemento. Hereda los métodos, opciones y eventos de Fx.Base

Creando una instancia de Fx.Style

Para comenzar a explicar los métodos, primero necesitamos una instancia de Fx.Style.

1

var miEfecto = new Fx.Style('idElemento', 'propiedadCSS', {opciones});

Ahora miEfecto es una instancia de Fx.Style que efectuara cambios en el elemento cuyo id es idElemento en la propiedad propiedadCSS. También se pueden añadir una serie de opciones que nombraré mas adelante.

Métodos de Fx.Base

set
Cambiamos una propiedad css sin transiciones.

1
2
3

var miEfecto = new Fx.Style('elemento-1', 'margin-left');
miEfecto.set(383);
// margin-left de 0px a 383px sin transición

O bien

1
2

var miEfecto = new Fx.Style('elemento-1', 'margin-left').set(383);
// margin-left de 0px a 383px sin transición

En ambos casos lo que hacemos es cambiar la propiedad margin-left de elemento-1 a 383px.

start
start, al igual que set, nos permite cambiar una propiedad CSS pero a diferencia de set, start nos da la posibilidad de utilizar una transición. Para que funcione debemos indicarle un valor de comienzo y otro de final.

1
2

var miEfecto = new Fx.Style('elemento-2', 'margin-left').start(0, 383);
// margin-left de 0px a 383px con transición

Se puede observar que cada vez que se hace click sobre nuestro elemento, este vuelve al punto 0 de golpe e inicia una nueva transición hacia el valor final(383px).

También podemos indicar solo el valor final, en este caso el valor de comienzo será el que posea nuestro elemento.

1
2

var miEfecto = new Fx.Style('elemento-3', 'margin-left').start(383);
// margin-left desde el valor que posee(0px) a 383px con transición

A diferencia del ejemplo anterior, la transición funciona solo la primera vez que hacemos click sobre nuestro elemento, la segunda intenta ir desde su posición actual (381px) a la final que le indicamos (381px) y obviamente no se mueve.

stop
stop simplemente detiene un efecto.

1
2
3

var miEfecto = new Fx.Style('elemento-4', 'margin-left').start(383);
miEfecto.stop();
// detenemos el efecto

Opciones

Las opciones nos permiten modificar ciertos comportamientos de nuestros efectos.

transition
Con transition podemos modificar la función utilizada para la transición de nuestro efecto. Hay varios tipos de transición y las podes ver en funcionamiento en nuestro visor de efectos. Si no se indica una transición, se usa Fx.Transitions.Sine.easeInOut como predefinida.

1
2
3
4
5
6

var miEfecto = new Fx.Style('elemento-5', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut
});
miEfecto.start(0, 383);
// usamos la transición Fx.Transitions.Back.easeInOut

duration
Podemos variar el tiempo de duración de nuestros efectos cambiando el valor de duration(en ms).

1
2
3
4
5
6
7

var miEfecto = new Fx.Style('elemento-6', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500
});
miEfecto.start(0, 383);
// nuestro efecto tendrá una duración de 1500 milisegundos

unit
Todas las propiedades CSS que cambiamos con los efectos de mootools utilizan como unidad el px(salvo los colores que son en hexadecimal). unit nos permite cambiar dicha unidad a otra como % o em.

1
2
3
4
5
6
7
8

var miEfecto = new Fx.Style('elemento-7', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
        unit: '%'
});
miEfecto.start(0, 81);
// utilizamos % en lugar de px

wait
En los efectos anteriores si hacemos varios clicks seguidos sobre nuestro elemento de prueba el efecto no se reinicia si hay un efecto en curso. Si cambiamos el valor de wait a false, el efecto se reiniciara siempre que hagamos click, sin esperar a que finalice el efecto en curso.

1
2
3
4
5
6

var miEfecto = new Fx.Style('elemento-8', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
        wait: 'true'
});

fps
Nos permite modificar la cantidad de fotogramas por segundo. Si no se cambia, el valor predefinido es 50.

1
2
3
4
5
6
7
8

var miEfecto = new Fx.Style('elemento-9', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
        wait: 'true',
        fps: 5
});
miEfecto.start(0, 383);

Eventos

Fx.Base trae una serie de eventos para facilitarnos algunas tareas.

onStart
Se puede indicar una función para que se ejecute ni bien comienza nuestro efecto.

1
2
3
4
5
6
7
8
9
10
11

var miEfecto = new Fx.Style('elemento-10', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
        wait: true,
	onStart: function()
	{
		alert('Comienza nuestro Efecto!');
	}
});
miEfecto.start(0, 383);

onComplete
Se puede indicar una funcion para que se ejecute ni bien finaliza nuestro efecto.

1
2
3
4
5
6
7
8
9
10
11

var miEfecto = new Fx.Style('elemento-11', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
        wait: true,
	onComplete: function()
	{
		alert('Termino nuestro Efecto!');
	}
});
miEfecto.start(0, 383);

onCancel
Se puede indicar una funcion para que se ejecute ni bien se cancela un efecto con stop.

1
2
3
4
5
6
7
8
9
10
11
12

var miEfecto = new Fx.Style('elemento-12', 'margin-left',
{
	transition: Fx.Transitions.Back.easeInOut,
        duration: 1500,
	wait: true,
	onCancel: function()
	{
		alert('Se cancelo nuestro Efecto!');
	}
});
miEfecto.start(0, 383);
miEfecto.stop();

Podes ver todos los ejemplos juntos aquí, y los podes descargar desde aquí.

Y eso es todo por ahora!

Popularity: 38% [?]

Otros artículos

• Se viene, se viene: Mootools 1.2 RC1
• Clases y objetos con Mootools II
• Mootools XMLHttpRequest: XHR.js
• Introducción a MVC con PHP, primera parte
• Listados de Posts en Wordpress