JavaScript  »  Articoli  »  MooTools 

Uno degli aspetti più apprezzati di un framework Javascript è sicuramente la componente che riguarda la creazione e la composizione di effetti.

Nel Web 2.0 gli effetti DHTML sono una delle caratteristiche primarie, quella che permette di dare origine ad applicazioni di nuova generazione. Pensate ad esempio alle liste drag&drop dei siti di e-shopping che consentono di trascinare i prodotti all'interno di un carrello oppure rimuoverli, agli effetti "fade" e "toggle" che agiscono sulle proprietà CSS di un elemento facendolo scomparire/apparire con stile, o ancora all'apparizione di tooltips sulle immagini, allo smooth scrolling e cosi via.

MooTools offre un set completo per la creazione dei più comuni effetti DHTML e tutti gli strumenti necessari per crearne di personalizzati.

Negli articoli precedenti ho esposto parecchi cenni teorici sulle meccaniche di MooTools in modo da fornire le conoscenze necessarie per utilizzare i componenti più avanzati con maggiore dimestichezza. Nella prima parte di questo articolo spiegherò quali costrutti nativi MooTools offre per la creazione di effetti, mentre nella seconda parte la teoria lascierà largo spazio alla pratica: creeremo prima un effetto personalizzato, poi utilizzeremo una classe nativa per creare effetti a catena.

Gli effetti Fx

Il nucleo di effetti offerto da MooTools è basato sull'oggetto Fx, o meglio, sulla sua componente Fx.Base (che nella versione 1.2 verrà semplicmenete rinominata in "Fx"). La classe Fx.Base non deve essere utilizzata direttamente dall'utente, ma serve come wrapper per le altre componenti Fx (contiene metodi per il parsing dei valori CSS e opzioni di default che vengono ereditate) e va quindi sempre inserita nel download se si vogliono utilizzare gli effetti.

Nativamente MooTools ci offre cinque classi per creare effetti di alto livello: Fx.Style, Fx.Styles, Fx.Slide, Fx.Scroll e Fx.Elements (tralasciando tutti i plug-in che ne derivano, come Tips visto nell'articolo MooTools: usare i tooltips, Slider, etc.). Ognuna di esse eredita dal costruttore Fx.Base (http://docs.mootools.net/Effects/Fx-Base.js) le seguenti opzioni:

• onStart - una funzione che viene richiamata quando l'effetto inizia;
• onComplete - una funzione che viene richiamata quando l'effetto termina;
• onCancel - una funzione che viene eseguita quando l'effetto viene interrotto;
• unit - l'unità da utilizzare come valore delle proprietà CSS;
• fps - i frame per secondo;
• duration - la durata in ms dell'effetto;
• transition - l'equazione usata per modificare l'andamento dell'effetto (una delle Fx.Transitions).

Tutte possono essere impostate, utilizzate e personalizzate come abbiamo visto nel precedente articolo MooTools: usare Events e Options.

Vediamo brevemente il compito che ognuna di queste classi svolge.

Altri articoli

Altre guide

Altre newsletter