No artigo anterior do Manual de Mootols explicamos as generalidades sobre a classe Chain, que nos permite encadear a execução de diversas funções de maneira sequencial. Neste artigo veremos o exemplo mais claro de utilidade de Chain, que é encadear diversos efeitos, para que sejam executados um detrás do outro.

Chain sobre um efeito Mootools

Como dizíamos, Chain é uma típica classe para utilizar com efeitos em Mootools. Por isso, a própria classe Fx já implementa Chain, para que não tenhamos mais que utilizar os eventos necessários para aglomerar efeitos.

Ademais, os efeitos criados com a classe Fx, têm a particularidade de que quando são iniciados e uma vez se realize a transição do efeito, se chama automaticamente a próxima função que haja no chain(), de modo que não temos que fazer o callChain() explicitamente.

O primeiro código que vimos neste artigo de criarweb.com, que fazia dois efeitos mas que eram executados ao mesmo tempo por não tê-los colocado em um Chain, poderia ter sido feito segundo a alternativa que veremos no seguinte código, para que se execute um efeito depois do outro:

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

Como a classe Fx implementa Chain, nós não temos que fazer o "implements: Chain". Ademais, vemos que tampouco faz falta fazer a chamada ao método callChain() para seguir com a fila de efeitos.

Se você desejar, pode ver o exemplo em uma página à parte.

Obviamente, podemos enfileirar as funções que desejarmos, enviando-as como parâmetros ao método chain(), da seguinte maneira:

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

Para mudar um pouco o código, fizemos uso uso da variável this dentro do método chain(), que faz referência ao objeto, neste caso o efeito, sobre o que estamos trabalhando. Ademais, em vez de iniciar o primeiro efeito com o método start(), o enfileiramos nos chain, de modo que posso começar a sequencia com uma chamada ao método callChain().

Você pode ver o exemplo em funcionamento em uma página à parte.

Chain sobre vários efeitos diferentes

Agora vejamos um chain no que participam efeitos diferentes. No exemplo anterior, colocávamos na fila distintas chamadas a start() sobre um mesmo efeito que alterava a cor de fundo. Agora, vamos colocar em funcionamento, em sequencia, diferentes efeitos que alteram propriedades distintas de vários elementos da página.

Para tanto vamos construir uma classe que se encarregará de encadear os efeitos.

var ClasseChainEfeito = new Class({
   //implemento chain
   Implements: Chain,
   
   initialize: function(){
      this.efeito1 = 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.efeito3 = new Fx.Tween('elem3', {
         property: 'opacity',
         duration: 1000
      });
   },
   
   efeitos: function(){
      this.chain(
         function(){ this.efeito1.start(1,0); },
         function(){ this.efeito2.start(1,0); },
         function(){ this.efeito3Previo.start({'width': 200, 'color': '#000000', 'background-color': '#ccccff'}); },
         function(){ this.efeito3.start(1,0); }
      );
      this.callChain();
   }
});

Como se pode ver, entram em jogo vários efeitos diferentes e se aplicam sobre distintos elementos da página. Mais tarde com o método efeitos() são inseridos na fila e se invoca o primeiro com callChain().

Os efeitos têm um evento onComplete para que quando se termine sua reprodução se chame o seguinte efeito da fila chain.

Podemos instanciar a clase e chamar os efeitos desta forma:

minhaClasseChainEfeito = new ClaseChainEfeito();
minhaClasseChainEfeito.efeitos();

Podemos ver o exercício em uma página à parte.

Com isto devemos ter aprendido a manejar a classe Chain e a encadear diversos efeitos Mootools ou funções diferentes.