CSSLab

Encadenando con Mootools

Tweet

Una gracia que tiene Mootools desde su versión 1.0 es el poder de crear cadenas de funciones, agregando lapsus de tiempo y de espera (delay) incluso. La class Chain es una manera muy astuta de enlistar secuencias de funciones en las que quieras ejecutar en un cierto orden sin tener que llamarlas todas al mismo tiempo. Luego, cada vez que termine de realizarse una función, la siguiente recién comenzará, lo que ayuda a controlar la memoria que estás utilizando para tu proyecto web. Su implementación es muy sencilla; basta con instanciar la class Chain y luego agregar como parámetro las funciones a la secuencia, de la siguiente manera:

$(elemento)
     .effects({duration: 1000, transition: Fx.Transitions.Quad.easeInOut})
     .start({
          ’width’: 800,
          ’height’: 410
     })
     .chain(function(){
          this.start({
               ’width’: 200,
               ’height’: 600
          })
     });

Ver ejemplo 1

En este ejemplo estoy modificando el tamaño de un #contenedor que tiene dentro una imagen del lápiz posicionado absolutamente; con ello logro que a medida que varían las dimensiones del #contenedor mediante Javascript, simula el movimiento del lápiz con física de movimiento incluída (otra gran gracia de Mootools). Dejé el borde del #contenedor visible para que se aprecie el cambio de tamaño.

Y el resto va por cuenta de la creatividad que le quieran dar, o mejor dicho, encadenar. Pueden realizar muchas acciones y como mencionaba, incluir pausas en lapsus de milisegundos antes de desencadenar la siguiente función, como en el siguiente ejemplo:

$(elemento)
     .effects({duration: 3000, transition: Fx.Transitions.Elastic.easeInOut})
     .start({
          ’width’: 600,
          height’: 210
     }).chain(function(){
          this.start({
               ’opacity’: 0.5
          })
     }).chain(function(){
          this.start({
               ’opacity’: 1
          })
     }).chain(function(){
          this.start.delay(500, this, {
               ’height’: 400,
               ’width’: 200
          })
     }).chain(function() {
          this.start({
               ’opacity’: 0.5,
               ’width’: 100,
               ’height’: 100
          });
     }).chain(function() {
          this.start.delay(1000, this, {
               ’opacity’: 1,
               ’width’: 1500,
               ’height’: 600
          })
     }).chain(function() {
          this.start({
               ’width’: 100,
               ’height’: 100
          })
     });

Ver ejemplo 2

Dejo claro que estoy utilizando la versión 1.11 de Mootools, que aún está mejor documentada que la más reciente 1.2 y con más ejemplos disponibles.

Links:

• Mootools Demos – Chain