Share
L'animazione, se applicata con cura, può migliorare le interfacce del sito Web e, in definitiva, l'esperienza utente di un sito web. In questo tutorial, esamineremo VelocityJS, un motore di animazione JavaScript per animazioni rapide. VelocityJS è diventato una delle mie preferenze quando si tratta di animazione sul web, le ragioni sono, a mio parere:
Accentsconagua
RunSequence è un metodo di VelocityJS che possiamo usare per eseguire sequenze di animazione consecutivamente. È un approccio più elegante che concatenare le funzioni di animazione, come in jQuery. Farlo solo con i CSS non è pratico.In questo tutorial illustreremo gli elementi essenziali per realizzare animazioni con VelocityJS. Evidenzieremo anche alcune funzionalità che potrebbero migliorare il nostro design dell'interfaccia utente. Quindi, iniziamo!
Con jQuery, assumendo vorremmo far scorrere a div a destra, scriveremmo qualcosa come:
$ ("div"). animate (left: "500px",, duration: 3000, easing: "linear"); Quasi nello stesso modo, lo scriveremo in questo modo con VelocityJS:
$ ("div"). velocity (left: "500px",, duration: 3000, easing: "linear"); Entrambi gli esempi sposteranno il div di 500px a destra per tre secondi osservando l'elemento sinistra proprietà. La differenza visibile nella sintassi è il metodo utilizzato per animare l'elemento, VelocityJS utilizza .velocità() invece di jQuery .animare().
Si può anche notare la discrepanza di prestazione. L'animazione jQuery a volte sembra un po 'traballante, mentre VelocityJS funziona come un burro dall'inizio alla fine. Provaci:
VelocityJS accetta un numero di proprietà CSS e una versione a mano lunga per manipolare l'elemento. Possiamo utilizzare queste proprietà insieme in una singola istanza di VelocityJS per eseguire un'animazione sofisticata. Per esempio:
$ ("div"). velocity (borderRadius: "25px", larghezza: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", colore: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, easing: "easeInQuad"); In questo secondo esempio, abbiamo trattato il div con diverse proprietà CSS, tra cui larghezza per renderlo più piccolo, colore di sfondo, imbottitura, box-ombra, e border-radius per trasformarlo in un cerchio.
Si noti che le proprietà che comprendono due o più parole sono formattate in camelCase formato, seguendo la convenzione di denominazione JavaScript, quindi border-radius diventa borderRadius e così via. Inoltre acceleriamo la durata a soli 350 millisecondi e, questa volta, optiamo per easeInQuad come VelocityJS ha l'easing integrato di jQuery UI.
jQuery fornisce alcuni metodi per eseguire animazioni comuni, come ad esempio .scorrere verso l'alto() e .dissolvenza(), che fanno scomparire gradualmente gli elementi. Quindi non sorprende che anche VelocityJS. VelocityJS fornisce alcune scorciatoie da passare in a .VelocityJS () esempio.
Scriveremo quanto segue per far scorrere un elemento per nascondere il contenuto:
$ ("div"). velocity ("slideUp", duration: 350); Per svanire, scriveremmo:
$ ("div"). velocity ("fadeOut", duration: 350); VelocityJS fornisce anche una scorciatoia chiamata scorrere che potrebbe rivelarsi utile per creare collegamenti che conducono a una particolare sezione della pagina. Il seguente codice presuppone che vogliamo il collegamento, #vai su, per tornare alla parte superiore della pagina quando si fa clic.
var $ up = $ ("# go-up"); $ up.on ("click", function () $ ("body"). velocity ("scroll", duration: 2000, easing: "easeInBack");); Ecco come potrebbe essere:
Un'altra scorciatoia pratica inclusa si presenta sotto forma di inverso. Questo collegamento ci consente di ripristinare l'elemento al suo stato iniziale una volta completata l'animazione. Prendendo l'esempio di scorrimento precedente, possiamo applicare inverso per migliorare le icone delle frecce. Per fare ciò, associamo una nuova istanza di VelocityJS inverso aggiunto, impostando il ciclo continuo opzione a vero.
$ (". icon"). velocity (translateY: "10px", loop: true). velocity ("reverse"); Questo sposterà l'icona di 10px quindi immediatamente torna alla sua posizione iniziale. Come abbiamo anche impostato il ciclo continuo opzione a vero l'animazione si esibirà a tempo indeterminato.
Ulteriori effetti di animazione sono disponibili in UI Pack. Il pacchetto UI è disponibile come plug-in, separatamente dal core VelocityJS. Una volta incluso, avrai accesso a una serie di effetti oltre scorrere verso l'alto, dissolvenza, e scorrere aprendo un potenziale ancora maggiore per costruire interfacce vivaci.
UI Pack offre anche due nuove opzioni: barcollare e trascinare. Il barcollare ci consente di eseguire un singolo effetto, applicato a una matrice di elementi sequenzialmente invece di simultaneamente. Il trascinare opzione, se impostata su true, dà un senso a trascinamento per l'ultimo elemento nella matrice.
Ad esempio, ho creato una barra di navigazione con alcuni menu, uno dei quali ha un sottomenu. Per rendere il sottomenu più coinvolgente, ho applicato due effetti dall'interfaccia utente al barcollare set di opzioni.
Ad un certo punto, potremmo aver bisogno di eseguire animazioni su diversi elementi in sequenza. Per fare ciò, dobbiamo annidare ogni istanza di VelocityJS in ordine, ad esempio:
$ ("# offcanvas"). velocity (translateX: 0, duration: 300,, function () $ (". widgets"). VelocityJS (translateX: 0, opacità: 0, durata: 300,, function () $ ("# close"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););); La funzione precedente eseguirà prima l'animazione di $ corpo, poi $ nav una volta completato, e infine il menu di $. Sfortunatamente, questo non è un approccio elegante, né ideale. Se hai dozzine di animazioni, il codice sarebbe poco pratico da gestire.
Tuttavia, oltre agli effetti di animazione, l'UI Pack viene fornito con un metodo chiamato RunSequence. Questo è progettato proprio per risolvere i nostri problemi di sequenziamento; per impilare ordinatamente le animazioni ed eseguirle nel loro ordine pertinente. Prendendo il codice di cui sopra, potremmo riscriverlo come un oggetto JavaScript con l'elemento selezionato definito all'interno di un e proprietà, le proprietà CSS elencate in a p proprietà, mentre le opzioni di animazione sono impostate in o proprietà.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: durata: 300, e: $ (". widget"), p: translateX: 0, opacità: 0, o: duration: 300, e: $ ("# close"), p: translateY: 0, rotateZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); Ho esteso il codice di cui sopra in un layout funzionante su tela. Daglielo, e dai un'occhiata alla scheda JavaScript per vedere il codice sorgente completo.fffffff
Trovo che VelocityJS sia un'alternativa preferibile all'animazione jQuery e CSS, in particolare quando si tratta di creare interfacce interattive che coinvolgono più animazioni. VelocityJS è facile da usare, ricco di animazioni predefinite e, soprattutto, lo è veloce. Usalo responsabilmente. Come spesso si dice: con grandi caratteristiche derivano grandi responsabilità.
