JavaScript: script.aculo.us, Effects

Alla base degli effetti generati da aculous troviamo i moduli JavaScript di Effect (il file effects.js): Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight ed Effect.Parallel. Altri effetti, detti combinati, vengono poi generati dalla combinazione degli effetti elencati sopra! La sintassi per avviare un effetto (invocato da una funzione JavaScript oppure da un evento) è la seguente:

new Effect.NomeEffetto(elemento,param_richiesti,param_opzionali);

Dove:

• elemento: è la stringa che identifica l'id dell'elemento, oppure il riferimento all'oggetto DOM dell'elemento;
• param_richiesti: è una stringa con i parametri attesi dall'effetto, e può non essere presente, dipende dall'effetto;
• param_opzionali: è una stringa di parametri opzionali utile a personalizzare l'effetto invocato;

Nella lista che segue è possibile osservare i parametri che una funzione di effetto può necessariamente richiedere (param_richiesti):

• duration: specifica, in secondi, la durata dell'effetto. Il valore passato di default all'effetto è 1.0;
• fps: specifica il numero di frame per secondi (fps) da applicare all'effetto. Il valore passato di default è 25, .il massimo valore è 100;
• transition: permette di impostare una funzione per il tipo della transizione, descrive come deve avvenire il passaggio dal primo all'ultimo frame dell'animazione (regolando un parametro che va da 0 a 1). Le possibili funzioni sono: Effect.Transitions.sinusoidal (passata di default all'effetto), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ed Effect.Transitions.flicker;
• from: imposta il punto iniziale della transizione;
• to: imposta il punto finale della transizione;
• sync: specifica (con false) se l'effetto deve aggiornare i frame dell'animazione automaticamente (comportamento applicato di default) oppure si deve sincronizzare (con true) con l'istanza di un altro effetto (e usare, quindi, Effect.Parallel);
• queue: permette di specificare con una stringa (che può essere front oppure end) l'ordine dell'effetto all'interno della coda degli effetti;
• delay: imposta il ritardo (in secondi) da applicare alla partenze dell'effetto;
• direction: imposta in che direzione deve avvenire la transizione, può essere: top-left, top-right, bottom-left, bottom-right, e center (il valore di default). Questa proprietà può essere specificata solo per gli effetti Grow e Shrink;

Le proprietà appena viste possono poi essere aggiunte (attraverso funzioni JavaScript) anche al verificarsi di particolari eventi:

• beforeStart: la funzione specificata viene chiamata prima di iniziare l'effetto;
• beforeUpdate: la funzione specificata viene chiamata prima di aggiornare l'animazione dell'effetto;
• afterUpdate: la funzione specificata viene chiamata dopo l'aggiornamento dell'animazione dell'effetto;
• afterFinish: la funzione specificata viene chiamata al termine dell'effetto;

Per finire, ogni oggetto che sintetizza un effetto è accompagnato dalla seguente lista di variabili:

• effect.element: elemento a cui è applicato l'effetto;
• effect.options: la lista delle opzioni date all'effetto;
• effect.currentFrame: il numero di frame già visualizzati;
• effect.startOn: il tempo (in ms) che è passato dall'avvio dell'effetto;
• effect.finishOn: il tempo (in ms) che manca al termine dell'effetto;
• effect.effects[]: contiene l'array degli effetti;

Nei prossimi articoli osserveremo da vicino i principali effetti della libreria!