Share
Anime.js este o bibliotecă animată bazată pe JavaScript. Puteți să-l utilizați pentru a anima diferite proprietăți CSS, atribute SVG sau DOM pe o pagină Web. Biblioteca vă permite să controlați toate aspectele animației și oferă numeroase moduri de a specifica elementele pe care doriți să le vizați sau proprietățile pe care doriți să le animați.
Aveți control complet asupra secvenței în care sunt redate animațiile sau despre modul în care sunt sincronizate animațiile diferitelor elemente în raport cu celelalte. Biblioteca acceptă toate browserele moderne, inclusiv IE10+.
În această serie de tutori, veți afla despre toate caracteristicile Anime.js, astfel încât să le puteți utiliza în proiecte reale cu ușurință.
Înainte de scufundări adânc în subiect, să instalăm mai întâi biblioteca. Puteți folosi oricare dintre ele NPM sau umbrar pentru a efectua instalarea, executând următoarele comenzi:
npm instalează animații bower instalează animații
De asemenea, puteți să descărcați biblioteca și să o includeți în proiect sau să vă conectați direct la cea mai recentă versiune a bibliotecii găzduită pe un CDN.
După o instalare reușită, sunteți gata să utilizați această bibliotecă pentru a adăuga animații interesante elementelor dvs. Vom începe cu elementele de bază ale bibliotecii, concentrându-ne pe o anumită zonă la un moment dat.
Pentru a crea animații folosind Anime.js, va trebui să apelați anime () și treceți un obiect cu perechi cheie-valoare care specifică elementele țintă și proprietățile pe care doriți să le animați, printre altele. Puteți utiliza funcția obiective cheie pentru a spune Anime.js ce elemente doriți să animați. Această cheie poate accepta valori în diferite formate.
Selectori CSS: Puteți trece unul sau mai mulți selectori CSS ca valoare pentru obiective cheie.
var albastru = anime (target: ".blue", translateY: 200); var redBlue = anime (target: '.red, .blue', translateY: 200); var even = anime (țintă: ".square: nth-child (even)", traducere: 200); var notRed = anime (țintă: ".square: nu (.red)", translateY: 200);
În primul caz, Anime.js va anima toate elementele cu un albastru clasă. În al doilea caz, Anime.js va anima toate elementele fie cu roșu sau albastru clasă. În cel de-al treilea caz, Anime.js va anima toți copiii cu același a pătrat clasă. În ultimul caz, Anime.js va anima toate elementele cu a pătrat clasa care nu are a roșu clasă.
DOM Nod sau NodeList: De asemenea, puteți utiliza un nod DOM sau un NodeList ca valoare pentru obiective cheie. Iată câteva exemple de setare obiective ca un nod DOM.
Accentsconagua
var special = anime (target: document.getElementById ('special'), translateY: 200); var albastru = anime (target: document.querySelector ("albastru"), translateY: 200); var redBlue = anime (target: document.querySelectorAll ("roșu, .blue"), traducere: 200); var even = anime (target: document.querySelectorAll ("pătrat: nth-child (even)"), translateY: 200); var notRed = anime (țintă: document.querySelectorAll ("pătrați: nu (.red)"), translateY: 200);În primul caz, am folosit getElementById () pentru a obține elementul nostru special. querySelector () funcția este folosită pentru a obține primul element care are clasa albastră. querySelectorAll () funcția este utilizată pentru a obține toate elementele din document care se potrivesc cu grupul selectat de selectori.
Există și multe alte funcții pe care le puteți utiliza pentru a selecta elementele țintă pe care doriți să le animați. De exemplu, puteți obține toate elementele cu un anumit nume de clasă folosind getElementsByClassName () funcţie. În mod similar, puteți obține, de asemenea, toate elementele cu un nume de etichetă dat utilizând getElementsByTagName () funcţie.
Orice funcție care returnează un nod DOM sau un NodeList poate fi folosită pentru a seta valoarea lui obiective cheia în Anime.js.
Obiect: De asemenea, puteți utiliza un obiect JavaScript ca valoare pentru obiective cheie. Cheia obiectului respectiv este utilizată ca identificator, iar valoarea este folosită ca număr care trebuie animat.
Apoi puteți afișa animația în interiorul unui alt element HTML cu ajutorul JavaScript suplimentar. Iată codul care animă valorile a două chei diferite ale unui obiect.
fișiere varScanate = număr: 0, infectate: 0; var scanning = anime (destinații: fișiere scanate, număr: 1000, infectate: 8, rotunde: 1, actualizare: funcție () var scanCount = document.querySelector (' ; var infectedCount = document.querySelector ("infected-count"); infectedCount.innerHTML = filesScanned.infected;);Codul de mai sus va anima numărul fișierelor scanate de la 0 la 1.000 și fișierele infectate vor fi numărate între 0 și 8. Rețineți că puteți anima numai valori numerice în acest fel. Încercarea de a anima o cheie de la 'AAA' la 'BOY' va duce la o eroare.
De asemenea, am folosit o funcție de apel invers pentru Actualizați cheia care este apelată pe fiecare cadru în timp ce animația rulează. Am folosit-o aici pentru a actualiza numărul de fișiere scanate și infectate. Cu toate acestea, ați putea merge mai departe și arătați utilizatorilor un mesaj de eroare atunci când numărul de fișiere infectate depășește un anumit prag.
mulțime: Abilitatea de a specifica o matrice JavaScript ca țintă vine la îndemână atunci când trebuie să animați o mulțime de elemente care se încadrează în diferite categorii. De exemplu, dacă doriți să animați un nod DOM, un obiect și o grămadă de alte elemente bazate pe selectori CSS, puteți face acest lucru cu ușurință, punându-le pe toate într-o matrice și apoi specificând acea matrice ca valoare pentru obiective cheie. Exemplul de mai jos ar trebui să clarifice:
var multipleAnimații = anime (target: [document.querySelectorAll ('. blue'), '.red, #special'], translateY: 250);Acum că știți cum să specificați diferite elemente pe care doriți să le animați, este timpul să aflați despre toate proprietățile și atributele care pot fi animate utilizând biblioteca.
Proprietăți CSS: Anime.js vă permite să animați o mulțime de proprietăți CSS, cum ar fi lățimea, înălțimea și culoarea, pentru diferite elemente țintă. Valorile finale ale diferitelor proprietăți animabile, cum ar fi culoarea de fundal și lățimea marginilor, sunt specificate utilizând o versiune de caz de cămilă a respectivei proprietăți. Prin urmare, culoarea de fundal devine culoare de fundal, și lățimea frontierei devine lățimea graniței. Următorul fragment de cod arată cum să animați poziția din stânga și culoarea de fundal a unui element țintă în Anime.js.
var animateLeft = anime (target: '.square', stânga: '50% '); var animateBackground = anime (target: '.square', backgroundColor: '# f96');
Proprietățile pot accepta tot felul de valori pe care le-ar fi acceptat atunci când sunt utilizate în CSS obișnuit. De exemplu, proprietatea stânga ar putea fi setat la 50vh, 500px, sau 25em. De asemenea, ați putea specifica valoarea ca fiind un număr gol. În acest caz, numărul va fi convertit la o valoare pixel. În mod similar, culoarea de fundal ar putea fi specificată ca valoare de culoare hexazecimală, RGB sau HSL.
CSS se transformă: De asemenea, puteți anima diferite proprietăți de transformare CSS folosind Anime.js. Traducerea de-a lungul axelor x și y poate fi realizată utilizând translateX și translateY proprietăți. În mod similar, este posibilă scalarea, înclinarea sau rotirea unui element de-a lungul unei axe specifice prin utilizarea funcției scară, oblic și roti proprietate corespunzătoare acelei axe specifice.
Puteți specifica unghiuri diferite fie în termeni, grade, fie în termeni de viraj. Valoarea de 1 viraj este egală cu 360 °. Acest lucru poate face mai ușor calcularea atunci când știți cât doriți să transformați elementele în ceea ce privește rotațiile complete. Următorul exemplu arată modul de animare a scalării, traducerii sau rotirii unui element pe o bază individuală, precum și toate simultan.
var animateScaling = anime (target: '.square', scale: 0.8); var animateTranslation = anime (target: '.square', translateX: window.innerWidth * 0.8); var animateRotație = anime (target: '.square', rotate: '1turn'); var animateAll = anime (target: '.square', scară: 0.8, translateX: window.innerWidth * 0.8, rotate: '1turn');
Atributele SVG: Este posibil să animați atribute ale diferitelor elemente SVG folosind Anime.js. Singura condiție este că valoarea acestor atribute trebuie să fie numerică. Această abilitate de a anima diferite atribute deschide posibilitatea creării unor efecte foarte reci. Din moment ce începeți să învățați despre Anime.js, vom păstra exemplele din acest tutorial foarte simplu.
Pe măsură ce avansăm, veți învăța cum să creați animații mai complexe. Iată codul de animat cx, cy și accident vascular cerebral lățime atribute ale unui cerc. La fel ca proprietățile CSS, trebuie să utilizați o versiune de caz de cămilă accident vascular cerebral lățime pentru ca codul să funcționeze.
var animateX = anime (obiective: '.circle', cx: window.innerWidth * 0.6); var animateStrokeWidth = anime (target: '.circle', strokeWidth: '25');
Atribute DOM: De asemenea, puteți anima atributele numerice DOM la fel cum ați animat atributele SVG. O situație în care animarea unui atribut DOM poate fi utilă este elementul de progres HTML5. Acest element are două atribute, valoare și max. În exemplul nostru, vom anima atributul valoare pentru a arăta progresul procesului nostru de transfer de fișiere. Iată codul de animat valoare atribut.
var animateProgress = anime (obiective: 'progres', valoare: 100, relaxare: 'linear');
În acest tutorial, ați aflat despre toate modurile de selectare a elementelor țintă în Anime.js și cum să animați diferite proprietăți CSS și atribute legate de ele. În acest moment, nu controlăm nimic legat de animația reală.
JavaScript este argumentabil limba web. Nu este fără curbele sale de învățare, desigur, și există o mulțime de cadre și biblioteci care să vă țină ocupați, după cum puteți spune. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.
În următorul tutorial al seriei, veți învăța cum să controlați relaxarea, întârzierea și durata animației pentru diferite proprietăți, atât ca grup cât și individual. Veți învăța apoi să controlați toți acești parametri de animație pentru elementele individuale.
.
