| Animazioni |
 |
 |
|
Dopo aver visto come creare effetti di fading ed effetti di sliding proviamo a creare effetti di maggiore rilevanza: delle vere e proprie animazioni. In questa guida infatti tramite parametri opportuni si potranno modificare più attributi CSS ed inserire ulteriori effetti rispetto a quelli visti precedentemente. Il risultato sarà avere una struttura grafica molto più accattivante e completa, completamente e facilmente configurabile dall'utente. Come per gli altri effetti grafici incontrati anche qui abbiamo un metodo che jQuery ci fornisce ed al quale noi dobbiamo solamente impostare i parametri giusti (lavorando anche un po di fantasia sui valori). Ci tengo a ribadire che se jQuery non mettesse a disposizione questo metodo, soprattutto per creare queste animazioni, sarebbe molto complesso e necessiterebbero moltissime righe di codice JavaScript per ottenere un risultato equivalente. Il metodo che jQuery ci offre è, ovviamente, animate(), che ha due modalità di implementazione, ovvero due differenti sintassi: animate (params, [duration], [easing], [callback])Questa implementazione fornisce all'utente un metodo per manipolare ogni singola proprietà di stile CSS (altezza, larghezza, opacità , font size,....).Le proprietà vengono impostate nell'attributo params, come coppia chiave/valore: non tutte le proprietà possono essere utilizzare, ma solamente quelle che prevedono un valore numerico (attributi con valori letterali come backgroundColor non sono supportati). La chiave da utilizzare, inoltre, deve essere scritta in "camel case", ovvero a gobba: se, ad esempio, l'attributo da modificare è margin-right, la chiave da utilizzare sarà marginRight. I valori che si assegnano sono i valori finali a cui l'attributo dovrà portarsi alla fine dell'animazione. Il calcolo dei valori intermedi per giungere allo stato finale sono calcolati coerentemente con la durata. Il secondo parametro invece è la durata, ovviamente espressa o instringa con le solite diciture "slow", "normal" o "fast" o in formato numerico per evidenziare i millisecondi di ritardo. Se come durata viene data 0, con la nuova versione di jQuery 1.3, non vi è alcun ritardo e l'elemento raggiunge direttamente il suo stato finale. In terzo parametro, easing, invece è una stringa che corrisponde al nome dell'andamento dell'effetto da utilizzare. Per questo parametro però è necessario avere dei plugin altrimenti le uniche 2 scelte possibili integrate in jQuery sono "linear" e "swing". Il quarto parametro invece è la funzione da eseguire al completamento dell'animazione. Vediamo un esempio per chiarire bene gli effetti che si possono ottenere: $("#esegui_1").click(function(){ $("#div_1").animate({ width: "50%", //nuova larghezza opacity: 0.5, //visibile al 50% marginLeft: "0.6in", //spostato a sinistra fontSize: "3em", //aumentato il font size borderWidth: "15px" //aumenta il bordo }, 2000 ); //durata di 2 secondi }); CIAO !!!
Come si può vedere il div iniziale passa gradualmente allo stato finale modficando solo ed esclusivamente le proprietà a noi interessate. Dopo questo breve esempio passiamo all'implementazione successiva di animate(). animate (params, options)Questa implementazione differisce dalla precedente in quanto ha due soli parametri.Il primo parametro sono, come prima, i valori dello stato finale dell'elemento da modificare, i quali sono anche qui nel formato chiave/valore. Il secondo parametro, options, serve per impostare delle opzioni di configurazione dell'animazione. Questo parametro è il cuore di questo metodo, perciò passiamo ad enunciare qualcuna di queste opzioni:
Vediamo quindi un breve esempio: $("#esegui_2").click(function(){ $("#div_2").animate( { width:"50%" }, { queue:false, duration:3000 } ) .animate( { fontSize:"30px" }, 1500 ) .animate( { borderRightWidth:"10px" }, 1500);});
$("#div_3").animate( { width:"50%"}, 3000 ) .animate( { fontSize:"30px" } , 1500 ) .animate( { borderRightWidth:"10px" }, 1500);}); Ciao !!!!
Ciao !!!!
Come si può vedere da questi due esempi, l'uso dell'opzione queue settata a false rende l'animazione più omogenea, in quanto esegue le animazioni insieme. Infatti con il primo pulsante l'animazione che incrementa la larghezza del div e quella che aumenta il font-size, sono eseguite insieme. Solo l'animazione che modifica il bordo è eseguita successivamente. Nell'esempio avviato dal secondo pulsante invece le animazioni sono eseguite una successiva all'altra. Lo stato finale è comunque lo stesso. Quale è meglio ? A seconda di quale effetto e struttura grafica si vuole utilizzare. Con questo ultimo esempio si è chiusa la nostra trattazione sulle animazioni e su come poterle realizzare tramite il metodo animate() fornito da jQuery. Ora resta solamente a voi utenti cerca di creare nuove animazioni combinando e manipolando le proprietà CSS degli elementi. Come si sarà capitò anche per le animazioni il tutto sta nel trovare un buon stato iniziale e un buon stato finale ed impostare la giusta durata. Ovviamente per avere effetti più dettagliati bisogna curare al massimo i dettagli delle singole proprietà ed impostare con precisione lo stato finale: maggiori proprietà si modificano e ovviamente maggiore sarà l'effetto "animato" creato. Inoltre riguardate gli altri effetti grafici che abbiamo introdotto nelle altre guide e provate le più svariate combinazioni. Se volete consigli o ulteriori chiarimenti non esitate a Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo. . |