JAST Egg it

Gestire gli effetti speciali con Jast

Tra i vari Eggs disponibili nel Framework c'è fx.

L'egg fx si occupla della gestione degli effetti speciali, dalla dissolvenza in ingresso a quella in uscita, dallo scrolling di elementi sullo schermo al ridimensionamento alla gestione di code di effetti da applicare in modo sequenziale.

• Consulta le funzioni per la dissolvenza
• Consutla le funzioni per lo scrolling
• Consulta le funzioni per il ridimensionamento
• Consulta le funzioni per la gestione delle code di effetti

Funzioni per la dissolvenza

Le funzioni per la dissolvenza di elementi messe a disposizione dall'egg fx sono tre: _fade, fadeIn e fadeOut.
Mentre la prima è una funzione generica alla quale indicare se eseguire una dissolvenza in entrata o una in uscita, le altre due si occupano nello specifico di eseguire una delle due operazioni, quindi possono essere indicate come semplficatori.

A seguire la sintassi utilizzata per le tre funzioni (supponendo di utilizzare il metodo breve di chiamata a Jast):

	_.fx._fade(id, speed, step, limit, queueIndex);
	
	_.fx.fadeIn(id,speed,limit, step, queueIndex);
	
	_.fx.fadeOut(id,speed,limit, step, queueIndex);

• id: Id dell'elemento che deve essere influenzato dalla dissolvenza
• speed: è la velocità (in millesimi di secondo) che deve intercorrere tra un passo ed un altro della dissolvenza
• limit: è il limite percentuale (compreso tra 0 e 100) che vincolerà la dissolvenza
• step: è un valore intero (compreso tra 1 e 100) per indicare di quanti punti percentua deve essere applicata la dissolvenza ad ogni passo
• queueIndex: è un valore riservato da usare solo in caso di code di effetti

Sulle funzioni di fadeIn e fadeOut, il sistema si preoccupa di trasformare il valore di Step in un valore opportunamente (positivo o negativo).

Funzioni per lo scrolling

Come per la dissolvenza, lo scrolling in Jast è sempre gestito dall'egg fx. Anche per essa esistono una funzione di sistema generica scroll e due funzioni semplificatrici: vscroll che si occupa di eseguire un scrolling sull'asse orizontale e hscroll che si occupa di eseguire uno scrolling sull'asse verticale.

A seguire la sintassi utilizzata per le tre funzioni (supponendo di utilizzare il metodo breve di chiamata a Jast):

	_.fx.scroll(id, speed, step, limit, queueIndex, direction);

	_.fx.vscroll(id, speed, step, limit, queueIndex);

	_.fx.hscroll(id, speed, step, limit, queueIndex);

• id: Id dell'elemento che deve essere mosso sulla pagina
• speed: è la velocità (in millesimi di secondo) che deve intercorrere tra un passo ed un altro dello scrolling
• limit: è il numero di pixel esatto di cui deve essere mosso l'oggetto sullo schermo
• step: è un valore intero (positivo o negativo) per indicare di quanti pixel deve essere spostato l'elemento ad ogni passo
• queueIndex: è un valore riservato da usare solo in caso di code di effetti
• direction: può assumere solo due valori (left o top) indicando quindi la modalità di spostamento

Funzioni per il ridimensionamento

Sempre grazie all'egg fx l'effetto di ridimensionamento di un oggetto a video, risulta di facile implementazione. Infatti come è possibile notare dal codice che segue, con un solo comando è possibile indicare da quale dimensione a quale ridimensionare un oggetto (la sintassi utilizzata mostra il metodo breve di chiamata a Jast):

	_.fx.resize(id, from, to, speed, steps, queueIndex);

• id: Id dell'elemento che deve essere mosso sulla pagina
• from: oggetto strutturato nella forma {width: <dim in pixel>, height: <dim in pixel>} che indicano la dimensione iniziale.
• to: oggetto strutturato nella forma {width: <dim in pixel>, height: <dim in pixel>} che indicano la dimensione finale.
• speed: è la velocità (in millesimi di secondo) che deve intercorrere tra un passo ed un altro
• steps: è il numero totale di step da eseguire per ridimensionare
• queueIndex: è un valore riservato da usare solo in caso di code di effetti
• direction: può assumere solo due valori (left o top) indicando quindi la modalità di spostamento

I parametri from e to possono essere sostituiti da un valore di tipo stringa costante: "original" che identifica le dimensioni che assume al momento della chiamata l'elemento sulla pagina.

Funzioni per la gestione delle code di effetti

Una delle caratteristiche più interessanti dell'egg fx è la possibilità di definire delle liste di effetti da eseguire in cascata su uno o più elementi sulla pagina.

Di seguito verranno elencati tutti i comandi con rispettiva descrizione di funzionamento (la sintassi utilizzata, mostra il metodo breve di chiamata a Jast).

	_.fx.queue(fnList);

Genera una coda di comandi da eseguire in modo sequenziale (termiato il primo si passa al successivo fino all'esaurimento di tutti i comandi presenti nella coda).

• fnList è un array che definisce per ciascun elemento un array di dimensione statica a due elementi così costituito:

  [ <id> , <funzione da eseguire> ]

  • id è l'id dell'elemento sulla pagina a cui è associato il comando specificato come secondo parametro
  • funzione da eseguire è una funzione che prevede una rigorosa sintassi dichiarativa:

    	function nomeDellaFunzione(id, q){
    		/* Corpo della funzione */
    	}
    

	_.fx.queueDone( index );

Forza un passaggio della coda allo stato eseguito

• index è l'indice nella coda.

	_.fx.queueCommandFromIdx( index );

Ciascun effetto in coda è immagazzinato in un array, tramite questa funzione è possibile ottenere l'indice nella coda a partire dall'indice dell'effetto associato ad un elemento.
L'indice restituito corrisponde al primo elemento della coda in esecuzione o ancora da eseguire che sia associato all'effetto segnato da index.
Nota: Verrà restituito il valore -1 se al momento della chiamata tutti gli effetti associati all'indice index risultano già eseguiti oppure se non viene trovato alcun effetto associato. stati già eseguiti.

• index: indice dell'effetto

	_.fx.queueCommandFromElement( element );

Esegue la stessa operazione di queueCommandFromIdx ma passando un elemento del DOM come parametro.

	_.fx._isPaused( element );

Controlla se l'elemento del DOM passato come parametro è in uno stato di pausa.
La funzione restituisce true se lo è in qualsiasi altro caso restituisce false