La clase FX.Tween sirve para hacer efectos totalmente personalizables en Mootools, con una propiedad CSS, desde un valor a otro.
En el Manual de Mootools ya comenzamos a explicar las bases sobre las clases dedicadas a la creación de efectos e incluso hemos dedicado varios artículos para explicar diversos métodos para la creación de efectos sencillos.
Ahora vamos a explicar los detalles de la clase Fx.Tween, que nos sirve para hacer un cambio suavizado entre dos valores distintos de una propiedad CSS. En este punto cabría comentar que, para hacer un efecto de estas características sin complicarnos mucho la vida, existe un método llamado tween() que ya explicamos en un artículo anterior. Muchas de las explicaciones teóricas sobre este tipo de efecto valen también para la clase Fx.Tween, ya que nos permite hacer lo mismo, un cambio del valor de una propiedad de una manera delicada. El uso de la clase Fx.Tween es, sin embargo, bastante diferente y se hace un poco más complejo. Pero es que también hay que decir que las posibilidades de utilizar la clase son realmente mucho mayores que si utilizamos el sencillo método tween().
Podemos decir que, si deseas hacer un efecto simple y único de cambio entre dos valores de CSS, puedes utilizar el método tween(), que es mucho más cómodo y requiere menos código Javascript. Pero si quieres hacer algo un poco más especial, como concatenar varios efectos, definir el tiempo de la transición, realizar cosas al iniciar o terminar el efecto, etc, pues estás obligado a usar la clas Fx.Tween que vamos a explicar seguidamente.
Clase Fx.Tween
Esta recurrida clase de Mootools sirve para cambiar cualquier propiedad CSS de una manera suavizada, es decir, es un cambio de valor de una propiedad CSS que se realiza con una transición que dura un espacio de tiempo configurable. Esta clase, aparte de hacer el propio efecto, tiene en torno una infraestructura para hacer diversas cosas relacionadas con el efecto.Como se dijo en la introducción a los efectos de Mootools, esta clase hereda de Fx, por lo que en la referencia para aprender a manejar Fx.Tween, habrá que tener en cuenta también todo lo que se comenta para su clase padre Fx.
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");
Con esto conseguiremos que el efecto se ponga en marcha y altere el valor de la propiedad CSS background-color, desde el valor actual a "#ff8800", sobre el elemento que se había asociado al efecto, cuyo identificador se envió al constructor al crear el objeto. En definitiva, que cambiará el fondo del objeto a ese nuevo valor RGB en una transición suavizada.
Podemos ver una página aparte en la que tenemos un script que realiza este efecto.
El código fuente de esa página sería el siguiente:
<html>
<head>
<title>Efecto cambio color de fondo</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
efecto = new Fx.Tween("micapa");
efecto.start("background-color", "#ff8800");
});
</script>
</head>
<body>
<div id="micapa" style="background-color: #fff; width: 120px; padding: 5px;">
Esto es una capa para hacer un efecto de cambio de color de fondo con Fx.Tween
</div>
</body>
</html>
Este sería el uso más simple de Fx.Tween, aunque realmente, si queremos hacer algo tan sencillo, quizás nos sería suficiente con llamar al método tween() que explicamos en el artículo anterior. Lo interesante será conocer algunas de las posibilidades de personalización de Fx.Tween para que veamos alguna diferencia que resulte suficientemente atractiva o necesaria como para utilizar esta clase.
Personalización de efectos con Fx.Tween
Cuando utilizamos el constructor de Fx.Tween teníamos la posibilidad de enviar una serie de valores opcionales que nos serán útiles para marcar 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 de "options" al constructor.
El formato de las "options" es un objeto, como cualquier otro que se pueda definir con la notación de objetos propia de Mootools. Vamos a realizar un nuevo ejemplo para que lo podamos ver.
efectoColorTexto = new Fx.Tween("capatxt", {
property: 'color',
duration: 'long',
fps: 100
});
Con este código crearíamos un objeto de la clase Fx.Tween, para realizar efectos sobre el elemento con identificador "capatxt". Además le pasamos un objeto de "options" en el que indicamos varias informaciones:
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");
myFx.start([property,] [from,] to);
Esto quiere decir que el orden con el que tienen que aparecer los parámetros en la llamada a start() comienza por el nombre de la propiedad CSS, luego el valor de inicio y acabando por el valor de fin, siendo este último parámetro el único requerido siempre.
Ahora podemos ver este ejemplo de efecto en una página aparte.
El código completo del ejemplo se muestra a continuación:
<html>
<head>
<title>Efecto cambio color del texto</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
efectoColorTexto = new Fx.Tween("capatxt", {
property: 'color',
duration: 'long',
fps: 100
});
efectoColorTexto.start("#ff8800");
});
</script>
</head>
<body>
<div id="capatxt" style="color: #000; width: 420px; padding: 5px; font: bold 24pt Verdana, Geneva, Arial">
Esto es una capa para hacer un efecto de cambio de color del texto con Fx.Tween
</div>
</body>
</html>
Dejamos por aquí este tema, aunque todavía nos quedan cosas que aprender sobre los efectos Mootools y la clase Fx.Tween en concreto, como la generación de eventos sobre efectos, que veremos resultarán bastante útiles. Todo esto lo explicaremos en próximos artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...