Animazioni di base con le classi Fx.Tween e Fx.Morph

Tutte le opzioni, gli eventi, le proprietà ed i metodi offerti dalla classe Fx e studiati nella precedente lezione sono ereditati ed estesi dalle sottoclassi Fx. Vediamo ora due rappresentazioni pratiche che ci permettono di creare animazioni agendo sulle proprietà CSS di un elemento: i costruttori Fx.Tween ed Fx.Morph.

La classe Fx.Tween

La classe Fx.Tween permette di eseguire un'animazione agendo su una e una sola proprietà CSS di un elemento per volta. Il suo metodo start accetta la proprietà sulla quale agire e i possibili valori di inzio e fine:

var tween = new Fx.Tween('myElement', {duration: 2000});

// azioniamo un'animazione sulla proprietà 'width', per modificarla da 400px a 600px
tween.start('width', 400, 600);

// azioniamo un'animazione sulla proprietà 'height', per modificarla dal suo valore corrente fino a 400px
tween.start('height', 400);

La classe Fx.Morph

La classe Fx.Morph svolge un compito molto simile alla classe Fx.Tween, ma, diversamente da quest'ultima, permette di agire su di una moltitudine di proprietà CSS contemporaneamente. Al metodo start può essere passato un oggetto che contiene le accoppiate proprietà/valori oppure una stringa che indica una classe CSS (gli stili di quest'ultima verranno elaborati internamente):

var morph = new Fx.Morph('myElement', {duration: 4000, transition: 'bounce:out'});

// azioniamo l'animazione ed agiamo sulle proprietà 'height' e 'width'
morph.start({
    'height': [10, 100],
    'width': [900, 300]
});

// applichiamo gli stili della classe css di nome 'morph' tramite un'animazione
morph.start('.morph');

Ecco ora due esempi pratici che, tramite il pulsante contrassegnato dalla scritta 'start', permettono di azionare le istanze di Fx.Tween (demo) ed Fx.Morph (demo) per creare le nostre animazioni.

Element Shortcuts

Come dichiarato nelle precedenti lezioni, gli Hash svolgono un ruolo di fondamentale importanza all'interno di MooTools, cosi come i metodi ad argomento dinamico 'set' e 'get' della classe Element. Utilizzando questi ultimi in combinazione con le keyword 'tween' e 'morph' è possibile impostare rispettivamente un'istanza delle classi Fx.Tween e Fx.Morph e successivamente azionarla tramite i metodi tween e morph della classe Element. Vediamo un esempio:

var el = $('myElement');

// settiamo un'istanza della classe Fx.Tween per il nostro elemento
el.set('tween', {link: 'cancel'});

// azioniamola
el.tween('color', '#ff0', '#f00');

// settiamo un'istanza della classe Fx.Morph per il nostro elemento
el.set('morph', {duration: 4000});

// azioniamola
el.morph({height: 100, width: 200});

Come possiamo vedere, abbiamo a disposizione due modalità differenti per utilizzare le funzionalità di Fx.Tween ed Fx.Morph: tramite i costruttori o tramite i metodi della classe Element.

Non dimentichiamoci inoltre che internamente a MooTools esistono altri due shortcuts, 'fade' e 'highlight', per agire rispettivamente sui valori di opacity e dei colori di sfondo:

// fade
$('myElement').fade('out');

// highlight
$('myElement').highlight('#ddf');

In questa lezione abbiamo imparato a creare le animazioni utilizzando le classi Fx ed i metodi shortcut della classe Element. Nella prossima lezione vedremo come utilizzare le altre 3 classi basate sul costruttore Fx, ovvero Fx.Slide, Fx.Scroll ed Fx.Elements, per vedere quali caratteristiche offrono e come utilizzarle al meglio.