sabato 16 agosto 2008

Mootools, effetti e transizioni

Il codice della classe QScroller offre un esempio di come realizzare una semplice animazione con Mootools.

var QScroller = new Class({
/* ... */
  show: function() { (1)
    var slide = this.slideIn.getElement('div');
    if(slide) {
      slide.replaceWith(this.curSlide);
    } else {
      this.curSlide.injectInside(this.slideIn);
    }
    this.doEffect();
  },
  doEffect: function() {
    this.fxOn = true;
    var d = this.isFirst ? 0:this.options.duration;
    var t = this.options.transition;
    
    var fxObj = this.slideIn.effects({ (2)
      duration:d,
      transition: t
    });
    /* ... */ (3)
    fxObj.start({ (4)
      top: [inY, 0],
      left: [inX, 0],
      opacity: [1, 1]
    });
    this.slideOut.effects({ (5)
      duration: d,
      transition: t
    }).start({
      top: [0, outY],
      left: [0, outX]
    });
    /* ... */
  },
});
QScroller.implement(new Options, new Events);

Per gestire l'effetto scrolling si utilizzano due elementi DIV generati dinamicamente e salvati negli attributi della classe slideIn e slideOut (vedi funzione initialize() in Mootools, creare elementi DOM).

Come già accennato gli elementi (slide) con il testo e/o le immagini da far scorrere sono contenuti in una serie di DIV la cui classe (default qslide, fare riferimento al sorgente html degli esempi) è passata alla classe QScroller attraverso il meccanismo delle options. L'insieme di queste slide è quindi memorizzato nell'attributo della classe slides (vedi ancora initialize() in Mootools. Ancora la classe QScroller).

(1) Il compito della funzione show() è quello di inserire in slideIn (con injectinside()) la prossima slide da visualizzare (curSlide vedi load() in Mootools. Ancora la classe QScroller), rimpiazzando (con replaceWith()) la slide precedente eventualmente presente . Poi viene invocata doEffect() che si occupa dell'effetto di scrolling vero e proprio.

(2) Si predispone un effetto da applicare all'elemento slideIn impostandone durata (in millisecondi) e transizione (per esempi sulle possibili transizioni supportate da Mootools vedi la documentazione).

(3) Il codice è omesso perché si tratta di semplici istruzioni per calcolare le posizioni iniziale e finale di slideIn e slideOut in base alla direzione del movimento.

(4) Il valore della proprietà top di slideIn passa da inY a zero, il valore della proprietà left da inX a zero, il tutto gradualmente per la durata e con l'effetto di transizione impostato in (2). Il valore di opacity resta costante a 1 (elemento visibile).

Se si considera che slideIn ha una posizione assoluta all'interno di un DIV contenitore (vedi inizializzazione dell'attributo wrapper in Mootools. Elementi ed eventi), il risultato finale è un effetto di scorrimento orizzontale o verticale di slideIn.

(5) Qualcosa di analogo a quanto visto sopra. Basta verificare nel codice omesso le posizioni iniziali e finali di left o top per slideIn e slideOut per capire il meccanismo: la slide corrente 'esce' come se fosse 'spinta fuori' dalla nuova che entra.

Si conclude qui questa serie di post sulla classe QScroller. Le funzioni rimanenti sono facilmente comprensibili, chi avesse bisogno di maggiori dettagli può lasciare un commento.