JavaScript  »  Guide  »  Guida MooTools 

Da molti definito il miglior framework sulla piazza per creare animazioni di nuova generazione, MooTools contiene un kit molto vasto di strumenti per svolgere al meglio questo compito.

Il tutto ruota attorno alla superclasse Fx, che contiene opzioni, proprietà e metodi di base che vengono condivisi ed estesi da tutte le classi per gli effetti. Vediamo subito le opzioni che abbiamo a disposizione quando creiamo un effetto:

• duration: la durata in ms dell'effetto o una stringa tra le seguenti: 'short', 'normal' e 'long';
• transition: l'equazione che determina l'andamento dell'effetto. Può essere una stringa nella forma 'name[:in][:out]' oppure una delle classi Fx.Transitions;
• link: permette di gestire le chiamate multiple effettuate su di un'istanza di una classe Fx. Vediamo i possibili valori che questa opzione può assumere:
  • cancel: qualsiasi nuova chiamata ha la precedenza, viene interrotta l'animazione corrente ed eseguita quella nuova;
  • ignore: ogni nuova chiamata viene ignorata se l'animazione è in corso;
  • chain: ogni nuova chiamata viene messa 'in coda' ed azionata al completamento della rispettiva precedente animazione;
• fps: i frame per secondo dell'animazione (di default pari a 50);
• unit: indica le unità di misura per gli stili (come 'px', '%' e cosi via).

Tra gli eventi che possiamo azionare (come visto nella lezione dedicata alle Class Extras) troviamo i seguenti:

• start: funzione eseguita quando parte l'animazione;
• complete: funzione eseguita quando termina l'animazione;
• cancel: funzione eseguita quando l'animazione viene manualmente interrotta;
• chainComplete: funzione eseguita quando tutti gli effetti della catena sono stati azionati (da usare con link impostato a 'chain');

Ecco infine la lista dei metodi pubblici che la classe Fx ci offre:

• start: permette di azionare l'animazione. Gli argomenti necessari variano a seconda della classe che si sta utilizzando;
• set: è chiamato ad ogni step dell'animazione, e può essere richiamato manualmente per impostare l'animazione ad un nuovo valore immediatamente, senza transizione;
• cancel: permette di interrompere un'animazione in corso di esecuzione;
• pause: permette di 'stoppare' temporaneamente l'animazione;
• resume: consente di riprendere l'animazione dal punto in cui era stata fermata dal metodo pause.

È bene ricordare che la classe Fx è una superclasse molto astratta e non deve essere utilizzata direttamente per creare le animazioni.

Ora che abbiamo una panoramica completa di tutti gli strumenti da essa fornitiè ora di metterli in pratica tramite le rispettive sottoclassi. Nella successiva lezione vedremo come utilizzare due dei costruttori più utilizzati di tutto il framework: Fx.Tween ed Fx.Morph.

Altri articoli

Altre guide

Altre newsletter