Share
Animația, atunci când este aplicată cu grijă, poate îmbunătăți interfețele site-ului web și, în cele din urmă, experiența utilizatorului unui site web. În acest tutorial, vom examina VelocityJS, un motor de animație JavaScript pentru animații rapide de performanță. VelocityJS a devenit una dintre preferințele mele atunci când se ocupă de animație pe web, motivele fiind, după părerea mea:
Accentsconagua
RunSequence este o metodă în VelocityJS pe care o putem folosi pentru a efectua stive de animație consecutiv. Este o abordare mai elegantă decât funcțiile de animație în lanț, ca în jQuery. A face acest lucru exclusiv cu CSS este impracticabilă.În acest tutorial vom trece prin elementele esențiale pentru realizarea de animații cu VelocityJS. Vom sublinia, de asemenea, câteva caracteristici care ar putea îmbunătăți designul interfeței cu utilizatorul. Deci, hai să începem!
Cu jQuery, presupunând că ne-ar plăcea să alunecăm a div la dreapta, scriem ceva de genul:
$ ("div"). animați (stânga: "500px",, duration: 3000, relaxare: "liniară"); Aproape în același mod, l-am scrie astfel cu VelocityJS:
$ (div ")) viteza (stânga:" 500px ",, duration: 3000, relaxare:" linear ");
Ambele exemple vor muta div de 500px la dreapta timp de trei secunde prin observarea elementului stânga proprietate. Diferența vizibilă în sintaxă este metoda utilizată pentru animarea elementului, utilizată de VelocityJS .viteză() în loc de jQuery .anima().
De asemenea, puteți observa discrepanța de performanță. jQuery animație, uneori, se simte un fel de shaky, în timp ce VelocityJS rulează ca unt de la început până la sfârșit. Încearcă:
VelocityJS acceptă un număr de proprietăți CSS, precum și versiunea lor de lungă durată pentru a manipula elementul. Putem folosi aceste proprietăți împreună într-o singură instanță VelocityJS pentru a realiza o animație sofisticată. De exemplu:
("border": "# 8CC152", culoare: "#fff", borderColor: "" "# 8CC152", boxShadowX: "0", boxShadowY: "0", durata: 350, relaxare: "easeInQuad"); În acest al doilea exemplu, am tratat div cu mai multe proprietăți CSS, inclusiv lăţime să-l micșoreze, culoare de fundal, umplutură, box-shadow, și border-radius pentru ao transforma într-un cerc.
Observați că proprietățile care conțin două sau mai multe cuvinte sunt formatate în CamelCase format, urmând convenția de numire a JavaScript, prin urmare border-radius devine borderRadius si asa mai departe. De asemenea, accelerăm durata la doar 350 milisecunde și, de această dată, optăm easeInQuad deoarece VelocityJS are jQuery UI de relaxare built-in.
jQuery oferă câteva metode pentru a efectua animații comune, cum ar fi .glisați în sus() și .fadeOut (), care fac elemente să dispară treptat. Asa ca nu este o surpriza ca VelocityJS prea. VelocityJS oferă câteva comenzi rapide pentru a trece într-un .VelocityJS () instanță.
Vom scrie următoarele pentru a glisa un element pentru a ascunde conținutul:
$ ("div") viteza ("slideUp", duration: 350); Pentru a ieși, vom scrie:
$ ("div") viteza ("fadeOut", duration: 350); VelocityJS oferă, de asemenea, o comandă rapidă numită sul care ar putea fi utile pentru crearea de linkuri care să ducă la o anumită secțiune de pe pagină. Următorul cod presupune că vrem linkul, #dute sus, pentru a vă deplasa înapoi în partea de sus a paginii când ați făcut clic.
var $ up = $ ("# go-up"); $ up.on ("click", functie () $ ("body") viteza ("scroll", duration: 2000, relaxarea: easeInBack); Iată ce ar putea să arate:
O altă comandă rapidă la îndemână vine în formă de inversa. Această comandă rapidă ne permite să revenim la starea inițială după finalizarea animației. Luând exemplul de defilare precedent, putem aplica inversa pentru a mări pictogramele săgeată. Pentru a face acest lucru, lanțăm o nouă instanță VelocityJS inversa adăugat, setarea buclă opțiunea pentru Adevărat.
$ (". icon") viteza (translateY: "10px", loop: true) viteza ("inversa"); Aceasta va muta pictograma în jos 10px apoi imediat înapoi în poziția sa inițială. După cum am setat și buclă opțiunea pentru Adevărat animația se va desfășura pe o perioadă nedeterminată.
Mai multe efecte de animație sunt disponibile în UI Pack. Pachetul UI este disponibil ca plugin, separat de miezul VelocityJS. Odată ce l-ați inclus, veți avea acces la o serie de efecte dincolo glisați în sus, fadeOut, și sul deschizând un potențial mai mare pentru construirea de interfețe pline de viață.
UI Pack aduce, de asemenea, două noi opțiuni: clătina și trage. clătina ne permite să realizăm un singur efect, aplicat unei game de elemente secvențial în loc de simultan. trage opțiunea, atunci când este setată la adevărat, oferă un sentiment de trăgându- pentru ultimul element din matrice.
De exemplu, am creat o bară de navigare cu câteva meniuri, dintre care unul are un submeniu. Pentru ca submeniul să devină mai atrăgător, am aplicat două efecte din UI Pack cu clătina opțiunea setată.
Într-un anumit moment, este posibil să fie nevoie să efectuăm în mod succesiv animații pe diferite elemente. Pentru a face acest lucru, trebuie să costicem fiecare instanță VelocityJS, de exemplu:
(translateX: 0, opacitate: 0, duration: (translateX: 0, duration: 300,, funcția () $ ("# close"). Funcția de mai sus va efectua mai întâi animația $ corp, atunci $ nav odată ce este completă, și în cele din urmă meniu $. Din păcate, aceasta nu este o abordare elegantă, nici ideală. Dacă aveți zeci de animații, codul ar fi imposibil de gestionat.
Cu toate acestea, în plus față de efectele de animație, UI Pack vine cu o metodă numită RunSequence. Acest lucru este conceput precis pentru a rezolva problemele noastre de secvențiere; pentru a stivui animațiile cu ușurință și pentru a le executa în ordinea lor relevantă. Luând codul de mai sus, l-am putea rescrie ca un obiect JavaScript cu elementul selectat definit într-un e proprietăți, proprietățile CSS enumerate într - un p proprietate, în timp ce opțiunile de animație sunt setate în o proprietate.
var animationSequence = e: $ ("# offcanvas"), p: translateX: 0, o: duration: 300 p: translateX: 0, opacity: 0, o: durata: 300, e: $ ("# close"), p: translateY: 0, rotateZ: 0, o: durata: 150; $ .Velocity.RunSequence (animationSequence); Am extins codul de mai sus într-un aspect funcțional în afara panzei. Dați-le în urmă și verificați fila JavaScript pentru a vedea codul sursă complet .fffffff
Consider ca VelocityJS este o alternativa preferata pentru animatia jQuery si CSS, mai ales cand vine vorba de construirea de interfete interactive care implica mai multe animatii. VelocityJS este ușor de folosit, plin de animații pre-construite și, mai presus de toate, este rapid. Utilizați-l cu responsabilitate. Așa cum se spune adesea: cu trăsăturile mari vin o mare responsabilitate.
