Share
În tutorialul anterior al seriei Anime.js, ați învățat despre diferite tipuri de parametri care controlează modul în care trebuie animate diferite elemente țintă. De asemenea, ați învățat cum să utilizați parametrii funcției pentru a schimba treptat întârzierea sau durata elementelor.
În acest tutorial vom merge un pas mai departe și vom învăța cum să specificăm propriile valori ale proprietăților folosind numere regulate, valori bazate pe funcții și cadre cheie. Veți învăța, de asemenea, cum să redați în mod succesiv animațiile folosind liniile de timp.
Anime.js vă permite să specificați valorile finale sau finale pentru proprietățile animabile ale elementelor țintă. Valoarea inițială sau de pornire pentru animație este valoarea implicită a acelei proprietăți. Orice valoare specificată în CSS poate acționa și ca valoare de pornire. Există mai multe modalități de specificare a unei valori finale.
Poate fi și un număr unitar. În acest caz, unitățile originale sau implicite ale proprietății sunt utilizate în timpul calculării oricăror valori ale proprietății. De asemenea, puteți specifica valoarea ca șir, dar șirul trebuie să conțină cel puțin o valoare numerică. Exemple de valori de șir ar fi 10vh, 80%, și 9.125turn.
În loc să specificați o valoare absolută, puteți să specificați valorile proprietăților relative la valoarea lor curentă. De exemplu, puteți seta definiția translateY valoare pentru a fi 150px mai mare decât valoarea curentă folosind += 150px ca valoare. Rețineți că puteți utiliza numai adunarea, multiplicarea și scăderea în timp ce specificați valorile relative.
În timp ce animați culorile, nu puteți utiliza nume de culori cum ar fi roșu, negru și albastru pentru a seta o valoare finală a culorii pentru animație. În astfel de cazuri, animația de culoare nu se va întâmpla deloc, iar schimbarea va fi instantanee. Singura modalitate de a anima culorile este să specificați valorile fie ca cifre hexazecimal, fie ca valori RGB și HSL.
Așa cum ați fi observat, nu am specificat o valoare inițială pentru elementele țintă pentru a le anima. Anime.js determină automat valoarea inițială bazată pe CSS-ul nostru și valorile implicite ale acestor proprietăți. Cu toate acestea, puteți specifica o valoare inițială diferită de valoarea implicită pentru o proprietate folosind matrice. Primul element din matrice semnifică valoarea inițială, iar al doilea element semnifică valoarea finală.
În loc să utilizați aceeași valoare finală pentru toate elementele țintă, puteți utiliza funcții pentru a seta diferite valori pentru diferiți parametri. Procesul este similar cu specificarea parametrilor de proprietate bazați pe funcții.
var unicTranslation = anime (target: '.square', translateY: funcție (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (target: '.square', scale: function (el, i) retur Math.random () * 1.5 + i / 10;, autoplay: false); var randomRotation = anime (target: '.square', rotire: function () retur anime.random (-180, 180); autoplay: false); var randomRadius = anime (target: '.square', borderRadius: function (el) retur 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (target: '.square', translateY: functie (el, i) return 50 + 50 * i;, scalare: function (el, i) return Math.random / 10;, rotiți: funcția () return anime.random (-180, 180); borderRadius: funcția (el) retur Math.random () * el.offsetWidth / ) returnați anime.random (1500, 2400);, întârziere: funcția () return anime.random (0, 1000);, autoplay: false);
Pentru translateY proprietate, folosim indexul elementului pentru a seta o valoare de traducere. Utilizarea 50 * (i + 1) mărește translateY pentru fiecare element cu 50 de pixeli.
Animația de scalare utilizează, de asemenea, indexul elementului împreună cu modelul încorporat Math.random () funcția de a returna un număr pseudo-aleator în virgulă mobilă mai mică de 1. În acest fel, elementele se măsoară la întâmplare, dar i / 10 o parte din proprietate ușoară crește posibilitatea ca elementele care apar la sfârșit să aibă dimensiuni mai mari.
În interiorul codului pentru animația de rotație, folosim anime.random (a, b) funcția helper pentru a obține numere întregi aleatorii între -180 și 180. Această funcție este utilă pentru atribuirea valorilor integrate aleatoare unor proprietăți precum translateY și roti. Utilizarea acestei funcții pentru a atribui valori la scară aleatoare va produce rezultate extreme.
Valoarea razei de graniță pentru diferite elemente este determinată prin calcularea lățimii elementelor țintă utilizând el funcție. În cele din urmă, ultima parte a codului atribuie valori aleatorii către durată și întârziere parametrii.
Puteți vedea că animația realizată de ultima parte este foarte aleatoare. Nu există o relație între valorile diferitelor proprietăți ale elementelor sau valorile lor de întârziere și durată. În viața reală, este mai sensibil să folosim valori care pot adăuga un anumit sens de direcție la animație.
De asemenea, este posibil să animați diferite proprietăți ale elementelor dvs. țintă utilizând cadrele cheie. Fiecare cheie cheie este alcătuită dintr-o matrice a obiectului proprietate. Puteți utiliza obiectul pentru a specifica valoarea proprietății, durată, întârziere și easing pentru acea parte a animației. Următorul cod creează o animație de traducere bazată pe cadre cheie.
var cheie: target: '.square', translateY: valoare: 100, durata: 500, valoare: 300, durata: 1000, întârziere: 1000, value: 40, duration: : 1000], autoplay: false); var keyframeAll = anime (target: '.square', translateY: [valoare: 100, durata: 500, value: 300, duration: 1000, delay: 1000 : 1000, scala: [valoare: 1.1, durata: 500, valoare: 0.5, durata: 1000, întârziere: 1000 valoare: 60, durata: 500, valoare: -60, durata: 1000, întârziere: 1000, valoare: 75, durată: 500, întârziere: 500, valoare: 50, durata: 1000, întârziere: 1000, valoare: 25, durata: 500, întârziere: 1000], întârziere: funcția (el, i) return 100 * (i + 1) , autoplay: false);
De asemenea, puteți anima mai multe proprietăți simultan, specificând diferite sau aceleași valori pentru toți parametrii. În cel de-al doilea caz, global întârziere parametrul aplică o întârziere inițială pentru toate elementele bazate pe indicele lor. Această întârziere este independentă de întârzierea aplicată fiecărei proprietăți din interiorul cadrelor cheie.
Până acum, în serie, am folosit întârziere parametru pentru a reda diferite animații într-o anumită secvență. Pentru a utiliza întârzierea în acest scop, trebuie să cunoaștem și durata animației anterioare.
Cu complexitatea din ce în ce mai mare a secvenței de animație, menținerea valorii întârzierii corecte devine foarte obositoare. Orice modificare a duratei unei animații ne va forța să recalculam toate valorile de întârziere pentru a păstra animațiile în secvența inițială.
O soluție mai bună la această problemă este folosirea liniilor de timp pentru a controla secvența de animație. Trebuie să utilizați anime.timeline () pentru a crea o cronologie în Anime.js. De asemenea, puteți parcurge diferiți parametri la această funcție ca obiect. Acești parametri pot specifica direcția în care este redată cronologia, buclele de numere și an Redare automata pentru a determina dacă animația ar trebui să fie redată automat. Toți acești parametri au fost discutate în detaliu în tutorialul parametrilor din această serie.
Puteți adăuga diferite animații într - o cronologie folosind adăuga() metodă. Toate animațiile adăugate la cronologie vor fi redate în ordinea în care au fost adăugate. Este posibil să se precizeze valori absolute sau relative de compensare pentru a controla ordinea în care sunt redate animațiile.
Atunci când se utilizează valori relative de offset, timpul de pornire al animației curente este determinat față de momentul animației anterioare. Decompensările relative pot fi de trei tipuri:
Următorul cod arată cum se creează o cronologie de bază și o cronologie cu valorile relative de offset.
var basicTimeline = anime.timeline (direcție: "alternate", bucla: 2, autoplay: false); (target: '.square', translateY: 200) adăugați (target: '.red', translateY: 100). var offsetTimeline = anime.timeline (direcție: "alternate", bucla: 2, autoplay: false); offsetTimeline.add (target: '.square', translateY: 200) adăugați (target: '.red', offset: '+ = 1000', translateY: 100 ', offset:' * = 2 ', translateY: 0);
Încercați să faceți clic pe Offset Timeline în demo-ul de mai sus. Veți vedea că există o întârziere de 2 secunde între sfârșitul animației de pătrate roșii și începutul animației de pătrate albastre.
Nu am specificat a durată pentru animația pătrată roșie. Prin urmare, o valoare implicită de 1000ms sau 1s este folosită ca durată. Decalajul de multiplicare al animației pătrate albastre dublează valoarea respectivă, iar aceasta are ca rezultat o întârziere de două secunde în animație.
Atunci când se utilizează valori absolute de compensare, timpul de pornire al liniei temporale este folosit ca punct de referință. Este posibilă inversarea secvenței în care sunt redate animațiile utilizând valori mari de offset pentru animațiile care apar la începutul liniei de cronologie.
Anime.js are o varietate de opțiuni de a juca, întrerupe, reporni sau căuta animații sau termene în orice punct dat.
Joaca() ne permite să începem animația din progresul actual. pauză() funcția va îngheța animația în momentul în care a fost apelată funcția. repornire() funcția începe animația de la început, indiferent de progresul actual. cauta (valoare) funcția poate fi folosită pentru a avansa animația prin valoare număr de milisecunde.
Ar trebui să rețineți că Joaca() funcția reia numai animația din momentul în care a fost întreruptă. Dacă animația a ajuns deja la sfârșit, nu puteți reda animația utilizând Joaca(). Pentru a reda animația, va trebui să utilizați repornire() funcţie.
Accentsconagua
var slowAnimation = anime (target: '.square', translateY: 250, borderRadius: 50, durata: 4000, relaxare: 'linear', autoplay: false); document.querySelector ('. play'); onclick = slowAnimation.play; document.querySelector ("pauză") onclick = slowAnimation.pause; document.querySelector ("restart") onclick = slowAnimation.restart; var cautăInput = document.querySelector ('. seek'); searchInput.oninput = funcție () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Rețineți că nu folosim seekInput.value pentru a seta o valoare pentru funcția de căutare. Acest lucru se datorează faptului că valoarea maximă pentru intrarea intervalului a fost setată la 100 în marcaj. Utilizarea directă a valorii pentru domeniul de intrare ne va permite să căutăm până la 100 ms. Înmulțind valoarea de intrare a intervalului cu durata de animație, asigurați-vă că putem căuta animația de la început până la capăt pe glisorul nostru.
În acest tutorial, ați învățat cum să animați diferite valori ale proprietăților ca numere, funcții sau cadre cheie. De asemenea, ați învățat cum să controlați și să manipulați liniile de timp din Anime.js pentru a controla ordinea în care este redată o secvență de animație.
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.
Dacă aveți întrebări legate de acest tutorial, vă rugăm să anunțați-mă în comentarii.
