En el artículo anterior del Manual de Mootols explicamos las generalidades sobre la clase Chain, que nos permite encadenar la ejecución de diversas funciones de manera secuencial. En este artículo veremos el ejemplo más claro de utilidad de Chain, que es encadenar diversos efectos, para que se ejecuten uno detrás de otro.

Chain sobre un efecto Mootools

Como decíamos, Chain es una típica clase a utilizar con efectos en Mootools. Por ello, la propia clase Fx ya implementa Chain, para que no tengamos más que utilizar los eventos necesarios para apilar efectos.

Además los efectos creados con la clase Fx, tienen la particularidad que cuando se inician y una vez se realice la transición del efecto, se llama automáticamente a la próxima función que haya en el chain(), por lo que no tenemos que hacer el callChain() explícitamente.

El primer código que vimos en este artículo de desarrolloweb.com, que hacía dos efectos pero se ejecutaban a la vez por no haberlos colocado en un Chain, se podría haber hecho según la alternativa que podremos ver en el siguiente código, para que se ejecute un efecto después del otro:

efecto = new Fx.Tween('capa', {
   property: 'width',
   duration: 1000
});
efecto.chain(
   function() {
      efecto.start(50);
   }
);
efecto.start(400);

Como la clase Fx implementa Chain, no tenemos que hacer nosotros el "implements: Chain". Además, vemos que no hace falta tampoco hacer la llamada al método callChain() para seguir con la cola de efectos.

Si lo deseas, puedes ver el ejemplo en una página aparte.

Obviamente, podemos encolar tantas funciones como deseemos, enviándolas como parámetros al método chain(), de la siguiente manera:

efecto = new Fx.Tween('capa', {
   property: 'background-color',
   duration: 3000
});
efecto.chain(
   function() {
      this.start("#000000");
   },
   function() {
      this.start("#cc0000");
   },
   function() {
      this.start("#00cc00");
   },
   function() {
      this.start("#0000cc");
   },
   function() {
      this.start("#000000");
   }
);
efecto.callChain();

Por cambiar un poco el código, hemos hecho uso de la variable this dentro del método chain(), que hace referencia al objeto, en este caso el efecto, sobre el que estamos trabajando. Además, en vez de iniciar el primer efecto con el método start(), lo hemos encolado en los chain, de modo que puedo empezar la secuencia con una llamada al método callChain().

Puedes ver en marcha el ejemplo en una página aparte.

Chain sobre varios efectos distintos

Ahora veamos un chain en el que participan efectos diferentes. En el ejemplo anterior metíamos en la cola distintas llamadas a start() sobre un mismo efecto que alteraba el color de fondo. Ahora vamos a poner en marcha, en secuencia, diferentes efectos que alteran propiedades distintas de varios elementos de la página.

Para ello vamos a construir una clase que se encargará de encadenar los efectos.

var ClaseChainEfecto = new Class({
   //implemento chain
   Implements: Chain,
   
   initialize: function(){
      this.efecto1 = new Fx.Tween('elem1', {
         property: 'opacity',
         duration: 1000,
         onComplete: function(){
            this.callChain();
         }.bind(this)
      });
      this.efecto2 = new Fx.Tween('elem2', {
         property: 'opacity',
         duration: 1000,
         onComplete: function(){
            this.callChain();
         }.bind(this)
      });
      this.efecto3Previo = new Fx.Morph('elem3', {
         duration: 1000,
         onComplete: function(){
            this.callChain();
         }.bind(this)
      });
      this.efecto3 = new Fx.Tween('elem3', {
         property: 'opacity',
         duration: 1000
      });
   },
   
   efectos: function(){
      this.chain(
         function(){ this.efecto1.start(1,0); },
         function(){ this.efecto2.start(1,0); },
         function(){ this.efecto3Previo.start({'width': 200, 'color': '#000000', 'background-color': '#ccccff'}); },
         function(){ this.efecto3.start(1,0); }
      );
      this.callChain();
   }
});

Como se puede ver, entran en juego varios efectos distintos a la vez y se aplican sobre distintos elementos de la página. Luego con el método efectos() se meten en la cola y se invoca al primero con callChain().

Los efectos tienen un evento onComplete para que cuando se termine su reproducción se llame al siguiente efecto de la cola chain.

Podemos instanciar la clase y llamar a los efectos de esta forma:

miClaseChainEfecto = new ClaseChainEfecto();
miClaseChainEfecto.efectos();

Podemos ver el ejercicio en una página aparte.

Con esto hemos debido aprender a manejar la clase Chain y encadenar diversos efectos Mootools o funciones distintas.