Share
După ce ați terminat primele trei tutoriale ale seriei, acum ar trebui să fiți foarte confortabil cu multe funcții Anime.js. Primul tutorial vă arată cum să selectați elementele țintă. În cel de-al doilea tutorial, ați aflat despre diferite tipuri de parametri care pot fi utilizați pentru a avea un control fin asupra întârzierii și duratei animațiilor diferitelor elemente. Al treilea tutorial sa axat pe învățarea modului de a avea un control mai mare asupra valorilor unei singure proprietăți pe parcursul animației.
În acest tutorial, veți afla despre diferite callback-uri care pot fi folosite pentru a executa o funcție bazată pe progresul animației. Aproape fiecare exemplu din tutorialele anterioare a folosit proprietățile CSS pentru a demonstra modul în care funcționează diferite metode și parametri. Acest lucru ți-ar fi dat ideea că biblioteca este mai potrivită pentru animarea proprietăților CSS. De data aceasta, vom avea o secțiune dedicată creării de animații interesante despre SVG în Anime.js.
Așa cum am menționat în introducere, aveți posibilitatea să utilizați callbacks pentru a executa funcții bazate pe progresul animației. Există patru apeluri diferite: începe, alerga, Actualizați, și complet. Fiecare funcție de apel invers este lansată la un moment dat și fiecare acceptă un argument de animație ca argument.
începe() este apelată când animația începe efectiv. Aceasta înseamnă că, dacă o animație are o întârziere de 800 ms, începe() va fi chemat numai după ce întârzierea sa încheiat. Puteți verifica dacă o animație a început să se joace sau să nu folosească animationName.begin, care se va întoarce Adevărat sau fals respectiv.
alerga inversarea apelului poate fi utilizată pentru a executa o funcție în fiecare cadru după ce o animație începe de fapt să fie redată. Dacă doriți să executați o funcție în fiecare cadru încă de la începutul animației, indiferent de ea întârziere, ar trebui să utilizați Actualizați invers înapoi.
complet apelul de apel este similar cu începe cu excepția faptului că se numește odată ce animația a terminat de jucat. Ca și cum începe, poți să folosești animationName.complete pentru a verifica dacă o animație a terminat sau nu.
Ați văzut deja în primul tutorial cum să utilizați Actualizați apel invers în timp ce animați valorile numerice ale unui obiect JavaScript. În acest tutorial, vom modifica exemplul respectiv și vom vedea cum să folosim împreună toate aceste apeluri pentru a furniza mai multe informații utilizatorului.
Accentsconagua
fișiere varScanate = număr: 0, infectate: 0; var scanCount = document.querySelector ("scan-count"); var infected = document.querySelector ("infected-count"); var scanning = anime (destinații: fișiere scanate, automat: false, număr: 100, infectate: 8, întârziere: 1000, durata: 2000, relaxare: "liniară" .ora curentă < 1000) document.querySelector(".update-cb").innerHTML = "Creating an Index… "; , begin: function() document.querySelector(".begin-cb").innerHTML = "Starting the Scan… "; , run: function() scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; , complete: function() document.querySelector(".complete-cb").innerHTML = "Scan Complete… "; );Am adăugat în mod intenționat o anumită întârziere în această animație, astfel încât să observăm diferența în momentul executării diferitelor apeluri de apel. Actualizați inversarea apelului începe executarea funcției sale de îndată ce începe animația.
Animația reală începe să se joace după 1000 de mii, și atunci când începe funcția afișează mesajul "Pornirea scanării ..." către utilizator. alerga funcția începe, de asemenea, să execute în același timp și să actualizeze valorile numerice ale obiectului după fiecare cadru. Odată ce animația a terminat, complet callback afișează mesajul "Scanare completă ..." către utilizator.
Funcțiile de relaxare pot fi folosite pentru a controla modul în care valoarea unei proprietăți trece din valoarea inițială la valoarea finală. Aceste funcții de relaxare pot fi specificate utilizând parametrul de relaxare, care poate accepta șiruri precum și coordonatele curbei Bézier personalizate (sub formă de matrice).
Există 31 de funcții de relaxare diferite. Unul dintre ei este liniar, iar celelalte 30 sunt formate din zece variații diferite easeIn, easeOut, și easeInOut. Există trei ecuații elastice de relaxare numite easeInElastic, easeOutElastic, și easeInOutElastic. Puteți controla elasticitatea lor folosind elasticitate parametru. Valoarea a elasticitate poate fi oriunde intre 0 si 1000.
EaseIn ecuațiile accelerează modificarea valorii proprietății pornind de la zero. Aceasta înseamnă că schimbarea valorii va fi lentă la început și foarte rapidă la final. Rata de schimbare este zero la început și maximă la sfârșit. EaseOut ecuațiile decelează modificarea valorii proprietății începând cu modificarea ratei maxime.
Aceasta înseamnă că schimbarea valorii va fi foarte rapidă la început și foarte lentă la sfârșit. EaseInOut ecuațiile accelerează modificarea ratei la început și o decelerează la sfârșit. Aceasta înseamnă că rata de schimbare va fi lentă la început și la sfârșit și va fi mai rapidă în mijlocul animației. Următoarea demonstrație arată diferența în rata de schimbare pentru fiecare dintre aceste funcții de relaxare.
De asemenea, puteți adăuga propriile funcții de relaxare personalizate în lista încorporată cu ajutorul funcției anime.easings. Iată un exemplu de creare a funcțiilor personalizate de relaxare.
anime.easings ['tanCube'] = funcția (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = funcția (t) retur Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (target: '.tan-cube', translateX: '75vw', durata: 2000, relaxare: 'tanCube', autoplay: false); var tanSqrSequence = anime (tinta: '.tan-sqr', translateX: '75vw', durata: 2000, relaxare: 'tanSqr', autoplay: false);
Toate animațiile legate de mișcare pe care le-am creat până acum au mutat elementele țintă în linii drepte. Este, de asemenea, posibil ca în Anime.js să se deplaseze un element de-a lungul unei trasee complexe SVG cu o mulțime de curbe. Puteți controla atât poziția cât și unghiul elementelor de animație de pe cale. Pentru a muta un element în coordonata x a căii, puteți utiliza cale (x). În mod similar, un element poate fi mutat în conformitate cu coordonatele y ale căii folosind cale (y).
Dacă traseul nu este o linie dreaptă, acesta va forma aproape întotdeauna un unghi față de linia de bază orizontală. Dacă rotiți orice element ne-circular, se va simți mai natural dacă elementul urmează unghiul căii. Puteți face acest lucru prin setarea roti proprietate să fie egal cu calea ( „unghi“). Iată codul care animă patru elemente cu valori diferite de relaxare de-a lungul unei căi SVG.
var cale = anime.path ("cale"); var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (target: '.square', translateX: cale ('x'), translateY: cale ('y'), rotate: path easilities [i];, durata: 10000, bucla: true);Puteți vedea în următoarea demo faptul că pătratul roșu cu easeInCubic relaxarea este mai lentă la început și cea mai rapidă la sfârșit. În mod similar, pătratul portocaliu cu easeOutCubic este cel mai rapid la început și cel mai lent la sfârșit.
De asemenea, puteți anima morfingul diferitelor forme SVG într-un altul folosind Anime.js. Singura condiție este ca ambele forme să aibă același număr de puncte. Acest lucru înseamnă că puteți să transformați triunghiurile în alte triunghiuri și quadrilaterals în alte patrulaterale. Încercarea de a transforma între un număr inegal de puncte poligon va duce la o schimbare bruscă a formei. Iată un exemplu de morfing în formă triunghiulară.
var morphing = anime (țintă: 'poligon', puncte: value: '143 31 21 196 286 223', value: '243 31 21 196 286 223', 223 ', value:' 243 31 121 196 386 223 ', value:' 543 31 121 196 386 223 '], relaxare:' linear ', duration: 4000, );
Un efect mai interesant pe care îl puteți crea cu SVG este desenul de linie. Tot ce trebuie să faceți este să dați Anime.js calea pe care doriți să o utilizați pentru desenul de linie și alți parametri care îi controlează durata, întârzierea sau relaxarea. În următorul demo, am folosit complet apel invers pentru a umple desenul liniei pictogramei de ancorare Awesome Font cu o culoare galbenă.
var lineDrawing = anime (target: 'path', strokeDashoffset: [anime.setDashoffset, 0], relaxare: 'easeInOutCubic', duration: 4000, complete: function (anim) document.querySelector "umple", "galben"););
Combinând cunoștințele despre toate conceptele pe care le-ați învățat până acum, puteți crea desene mai complexe, cu mult mai bine, cu un control mult mai bun asupra modului în care sunt desenate. Iată un exemplu în care am scris propriul meu nume folosind SVG.
var letterTime = 2000; var lineDrawing = anime (target: "path", strokeDashoffset: [anime.setDashoffset, 0], relaxare: "easeInOutCubic", duration: letterTime, delay: funcția (anim) var letters = document.querySelectorAll ("calea"), i; pentru (i = 0; i < letters.length; ++i) letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); , update: function(anim) if (anim.currentTime >= letterTime) document.querySelector (".primă-m") setAttribute ("umple", "# e91e63"); dacă (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o") setAttribute ("umple", "# 3F51B5"); dacă (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n") setAttribute ("umple", "# 8BC34A"); dacă (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t") setAttribute ("umple", "# FF5722"); dacă (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y") setAttribute ("umple", "# 795548"); , autoplay: false); Începeți prin atribuirea valorii 2000 variabilei letterTime. Acesta este momentul în care vreau Anime.js să ia în timp ce trage fiecare scrisoare a numelui meu. întârziere proprietatea utilizează parametrul indice bazat pe funcții pentru a seta un parametru corespunzător întârziere valoare cu ajutorul letterTime variabil.
Indicele primei litere "M" este zero, deci Anime.js începe să-l deseneze imediat. Scrisoarea "O" are o întârziere de 2000ms pentru că este timpul necesar pentru a desena complet litera "M".
În interiorul începe callback, am setat accident vascular cerebral valoarea tuturor literelor către negru si al lor completati valori pentru nici unul. În acest fel, putem șterge toate valorile de culoare aplicate în interiorul Actualizați apel invers, astfel încât literele să poată reveni la starea lor inițială atunci când rulează în mai multe bucle. Încercați să faceți clic pe Scrie numele butonul din următoarea demonstrație pentru a vedea codul în acțiune.
În acest tutorial, ați aflat despre diferite funcții de apel invers care pot fi utilizate pentru a efectua activități precum actualizarea DOM sau modificarea valorii unui atribut bazat pe progresul animației. De asemenea, ați învățat despre diferite funcții de relaxare și cum să creați una proprie. Secțiunea finală a tutorialului sa axat pe crearea de animații bazate pe SVG.
După ce ați terminat toate cele patru tutoriale ale seriei, acum ar trebui să aveți cunoștințe suficiente despre Anime.js pentru a crea câteva efecte interesante pentru următorul proiect. Dacă aveți întrebări legate de acest tutorial, vă rugăm să anunțați-mă în comentarii.
