Share
Popmotion este o bibliotecă de animație JavaScript funcțională. Comparativ cu alte biblioteci, cum ar fi GreenSock sau Anime.js, Popmotion este low-level și neopionizat.
Acesta îmbină o mulțime de trăsături, cum ar fi fizica primăvară și urmărirea pointerului, într-un fișier de dimensiuni foarte mici (11,5kb).
Permite dezvoltatorilor să-și scrie propriile caracteristici utilizând funcții simple, în loc să aștepte ca autorul bibliotecii să le adauge.
De asemenea, înseamnă că este la fel de ușor să animați obiecte 3D, diagrame sau componente React, deoarece este vorba de animarea elementelor DOM sau SVG.
Această flexibilitate poate face curba inițială de învățare mai abruptă decât pentru alte biblioteci. Deci, în această serie de tutori, vom învăța elementele de bază ale animațiilor puternice ale lui Popmotion. Vom începe cu călăul de lucru al lumii de animație Tween.
Popmotion suportă o varietate de metode de instalare. În producție, vă recomand să instalați prin npm, deoarece acest lucru vă permite să importați numai biții de care aveți nevoie, economisind spațiu și mai mult.
Cu toate acestea, pentru acest tutorial, puteți urmări împreună cu acest CodePen, care a fost creat cu cea mai recentă versiune de Popmotion.
Pentru cei necunoscuți, o tranziție tween între un număr și altul într-o perioadă predeterminată de timp. Dacă ați folosit o tranziție CSS, Popmotion's Tween funcționează exact la fel.
Putem importa Tween ca astfel:
const tween = popul;
În mod implicit, Tween animă între 0 și 1 pe o durată de 300 milisecunde. Dacă deschideți consola dvs., puteți să o testați singuri:
Accentsconagua
adăugați startul (update: v => console.log (v), completă: () => console.log ('complete!'));Dar nu vrem să animăm consola - vrem să animăm mingea. Pentru aceasta, Popmotion include o altă funcție, Styler.
Notă: În acest prim exemplu, am definit ambele Actualizațiși complet funcții. Dar dacă oferiți start cu o singură funcție, îi va atribui automat Actualizați.
Styler este folosit pentru a crea interfețe get / set pentru stilurile HTML și SVG optimizate pentru utilizarea cu animații (din orice bibliotecă!).
În exemplul de mai sus, Tween este de ieșire un număr, astfel încât am putea, bineînțeles, să setați opacitatea mingii așa (încercați):
const bile = document.querySelector ('. minge'); tween () începe (v => ball.style.opacity = v);in orice caz, Styler are următoarele beneficii:
transforma popi care urmează să fie setate individual, permițând animație independentă a recuzităților cum ar fi scară și translateX.translateX (de exemplu) fără a adăuga 'Px'.De asemenea, nu vă limitați la utilizarea în interiorul unei animații. Puteți seta manual stilul unui element în timp ce ceilalți animă, iar schimbarea va fi programată și difuzată automat împreună cu ceilalți.
Deci, să o importăm:
const tween, styler = popul;
Creați stilul mingii:
const BallStyler = stiler (minge);
Acum putem folosi ballStyler pentru a seta și anima oricare dintre proprietățile mingii. ballStyler.set este flexibil. Se poate seta o singură proprietate:
ballStyler.set ('fundal', '# f00');Sau mai multe proprietăți:
ballStyler.set (x: 100, y: 100);
Vrem să animăm opacitate pentru moment, deci hai să ne schimbăm animația:
tween () începe (v => ballStyler.set ("opacitate", v));a stabilit poate fi de asemenea curried. Prin furnizarea doar a unui nume de proprietate, acesta va returna o functie setter pentru prop. Așadar, putem să ne îngropăm cele de mai sus scriind:
. Tween () start (ballStyler.set ( 'opacitate'));
Până acum, am animat doar mingea folosind setarea implicită Tween proprietăți. Să aruncăm o privire la cât de versatil a Tween poate fi.
Tween acceptă un argument opțional, un obiect de proprietăți tween. Să aruncăm o privire la unele dintre cele mai frecvent utilizate elemente de recuzită:
din/la A Tween poate fi între oricare două stări. Definim acestea cu din și la.
Să animăm translateX prin rescriere 'opacitate' la 'X'. Apoi treceți din și la recuzită:
tween (de la: 0, la: 300)
Bara dvs. se mișcă acum de la stânga la dreapta de 300 de pixeli.
Cu toate acestea, am spus că a Tween poate fi între două statele, nu doar numerele. Dacă oferim din și la obiecte de numere și / sau culori, putem anima mai multe proprietati simultan.
Incearca asta:
tween (de la: x: 0, background: '# 198FE3', la: x: 300, background: '# FF1C68') start (ballStyler.set);
Aceasta este o modalitate ușoară de a anima simultan mai multe elemente de recuzită.
durată este definit în milisecunde. Implicit, un tween va dura 300ms, dar dacă vom seta durată la 1000, va dura o secundă:
tween (duration: 1000, de la: 0, la: 300). (mingStyler.set ('x'));Funcțiile de relaxare sunt folosite pentru a modifica viteza de mișcare pe parcursul animației.
În viața reală, obiectele nu încep sau nu se opresc la viteza țintă. În funcție de obiect, ele se accelerează treptat, încetinesc treptat sau ambele.
O funcție de relaxare funcționează pur și simplu luând progresul tween-ului, definit ca un număr între 0 și 1, și returnează unul nou.
Nu aveți nevoie să știți cum să faceți aceste funcții deoarece Popmotion vă oferă o grămadă.
Importați-le:
const relaxare, tween, styler = popul;
În mod implicit, uşura este setat sa easing.easeOut. Atunci când o funcție se îndepărtează, înseamnă că aceasta începe repede și se termină încet.
Acest lucru a fost ales ca implicit pentru că este convingerea mea că majoritatea animațiilor din interfețele utilizatorilor ar trebui să inițieze ca urmare a acțiunii unui utilizator. Prin pornirea rapidă și terminând lent, utilizatorul va simți ca și când le-ar fi transmis energia, prin robinet sau clic, direct în interfață. Se simte fermecat, viu si receptiv.
Pentru multe animații aflate departe de intrarea utilizatorului sau pe cont propriu, se poate simți puțin mai jargon să folosească o animație care se ușurează, cum ar fi easing.easeInOut sau easing.anticipate, care face un remorcher jucăuș înainte de a anima.
În cele din urmă, există easing.cubicBezier care creează o nouă funcție de relaxare bazată pe o curbă de relaxare, la fel ca și tranzițiile CSS. Acest lucru oferă un grad masiv de control și flexibilitate asupra mișcării.
Încercați să aplicați unele dintre acestea în animația dvs. în timp ce vă jucați durată pentru a vedea cum afectează simțul și caracterul acesteia.
Animațiile pot fi repetate în trei moduri diferite: buclă, YOYO, și flip-.
Buclă începe animația de la început. Yoyo oglindeste tween-ul ruland-o inapoi. Și flip- îl rulează înapoi șiînvârte funcția de relaxare.
Unul dintre acestea poate fi setat pe tween și fiecare este setat ca număr care indică numărul de repetări ale animației. Pentru a repeta pentru totdeauna, pur și simplu trece Infinit:
tween (yoyo: Infinitate, de la: 0, la: 300) start (ballStyler.set ('x'));Când se pornește un tween, acesta returnează comenzile de redare pe care le putem folosi pentru a controla acea animație.
const conturi = tween () start (console.log);
În exemplul de mai sus, controale vor avea acces la toate aceste metode de redare, cum ar fi Stop, pauză, și relua:
const const = controla = tween (duration: 1000, de la: 0, la: 300) (start: ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Putem folosi aceste controale de redare pauză și apoi căuta prin tween:
const const = controla = tween (duration: 1000, de la: 0, la: 300) (start: ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Cu aceasta, putem crea o animație scrubbable! Într-un tutorial mai târziu, vom explora modul de utilizare a lui Popmotion ac indicator funcția de a crea o bară de frecat, dar pentru moment puteți curăța unul Tween cu un al doilea tween, pentru a vedea acest lucru în acțiune:
const const = controla = tween (de la: 0, la: 300). start (ballStyler.set ('x')); controls.pause (); adăugați (duration: 1000) .start (controls.seek);Pentru tranziții simple, a-la-b, Tween este excelent. Pentru secvențe mai complicate de tweens, Popmotion oferă o altă funcție numită keyframes.
Să o importăm acum:
const cadre cheie, relaxare, tween, styler = popmotion;
keyframes tweens printr-oserie liniară de stări. Noi le oferim aceste state valorile proprietate:
cadrele cheie (valori: [0, -150, 150, 0], durata: 2000) (startBarsStyler.set ('x'));Ca Tween, putem defini aceste stări și ca obiecte. Deci, pentru a muta mingea într-un pătrat, putem scrie:
(x: 150, y: 150), x: 150, y: 150, x: x: 150, y: -150, x: 0, y: 0], durata: 2000) (ballsStyler.set);
În mod implicit, keyframes va aloca fiecare dintre aceste tweens o cotă egală din total durată.
Prin furnizarea unui a ori array, putem marca fiecare dintre aceste state cu un număr între 0 și 1. 0 reprezintă începutul animației și 1 reprezintă sfârșitul:
cadrele cheie (valori: [0, -150, 150, 0], ori: [0, 0.1, 0.9, 1], durata: 2000).
În acest fel, putem ajusta lungimea animației fără să remarcăm fiecare segment individual.
De asemenea, permite fiecărei animații să beneficieze de o relaxare individuală easingurile proprietate:
cadre cheie (valori: [0, -150, 150, 0], ori: [0, 0,1, 0,9, 1], simplificări: [easing.easeIn, easing.linear, easing.easeOut], durata: 2000). start (ballStyler.set ( 'x'));
pentru că keyframes este doar a Tween, putem regla redarea globală cu toate aceleași proprietăți ca uşura și buclă, și să o controleze cu toate aceleași metode pe care le-am învățat mai devreme.
Tween și keyframes Funcțiile vă permit să creați atât animații simple, cât și complexe.
Styler aduce beneficii proprii, cum ar fi utilizarea în afara animațiilor, standardizarea modelelor de transformare CSS și SVG și oferirea de loturi pentru performanțe înalte de animație.
În acest tutorial, am acoperit doar câteva dintre animațiile pe care Popmotion le oferă. În următoarea tranșă, vom încerca să urmărim urmărirea pointerului și animațiile bazate pe viteză fizică și primăvară.
Vitezele bazate pe animații pot fi folosite pentru a crea interfețe uimitoare care reacționează realist la intrarea unui utilizator. Ne vedem acolo!
