Share
KUTE.js este un motor de animație bazat pe JavaScript care se concentrează pe performanța și eficiența memoriei în timp ce animă diferite elemente pe o pagină web. Am scris deja o serie despre utilizarea Anime.js pentru a crea animații bazate pe JavaScript. De data aceasta vom afla despre KUTE.js și modul în care îl putem folosi pentru a anima proprietățile CSS, SVG și elemente de text, printre altele.
Înainte de a se arunca în câteva exemple, să instalăm mai întâi biblioteca. KUTE.js are un motor de bază, iar apoi există pluginuri pentru animarea valorii diferitelor proprietăți CSS, atributelor SVG sau textului. Puteți să vă conectați direct la bibliotecă de la CDN-uri populare, cum ar fi cdnjs și jsDelivr.
De asemenea, puteți instala KUTE.js utilizând fie NPM, fie Bower cu ajutorul următoarelor comenzi:
npm instalează --save kute.js bower install --save kute.js
După ce ați inclus biblioteca în proiectele dvs., puteți începe să creați propriile secvențe de animație.
Când creați animația utilizând KUTE.js, trebuie să definiți obiecte tween. Aceste obiecte tween furnizează toate informațiile legate de animație pentru un anumit element sau elemente. Aceasta include elementul însuși, proprietățile pe care doriți să le animați, durata animației și alte atribute, cum ar fi numărul repetat, întârzierea sau offsetul.
Puteți utiliza funcția .la() sau metoda .de la catre() pentru a anima un set de proprietăți CSS de la o valoare la alta. .la() metoda animă proprietățile de la valoarea lor implicită sau valoarea lor calculată / curentă la o valoare finală furnizată. În cazul .de la catre() , trebuie să furnizați atât valorile de animație de pornire, cât și cele de final.
.la() este utilă atunci când nu cunoașteți valoarea curentă sau implicită pentru proprietatea pe care doriți să o animați. Un dezavantaj major al acestei metode este faptul că biblioteca trebuie să calculeze valoarea curentă a tuturor proprietăților prin ea însăși. Acest lucru are ca rezultat o întârziere de câteva milisecunde după ce apelați .start() pentru a începe animația.
.de la catre() vă permite să specificați singuri valorile de animație începând și terminând. Acest lucru poate îmbunătăți marginal performanța animațiilor. Acum, puteți specifica singuri unitățile pentru pornirea și încheierea valorilor și pentru a evita orice surprize în cursul animației. Un dezavantaj de utilizare .de la catre() este că nu veți putea să stivuiți mai multe proprietăți de transformare pe tweens înlănțuite. În astfel de cazuri, va trebui să utilizați .la() metodă.
Ține minte că amândouă .de la catre() și .la() sunt menite să fie utilizate atunci când animați elemente individuale. Dacă doriți să animați mai multe elemente simultan, va trebui să utilizați oricare dintre ele .allTo () sau .allFromTo (). Aceste metode funcționează la fel ca omologii lor cu un singur element și le moștenesc toate atributele. Ei au, de asemenea, un extra ofset atribut care determină întârzierea dintre începutul animației pentru diferite elemente. Acest decalaj este definit în milisecunde.
Iată un exemplu care animă opacitatea a trei casete diferite în ordine.
Următorul cod JavaScript este folosit pentru a crea secvența de animație de mai sus:
Accentsconagua
var theBoxes = document.querySelectorAll ("caseta"); var startButton = Document.querySelector ("Start"); var animateOpacitate = KUTE.allFromTo (Boxurile, opacity: 1, opacity: 0.1, offset: 700); startButton.addEventListener ("faceți clic pe", funcția () animateOpacity.start ();, false);Toate casetele de mai sus au o cutie clasa care a fost utilizată pentru a le selecta pe toate folosind querySelectorAll () metodă. allFromTo () în KUTE.js se folosește pentru a anima opacitatea acestor cutii de la 1 la 0,1, cu un decalaj de 700 milisecunde. După cum puteți vedea, obiectul tween nu pornește singură animația. Trebuie să sunați start() pentru a începe animația.
În secțiunea anterioară, am folosit start() pentru a începe animațiile. Biblioteca KUTE.js oferă și câteva alte metode care pot fi utilizate pentru a controla redarea animației.
De exemplu, puteți opri orice animație care este în curs de desfășurare cu ajutorul funcției Stop() metodă. Rețineți că puteți utiliza această metodă pentru a opri animarea numai a acelor obiecte tween care au fost stocate într-o variabilă. Animația pentru orice obiect tween care a fost creat în zbor nu poate fi oprită prin această metodă.
Aveți, de asemenea, opțiunea de a întrerupe doar o animație cu ajutorul funcției pauză() metodă. Acest lucru este util atunci când doriți să reluați animația din nou mai târziu. Puteți folosi fie relua() sau Joaca() pentru a relua orice animație care a fost întreruptă.
Următorul exemplu este o versiune actualizată a demo-ului anterior cu toate cele patru metode adăugate.
Aici este codul JavaScript necesar pentru a adăuga funcțiile de pornire, oprire, redare și întrerupere.
var theBoxes = document.querySelectorAll ("caseta"); var startButton = Document.querySelector ("Start"); var stopButton = Document.querySelector ("Stop"); var pauseButton = document.querySelector ("pauză"); var resumeButton = Document.querySelector ("CV-ul"); var animateOpacitate = KUTE.allFromTo (opțiunile: opacity: 1, opacity: 0.1, offset: 700, duration: 2000); startButton.addEventListener ("faceți clic pe", funcția () animateOpacity.start ();, false); stopButton.addEventListener ("faceți clic", funcția () animateOpacity.stop ();, false); pauseButton.addEventListener ("faceți clic pe", funcția () animateOpacity.pause ();, false); resumeButton.addEventListener ("faceți clic pe", funcția () animateOpacity.resume ();, false); Am schimbat durata animației la 2.000 de milisecunde. Acest lucru ne oferă suficient timp pentru a apăsa diferite butoane și a vedea cum afectează redarea animației.
Puteți utiliza funcția lanţ() metoda de a lanț împreună tweens diferite. Odată ce au fost înlănțuiți tweens, ei sună start() metoda de pe alte tweens dupa animatia lor a terminat.
În acest fel, puteți să jucați diferite animații într-o secvență. Aveți posibilitatea să lanțați diferite tweens unul cu celălalt pentru a le juca într-o buclă. Exemplul următor ar trebui să clarifice:
var animateOpacitate = KUTE.allFromTo (Opțiunile: opacity: 1, opacity: 0.1, offset: 100, duration: 800); var animateRotație = KUTE.allFromTo (Boxurile, rotate: 0, rotate: 360, offset: 250, duration: 800); opacityButton.addEventListener ("faceți clic pe", funcția () animateOpacity.start ();, false); rotateButton.addEventListener ("faceți clic pe", funcția () animateRotation.start ();, false); chainButton.addEventListener ("faceți clic pe", funcția () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("faceți clic", funcția () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);Aveam deja o legătură pentru a anima opacitatea. Am adăugat acum încă unul care animă rotația cutiilor noastre. Primele două butoane animă opacitatea și rotația una câte una. Al treilea buton declanșează legarea lui animateOpacity cu animateRotation.
Înlănțuirea însăși nu pornește animația, așa că folosim de asemenea start() pentru a începe animația de opacitate. Ultimul buton este folosit pentru a lanseze ambele tweens unul cu altul. De data aceasta, animațiile continuă să se joace pe termen nedefinit odată ce au început. Iată un demo CodePen care arată tot codul de mai sus în acțiune:
Pentru a înțelege pe deplin modul în care funcționează legarea, va trebui să apăsați butoanele într-o anumită secvență. Faceți clic pe Animați opacitatea primul buton și veți vedea că animația de opacitate este redată o singură dată și apoi nu se mai întâmplă altceva. Acum, apăsați tasta Animați rotația și veți vedea că cutiile se rotesc o dată și apoi nu se întâmplă nimic altceva.
După aceea, apăsați pe Chain Animations și veți vedea că animația de opacitate joacă mai întâi și, odată ce aceasta își completează iterația, animația de rotație începe să se joace singură. Acest lucru sa întâmplat deoarece animația de rotație este acum legată de animația de opacitate.
Acum, apăsați tasta Animați opacitatea butonul din nou și veți vedea că ambele opacitate și rotație sunt animate în succesiune. Acest lucru se datorează faptului că au fost deja înlănțuiți după ce am făcut clic Chain Animations.
În acest moment, apăsând butonul Animați rotația butonul va anima numai rotația. Motivul pentru acest comportament este că am legat doar animația de rotație la animația de opacitate. Aceasta înseamnă că casetele vor fi rotite de fiecare dată când opacitatea este animată, dar o animație de rotație nu înseamnă că opacitatea va fi animată și.
În cele din urmă, puteți face clic pe Joacă într-o buclă buton. Acest lucru va lărgi ambele animații unul cu celălalt, iar odată ce se va întâmpla, animațiile vor continua să joace într-o buclă nedeterminată. Acest lucru se datorează faptului că sfârșitul unei animații declanșează începutul celeilalte animații.
În acest tutorial introductiv KUTE.js, ați învățat despre elementele de bază ale bibliotecii. Am început cu instalarea și apoi am trecut pe diferite metode care pot fi folosite pentru a crea obiecte tween.
De asemenea, ați învățat cum să controlați redarea unei animații și cum să îmbinați împreună tweens diferite. Odată ce înțelegeți în întregime înlănțuirea, veți putea să creați câteva animații interesante utilizând această bibliotecă.
În următorul tutorial al seriei, veți învăța cum să animați diferite tipuri de proprietăți CSS utilizând KUTE.js.
