Explicamos el método tween de Mootools, que sirve para hacer una transición sencilla entre dos valores de un atributo CSS.
El método tween se aplica sobre los elementos de la página, es decir los objetos de la clase Element de Mootools y le tenemos que enviar tres parámetros: el nombre de un atributo CSS y dos valores de estilo de inicio y de fin del efecto, con sus correspondientes unidades CSS. El efecto que resultará es una transición entre el valor indicado como inicio y el valor indicado como fin.
Por ejemplo, imaginar que tenemos un elemento con id="micapa", entonces podríamos hacer una transición para alterar su anchura, entre 0px y 300px. Para ello utilizaríamos el método tween sobre el elemento "micapa", de esta manera:
$("micapa").tween("width", "0px", "300px");
Como se puede ver, accedemos al elemento con la función $(), enviando su identificador. Luego llamamos al método tween(), enviando el valor "width", que es el atributo CSS que queremos alterar y luego los valores de inicio "0px" y fin "300px" de la transición.
Este efecto hará que el elemento pase de tener 0px de anchura a 300px, en una transición suave que durará cosa de medio segundo.
Podemos ver una página que hace uso de ese método para alterar la anchura de un elemento.
Ahora bien, veréis que el efecto tiene un pequeño problemilla y es que la capa original tenía ya una anchura. Pero el efecto comienza la con una anchura de 0px, así que lo primero que pasa es que la capa se transforma a 0px en un salto inmediato y luego comienza la transición suave hacia el valor final de 300px. Esto se puede arreglar fácilmente porque el método tween() permite indicar sólo el valor final de la transición y entonces lo que ocurre es que la transición irá desde el valor actual de anchura del elemento, que no necesitamos saber, hasta el valor final que sí debemos indicar de manera obligatoria.
$("micapa").tween("width", "300px");
Podemos ver el ejemplo con este pequeño cambio en una página aparte
Podremos haber comprobado que ahora el efecto es mucho más suave, porque el inicio del mismo comienza en la anchura actual de la capa. Ahora mostramos el código completo de esta página, para que se pueda revisar detenidamente:
<html>
<head>
<title>Efectos con el método tween de Mootools</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
function cambiarAnchura(){
$("micapa").tween("width", "300px");
}
window.addEvent("domready", function(){
$("enlaceanchura").addEvent("click", function(e){
e.stop();
cambiarAnchura();
});
});
</script>
</head>
<body>
<div id="micapa" style="width: 100px; overflow:hidden; background-color: #060; color: #fff; padding: 10px;">
Este texto es de prueba, simplemente relleno algo para ocupar espacio en esta capa... y le voy a poner un color de fondo para que se vea donde está la capa. Espero que guste!! a ver que tal!!
</div>
<br>
<a href="#" id="enlaceanchura">Cambia anchura</a>
</body>
</html>
Otro ejemplo del método tween() sobre objetos Element
En principio tween() permite transiciones para cualquier atributo de CSS que queramos. Otro ejemplo sencillo sería cambiar el color de fondo a esos elementos con el atributo background-color.Por ejemplo, con esta línea de código cambiaríamos el color de fondo de un elemento con id="capacolor".
$("capacolor").tween("background-color", "#00aaee");
Como sólo indicamos un valor de color, el cambio se realizará partiendo del color actual del fondo del elemento al color indicado en el parámetro.
Ahora, para probar esta instrucción hemos hecho un pequeño ejemplo en el que encontraremos una capa y varios enlaces, cada uno con un color distinto. Al pulsar los enlaces cambiaremos el color de la capa con el método tween() del elemento.
Podemos ver el ejemplo en una página aparte.
El código completo de este ejemplo se puede ver a continuación:
<html>
<head>
<title>Efectos con el método tween de Mootools</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
$$("a.cambiacolor").each(function(elemento){
elemento.addEvent("click", function(e){
e.stop();
$("capacolor").tween("background-color", elemento.get("html"));
});
});
});
</script>
</head>
<body>
<div id="capacolor" style="background-color: #f00; padding: 10px;">
Esta capa le he puesto fondo rojo para ver el efecto de Tween para pasarlo a otro color. Pulsa los enlaces de abajo para cambiar los colores.
</div>
<a href="#" class="cambiacolor">#ffff99</a> |
<a href="#" class="cambiacolor">#c93</a> |
<a href="#" class="cambiacolor">#88ff00</a> |
<a href="#" class="cambiacolor">#6666ff</a> |
<a href="#" class="cambiacolor">#ccc</a>
</body>
</html>
Para crear este ejemplo hemos utilizado una selección múltiple de todos los enlaces de la página, con la función $$() para asignarles un comportamiento a todos de una sola vez. Todo eso, además de la asignación de eventos a los enlaces, está explicado en los capítulos anteriores del Manual de Mootools que venimos publicando en DesarrolloWeb.com.
En los siguientes artículos veremos maneras más complejas de realizar efectos en la página, pero que permiten una personalización mucho mayor.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...