Share
Multe site-uri utilizează acum un fel de animație pentru a face paginile de destinație mai atractive. Din fericire, există multe biblioteci care vă permit să animați elemente pe o pagină web fără a face totul de la zero. În acest tutorial, veți afla despre o astfel de bibliotecă numită mojs.
Biblioteca este foarte ușor de folosit din cauza API-ului său declarativ simplu. Animațiile pe care le puteți crea cu mojs toate vor fi netede și retina gata, astfel încât totul să arate profesional.
Există multe modalități de a include mojs în proiectele dvs. Puteți lua biblioteca din depozitul GitHub. Alternativ, puteți include direct un link către cea mai recentă versiune a bibliotecii din diferite CDN-uri din proiectul dvs..
De asemenea, dezvoltatorii pot instala mojs folosind managerii de pachete, cum ar fi npm și bower, executând următoarea comandă:
npm instalează mo-js bower install mojs
După ce ați inclus biblioteca în proiectul dvs., puteți începe să utilizați diferite module pentru a crea animații interesante.
Acest tutorial se va concentra pe modulul HTML din biblioteca mojs. Acest modul poate fi folosit pentru a anima diferite elemente HTML pe pagina web.
Primul lucru pe care trebuie să-l faceți pentru a anima un element DOM este să creați un mojs html obiect. Puteți specifica selectorul unui element și proprietățile pe care doriți să îl animați în interiorul acestui obiect.
Setarea unei valori pentru el vă va permite să identificați elementul pe care doriți să-l animați utilizând mojs. Puteți stabili valoarea fie ca selector, fie ca nod DOM.
Modulul HTML are câteva atribute predefinite care pot fi folosite pentru animarea diferitelor proprietăți legate de transformare ale unui element DOM. De exemplu, puteți controla animația de traducere a unui element de-a lungul axelor x, y și z prin specificarea valorilor de început și de sfârșit pentru X, y și z proprietăți. De asemenea, puteți roti orice element de-a lungul mai multor axe utilizând funcția angleX, angleY și angleZ proprietăți. Acest lucru este similar cu cel corespunzător rotateX (), rotateY () și rotateZ () transformă în CSS. De asemenea, puteți deplasa un element de-a lungul axei X sau Y cu ajutorul funcției skewX și skewY proprietăţi.
Aplicarea animațiilor de scalare pe diferite elemente este la fel de ușoară. Dacă doriți să scalați un element în ambele direcții, setați pur și simplu o valoare pentru scară proprietate. În mod similar, puteți anima scalarea elementelor de-a lungul diferitelor axe prin stabilirea valorilor corespunzătoare pentru scaleX și scaleY proprietăţi.
Pe lângă toate aceste proprietăți care vă permit să setați valorile inițiale și finale ale animației, există și alte proprietăți care reglează redarea animației. Puteți specifica durata animației folosind durată proprietate. Valoarea furnizată are nevoie de un număr și va seta durata de animație în milisecunde. Dacă doriți să începeți o animație după o anumită întârziere, puteți seta valoarea întârzierii utilizând întârziere proprietate. Ca și cum durată, întârziere de asemenea, se așteaptă ca valoarea sa să fie un număr.
Animațiile pot fi repetate de mai multe ori cu ajutorul repeta proprietate. Valoarea implicită este zero, ceea ce înseamnă că animația va fi redată o singură dată. Setarea la 1 va reda animația de două ori, iar setarea la 2 va reda animația de trei ori. Odată ce animația a finalizat prima iterație, elementul va reveni la starea sa inițială și va începe să animeze din nou (dacă ați setat o valoare pentru repeta proprietate). Această saltare bruscă de la starea finală la starea inițială poate să nu fie dezirabilă în toate cazurile.
Dacă doriți ca animația să se redea după ce a ajuns la starea finală, puteți seta valoarea isYoyo proprietate la Adevărat. Este setat la fals în mod implicit. În cele din urmă, puteți seta viteza la care animația să fie redată utilizând viteză proprietate. Valoarea implicită este 1. Setarea la 2 va reda animația de două ori mai rapidă. În mod similar, setarea la 0.5 va face animația la jumătate din viteză.
Mojs html obiectele pe care le-ați creat nu vor anima elementele respective prin ele însele. Va trebui să apelați Joaca() pe fiecare mojs html animație pe care doriți să o jucați. Iată un exemplu care animă trei cutii diferite folosind toate proprietățile discutate:
Accentsconagua
var htmlA = nou mojs.Html (el: ".a", x: 0: 400, unghiulZ: 0: 720, durata: 1000, repetare: 4, isYoyo: true); var htmlB = noi mojs.Html (el: ".b", x: 400: 0, unghiulY: 0: 360, unghiulZ: 0: 720, durata: 1000, repetați: 4); var htmlC = noi mojs.Html (el: ".c", x: 0: 400, unghiulY: 0: 360, scaleZ: 1: 2, skewX: 1000, repetați: 4, isYoyo: true); document.querySelector (".play") addEventListener ("click", functie () htmlA.play (); htmlB.play (); htmlC.play ();); Nu vă limitați la animarea proprietăților transformate ale unui element. Biblioteca de animații mojs vă permite să animați și alte proprietăți animate CSS. Trebuie doar să vă asigurați că aveți valori inițiale și finale valabile pentru acestea. De exemplu, puteți anima culoarea de fundal a unui element prin specificarea valorilor valide pentru fundal.
Dacă proprietatea CSS pe care doriți să o animați conține o cratimă, puteți elimina cratimă și puteți converti numele proprietății în CamelCase când setați valorile inițiale și finale în interiorul mojs html obiect. Aceasta înseamnă că puteți anima border-radius prin setarea unei valori valide pentru borderRadius proprietate. Exemplul de mai jos ar trebui să clarifice:
var htmlA = noua mojs.Html (el: ".a", x: 0: 400, unghiulZ: 0: 360, fundal: rosu: negru, borderWidth: 10: 20; borderColor: 'negru': 'roșu', borderRadius: 0: '50% ', durata: 2000, repetare: 4, isYoyo: true); document.querySelector (".play") addEventListener ("click", functie () htmlA.play ();); În exemplul de mai sus, culoarea de margine se schimbă de la negru la roșu, în timp ce raza de frontieră animă de la 0 la 50%. Trebuie să rețineți că un număr unic va fi considerat o valoare pixel, în timp ce un număr cu unități ar trebui să fie specificat ca un șir ca '50% '.
Până acum, am folosit un set unic de proprietăți tween pentru a controla redarea diferitelor animații. Acest lucru înseamnă că un element ar lua în același timp să treacă de la x: 0 la x: 200 cum va fi nevoie de scara de la scara: 1 la scara: 2.
Acest lucru nu poate fi un comportament dorit așa cum ați dori întârziere animarea unor proprietăți și controlul acestora durată de asemenea. În astfel de cazuri, puteți specifica parametrii de redare a animației pentru fiecare proprietate din interiorul proprietății obiect propriu-zis.
var htmlA = nouă mojs.Html (el: ".a", x: 0: 400, durata: 1000, repetare: 8, isYoyo: true, unghiY: 0: 360, întârziere: 500, durată: 1000 , repetați: 4, isYoyo: true, unghiulZ: 0: 720, întârziere: 1000, durata: 1000, repetați: 4, isYoyo: true); document.querySelector (".play") addEventListener ("click", functie () htmlA.play ();); Fiecare animație pe care o creați va avea sin.out relaxarea aplicată în mod implicit. Dacă doriți ca redarea în animație să progreseze utilizând o funcție de relaxare diferită, puteți specifica valoarea utilizând funcția easing proprietate. Implicit, valoarea specificată pentru easing este de asemenea utilizat atunci când animația se redă înapoi. Dacă doriți să aplicați o altă relaxare pentru animațiile înapoi, puteți seta o valoare pentru backwardEasing proprietate.
Biblioteca mojs are 11 funcții diferite de relaxare încorporate. Acestea sunt liniar, uşura, păcat, quad, cub, cvartă, cvintă, Expo, Circ, înapoi, și elastic. Relaxarea liniară are doar o variație numită linear.none. Acest lucru are sens deoarece animația va progresa cu aceeași viteză în diferite etape. Toate celelalte funcții de relaxare au trei variații diferite cu în, afară și în afară atașat la sfârșit.
Există două metode pentru a specifica funcția de relaxare pentru o animație. Puteți utiliza fie un șir de caractere elastic.in sau puteți accesa funcțiile de relaxare direct folosind mojs.easing obiect cum ar fi mojs.easing.elastic.inout. În demo-ul CodePen încorporat, am aplicat diferite funcții de relaxare pe fiecare bar, astfel încât lățimea sa se va schimba într-un ritm diferit. Acest lucru vă va oferi o imagine a modului în care viteza de animație diferă cu fiecare relaxare.
var allBoxes = document.querySelectorAll ("caseta"); var animații = array nou (); var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in ',' back.in ',' elastic.in ']; allBoxes.forEach (funcție (cutie, index) var animație = nouă mojs.Html (el: cutie, lățime: 0: 550, durata: 4000, repetare: 8, isYoyo: adevărat, relaxare: easings [index] ); animații.push (animație);); document.querySelector (".play") addEventListener ("click", functie () animations.forEach (functie (anim) anim.play (););); Deoarece dorim doar să schimbăm funcția de relaxare aplicată fiecărei cutii, am creat o buclă pentru a le repeta și apoi să aplice o funcție de relaxare ridicată de la easingurile matrice. Acest lucru previne duplicarea inutilă a codului. Puteți utiliza aceeași tehnică pentru a anima mai multe elemente în care valorile proprietății variază în funcție de un model.
Mojs oferă o mulțime de metode care ne permit să controlam redarea animației pentru diferite elemente odată ce a început deja. Puteți întrerupe animația oricând prin apelarea pauză() metodă. În mod similar, puteți relua orice animație pauzată sunând la relua() metodă.
Animațiile care au fost întrerupte cu ajutorul pauză() va relua întotdeauna din punctul în care ați sunat pauză(). Dacă doriți ca animația să înceapă de la început după ce a fost întreruptă, ar trebui să utilizați Stop() în schimb.
Puteți, de asemenea, să redați animația înapoi folosind playBackward () metodă. Anterior, am folosit viteză proprietate pentru a controla viteza la care mojs a jucat o animație. Mojs are de asemenea un setSpeed () care poate seta viteza de animație în timp ce este încă în desfășurare. În exemplul următor, am folosit toate aceste metode pentru a controla redarea animației pe baza clicurilor pe butoane.
viteza var = 1; var htmlA = noi mojs.Html (el: ".a", unghiZ: 0: 720, borderRadius: 0: '50% ', borderWidth: 10: 100, durata: 2000, repetare: 9999 , este Yoyo: true); document.querySelector (".play") addEventListener ("click", functie () htmlA.play ();); document.querySelector ("pauză"); addEventListener ("clic", funcția () htmlA.pause ();); document.querySelector ("stop") addEventListener ("click", functie () htmlA.stop ();); document.querySelector ("mai rapid") addEventListener ("click", functie () viteza = viteza + 1; htmlA.setSpeed (viteza); document.querySelector viteză); document.querySelector ("mai lent") addEventListener ("click", functie () viteza = viteza / 2; htmlA.setSpeed (viteza); document.querySelector (" viteză); În următorul demo, viteza curentă de redare a animației este afișată în caseta neagră din colțul din stânga jos. Dând clic pe Mai repede va crește viteza curentă cu 1 și dând clic pe Mai lent va reduce la jumătate viteza curentă.
În acest tutorial, am învățat cum să animați diferite elemente DOM pe o pagină Web utilizând modulul HTML în mojs. Putem specifica elementul pe care dorim să-l animăm utilizând fie un selector, fie un nod DOM. Biblioteca vă permite să animați diferite proprietăți de transformare și opacitatea oricăror elemente folosind proprietățile încorporate ale mojs html obiect. Cu toate acestea, puteți anima și alte proprietăți CSS specificând numele utilizând CamelCase notaţie.
JavaScript nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă ține ocupat, de asemenea. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil în piața Envato.
Dați-mi voie să știu dacă există ceva pe care doriți să-l clarificați în acest tutorial. Vom acoperi modulul Shape din biblioteca mojs în tutorialul următor.
