Share
În primul tutorial al seriei Anime.js, ați aflat despre diferite moduri de a specifica elementele țintă pe care doriți să le animați și tipurile de proprietăți CSS și atributele DOM care pot fi animate. Animațiile din tutorialul anterior au fost foarte simple. Toate elementele țintă au fost doar deplasarea unei anumite distanțe sau schimbarea razei de graniță la o viteză fixă.
Uneori, poate fi necesar să animați elementele țintă într-un mod mai ritmic. De exemplu, este posibil să aveți zece elemente diferite pe care doriți să le mutați de la stânga la dreapta, cu o întârziere de 500 ms între începutul animației pentru fiecare element. În mod similar, este posibil să doriți să măriți sau să micșorați durata de animație pentru fiecare element în funcție de poziția sa.
În acest tutorial, veți învăța cum să utilizați Anime.js pentru a activa în mod adecvat animația diferitelor elemente folosind parametrii specifici. Acest lucru vă va permite să controlați ordinea în care se redă o secvență de animație pentru elementele individuale sau pentru toate elementele.
Acești parametri vă permit să controlați durata, întârzierea și relaxarea proprietăților individuale sau a unui grup de proprietăți simultan. durată și întârziere parametrii sunt specificați în milisecunde. Valoarea implicită pentru durată este 1000ms sau 1s.
Aceasta înseamnă că, dacă nu se specifică altfel, orice animație aplicată unui element va fi redată timp de o secundă. întârziere parametrul specifică durata de timp necesară pentru începerea animației după ce ați declanșat deja animația. Valoarea implicită pentru întârziere este 0. Aceasta înseamnă că animațiile vor începe imediat ce sunt declanșate.
Puteți utiliza funcția easing parametru pentru a controla rata la care se joacă o animație pe durata în care este activă. Unele animații încep încet, se ridică ritmul în mijloc și apoi încetinesc din nou la sfârșit. Alții încep într-un ritm bun și apoi încetinesc restul timpului.
Cu toate acestea, în toate cazurile, animația se completează întotdeauna în intervalul de timp specificat cu ajutorul durată parametru. Anime.js oferă o mulțime de funcții de relaxare pe care le puteți aplica elementelor dvs. direct, folosind doar numele lor. Pentru unele funcții de relaxare, puteți seta și o valoare pentru elasticitate parametru pentru a controla cât de mult valoarea unui element bounces înainte și înapoi ca un primăvară.
Veți afla mai multe despre diferite funcții de relaxare din tutorialul final al seriei. Următorul fragment de cod arată cum puteți aplica toți acești parametri diferitelor animații.
var slowAnimation = anime (obiective: ".square", traducere: 250, borderRadius: 50, duration: 4000); var delayAnimation = anime (target: '.square', translateY: 250, borderRadius: 50, întârziere: 800); var cubicAnimation = anime (target: '.square', traducere: 250, borderRadius: 50, durata: 1200, relaxare: 'easeInOutCubic');
După cum puteți vedea, acești parametri pot fi utilizați independent de alți parametri sau în combinație cu aceștia. cubicAnimation are atat durată și easing parametru aplicat la acesta. Dacă durata nu ar fi fost specificată, animația ar fi rulat timp de 1 secundă. Acum, acesta va funcționa timp de 1200 de milisecunde sau 1,2 secunde.
O limitare majoră a parametrilor de proprietate în exemplul de mai sus a fost aceea că toate animațiile elementului țintă vor avea aceleași caracteristici durată, întârziere și easing valorile.
Acest lucru poate sau nu poate fi comportamentul dorit. De exemplu, în loc să traduceți și să modificați raza de graniță a elementului țintă în același timp, este posibil să doriți mai întâi să traduceți elementul țintă și apoi să animați raza de graniță. Anime.js vă permite să specificați diferite valori pentru durată, întârziere, easing și elasticitate parametrii pentru proprietățile individuale. Următorul cod și demonstrație ar trebui să o facă mai clară.
var indiParam = anime (target: '.square', translateY: value: 250, rotire: value: '2.125turn', backgroundColor: value: 'rgb (255,0,0) 400, întârziere: 1500, relaxare: 'liniară', durata: 1500);
În codul de mai sus, toate proprietățile pe care dorim să le animăm au valori diferite. Animația de culori de fundal are o durată de 400 ms, în timp ce animațiile de rotație și traducere utilizează valoarea duratei globale de 1500 ms.
Animația de culori de fundal are, de asemenea, o întârziere, astfel încât orice modificare a culorii începe numai după ce au trecut 1500 de milimetri. roti și translateY proprietățile utilizează valoarea implicită pentru întârziere și easing parametrii pentru că nu am furnizat nici o valoare locală sau globală pentru ei.
Parametrii bazați pe proprietăți sunt de ajutor atunci când doriți să modificați ordinea și durata pentru animarea proprietăților individuale. Cu toate acestea, la fel durată și întârziere vor fi aplicate în continuare pentru proprietăți individuale asupra tuturor elementelor țintă. Parametrii bazați pe parametri vă permit să specificați separat durată, întârziere, elasticitate și easing pentru diferite elemente țintă într-un mod compact.
În acest caz, setați valorile diferiților parametri utilizând funcții în loc de numere. Aceste funcții acceptă trei parametri: ţintă, index, și targetCount. ţintă parametrul stochează referința la elementul țintă curent. index parametrul stochează indexul sau poziția elementului țintă curent. targetCount parametrul stochează numărul total de elemente țintă.
ţintă este util atunci când valorile de animație trebuie să fie setate pe baza unor atribute ale elementului țintă. De exemplu, puteți stoca întârziere, durată sau easing valori pentru un element țintă în atributele de date și apoi accesați-le ulterior.
În mod similar, puteți accesa culoarea de fundal a unui element țintă și apoi să o manipulați pentru a seta o valoare finală unică a culorii pentru elementele individuale. În acest fel, puteți anima toate elementele pentru a avea o culoare de fundal cu 20% mai închisă decât culoarea lor curentă.
index parametru vă oferă poziția țintă actuală în lista noastră de elemente țintă. Puteți să-l utilizați pentru a schimba treptat valoarea pentru parametri, cum ar fi durată și întârziere pentru diferite elemente.
Acest lucru este, în general, util atunci când doriți să setați valorile în ordine crescătoare. De asemenea, puteți scădea index de la targetCount pentru a seta valorile în ordine descrescătoare. Următorul fragment de cod utilizează ambii acești parametri pentru a specifica valorile în ordine ascendentă și descendentă.
var delaySequence = anime (target: '.square', translateY: 250, delay: functie (target, index) return index * 200;); var delaySequenceR = anime (target: '.square', translateY: 250, întârziere: funcție (target, index, targetCount) return (targetCount - index) * 200;);
Următorul cod stabilește un altul easing pentru fiecare element țintă utilizând index parametru.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var usernameInSequence = anime (target: '.square', translateY: 250, duration: 2000, relaxare: function (target, index) retur easeInValues [index]; autoplay: false);
Acest ultim set de parametri vă permite să specificați numărul de repetări ale unei animații și direcția în care ar trebui să fie redată. Puteți specifica de câte ori ar trebui să fie redată o animație utilizând buclă parametru. Există, de asemenea, un Redare automata care poate fi setat la Adevărat sau fals. Valoarea implicită este Adevărat, dar puteți opri animațiile să pornească de la ei înșiși prin setarea lor fals.
direcţie parametrul controlează direcția în care este redată animația. Poate avea trei valori: normal, inversa, și alterna. Valoarea implicită este normal, care ține animația să joace în mod normal de la valorile de pornire la valorile finale. Odată ce elementele țintă ating valoarea finală, dacă buclă valoarea este mai mare decât 1, elementele țintă se reîntors brusc la valorile de start și apoi încep animația din nou.
Cand direcţie este setat sa inversa si buclă valoarea este mai mare decât 1, animația devine inversată. Cu alte cuvinte, elementele țintă încep animația din starea lor finală și merg înapoi pentru a ajunge la starea inițială. Odată ce se află în starea inițială, elementele sară înapoi la starea finală și apoi încep din nou animația inversă. alterna valoarea direcției modifică direcția de animație după fiecare buclă.
var normalLoop = anime (target: '.square', translateY: 250, întârziere: funcție (țintă, index) index de întoarcere * 200;, buclă: 4, relaxare: 'easeInSine', autoplay: false);
În următoarea demo, am setat numărul de bucle la patru, astfel încât să puteți observa cu ușurință diferența de animație a elementelor în diferite moduri.
În acest tutorial, ați aflat despre diferite tipuri de parametri care pot fi utilizați pentru a controla animația elementelor țintă în Anime.js. Parametrii de proprietate sunt utilizați pentru a controla animația proprietăților individuale.
Puteți să le folosiți pentru a controla secvența în care este redată animația pentru elementele individuale. Parametrii funcției vă permit să controlați calendarul și rata de animație pentru elementele individuale în raport cu întregul grup. Parametrii de animație vă permit să controlați modul în care animația în sine este jucată pentru diferite elemente.
Dacă aveți întrebări legate de acest tutorial, vă rugăm să anunțați-mă în comentarii.
Accentsconagua