Share
Bine ați venit înapoi la seria tutorialului Introducere în Popmotion. În partea a 1-a, am descoperit cum să folosim tweens și keyframes pentru a face animații precise, programate în timp.
În Partea 2, ne vom uita la urmărirea indicatorilor și viteze bazate pe animații.
Urmărirea indicatoarelor ne permite să creăm rafturi de produse scrollabile, glisoare de valoare personalizată sau interfețe de tip drag-and-drop.
Vitezele bazate pe animație diferă de o animație bazată pe timp, cum ar fi tween, în sensul că proprietatea primară care afectează modul în care se comportă animația este viteză. Animația însăși ar putea dura orice timp.
Vom analiza cele trei animații bazate pe viteză în Popmotion, primăvară, descompunere, și fizică. Vom folosi viteză din animația de urmărire a pointerului pentru a începe aceste animații și asta va demonstra cum animațiile bazate pe viteză pot crea interfețe uimitoare și jucăușe într-un mod în care animațiile bazate pe timp pur și simplu nu pot.
Mai întâi, deschideți acest CodePen pentru a juca împreună.
Popmotion furnizează ac indicator funcția de a urmări și de a scoate coordonatele unui mouse sau a unui singur indicator tactil.
Să o importăm împreună cu asta Styler, care ne va permite să stabilim poziția mingii.
Accentsconagua
const pointer, styler = popul; const bile = document.querySelector ('. minge'); const BallStyler = stiler (minge);Pentru acest exemplu, dorim să tragem mingea. Să adăugăm un eveniment care va scoate poziția pointerului la minge:
lasa pointerTracker; const startTracking = () => pointerTracker = pointer () start (ballStyler.set); ; ball.addEventListener ("mousedown", startTracking); ball.addEventListener ("atingere", startTracking);De asemenea, vom dori ca un cod să nu mai fie urmărit când eliberăm mingea:
const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ("mouseup", stopTracking); document.addEventListener ("atinge", stopTracking);Dacă încercați și trageți mingea acum, este o problemă evidentă. Mingea sare când o atingem! Nu este o experiență extraordinară a utilizatorului.
Acest lucru se datorează faptului că, în mod implicit, ac indicator scoate poziția indicatorului în raport cu pagina.
Pentru a scoate poziția indicatorului față de un alt punct, în acest caz transformarea mingii x / y, putem pur și simplu să trecem la această poziție ac indicator asa:
const startTracking = () => pointerTracker = pointer (x: ballStyler.get ('x'), y: ballStyler.get ('y')) start (ballStyler.set); ;Acum ați făcut mingea, în foarte puține linii de cod, draggable! Cu toate acestea, atunci când utilizatorul eliberează mingea, acesta se oprește.
Acest lucru nu este satisfăcător: Imaginați-vă o caruselă scrollabilă a produselor pe care un utilizator o poate trage pentru a derula. Dacă tocmai a încetat să moară în loc să scaneze impulsul, ar fi mai puțin plăcut să o folosiți.
Ar fi și mai greu, deoarece efortul fizic general necesar pentru derularea caruselului ar fi mai mare.
Pentru a activa astfel de animații, trebuie mai întâi să știm viteză a obiectului aruncat.
Popmotion oferă o funcție care ne poate ajuta să urmărim viteza. Se numeste valoare. Să importăm:
const pointer, styler, value = popmotion;
Pentru a vorbi tehnic pentru o clipă, toate animațiile lui Popmotion sunt cunoscute sub numele de acţiuni. Acțiunile sunt fluxuri reactive de valori care pot fi pornite și oprite.
A valoare este, dimpotrivă, a reacţie. Nu poate fi oprită sau pornită. Pur și simplu răspunde pasiv când este Actualizați se numește metoda. Poate urmări valorile și poate fi folosit pentru a interoga viteza lor.
Deci, după ce definim ballStyler, să definim un nou valoare pentru ballXY:
const bileXY = valoare (x: 0, y: 0);
Oricând ballXY actualizări, dorim să ne actualizăm ballStyler. Putem trece un al doilea argument valoare, o funcție care va rula ori de câte ori ballXY actualizări:
const bileXY = valoare (x: 0, y: 0, ballStyler.set);
Acum ne putem rescrie ac indicator a updata ballXY in loc de ballStyler.set:
const startTracking = () => pointer (ballXY.get ()) .start (ballXY); ;
Acum, la orice pointer, putem apela ballXY.getVelocity () și vom primi vitezele ambelor X și y, gata să se conecteze la animațiile bazate pe viteze.
primăvarăPrima animație bazată pe viteze pe care o introducem este primăvară. Ea se bazează pe aceleași ecuații care guvernează CASpringAnimation, animația de primăvară din spatele tuturor jocurilor iOS de joacă.
Import:
const pointer, primăvară, stiler, valoare = popmotion;
Acum, modificați stopTracking astfel încât, în loc să oprească pointerTracker animație, începe o primăvară animație ca aceasta:
const stopTracking = () => primăvară (de la: ballXY.get (), viteza: ballXY.getVelocity (), la: 0, rigiditate: 100, amortizare: 20).
Îi oferim poziția actuală a mingii, viteza și ținta, iar simularea este rulată. Se modifică în funcție de modul în care utilizatorul a aruncat mingea.
Lucrul cool despre izvoare este că sunt expresive. Prin ajustarea masa, rigiditate și amortizare proprietăți, puteți ajunge cu senzații radicale de primăvară.
De exemplu, dacă schimbați numai rigiditate de mai sus 1000, puteți crea o mișcare care seamănă cu apăsarea energiei înalte. Apoi, prin schimbare masa la 20, creați o mișcare care arată aproape ca gravitatea.
Există o combinație care se va simți bine și satisfăcătoare pentru utilizatorii dvs. și adecvată pentru brandul dvs., în aproape orice circumstanță. Dacă te joci cu diferite simțuri de primăvară, poți să comunici sentimente diferite, cum ar fi o lovitură strictă în afara limitei sau o mai ușoară declanșare afirmativă.
descompunere descompunere animație, așa cum sugerează și numele, dezintegrari viteza oferită astfel încât animația să încetinească treptat până la oprirea completă.
Acest lucru poate fi folosit pentru a crea efectul de derulare a impulsurilor pe telefoanele inteligente, cum ar fi:
Importați descompunere funcţie:
const decay, pointer, primăvară, stiler, valoare = popmotion;
Și înlocuiți stopTracking funcționează cu următoarele:
const stopTracking = () => decădere (from: ballXY.get (), velocity: ballXY.getVelocity ()) start (ballXY);
descompunere calculează automat un obiectiv nou bazat pe informațiile furnizate din și viteză recuzită.
Este posibil să se adapteze simțul decelerației prin amestecarea cu recuzele prezentate în documentele de mai sus, dar, spre deosebire de primăvară și fizică, descompunere este proiectat să funcționeze din cutie.
fizicăÎn cele din urmă, avem fizică animaţie. Acesta este cuțitul armatei elvețiene Popmotion cu viteze bazate pe animații. Cu aceasta, puteți simula:
primăvară și descompunere oferă mișcare super-precisă și o varietate mai largă de "simți". În curând, ambele vor fi și ele scufundabile.
Dar amândouă sunt imuabil. Odată ce ați început, proprietățile lor sunt piatră. Perfect pentru momentul în care dorim să începem o animație bazată pe prima din/viteză stat, dar nu atât de bine dacă dorim interacțiune continuă.
fizică, în schimb, este un simulare integrată mai aproape de cel al unui joc video. Funcționează de o dată pe cadru, luând starea actuală și apoi modificând-o pe baza proprietăților curente la momentul respectiv.
Acest lucru permite să fie mutabil, ceea ce înseamnă că putem schimba acele proprietăți, care apoi schimbă rezultatul simulării.
Pentru a demonstra acest lucru, să facem o răsucire pe netezirea clasică a pointerului, cu o netezire elastică.
Import fizică:
const pointer, primăvară, fizică, stiler, valoare = popmotion;
De data aceasta, o să schimbăm startTracking funcţie. În loc să se schimbe ballXY cu ac indicator, vom folosi fizică:
const startTracking = () => const fizicaAnimație = fizică (de la: ballXY.get (), la: ballXY.get (), viteza: ballXY.getVelocity (), restSpeed: false, friction: ) .start (ballXY); ;
Aici suntem aici din și viteză ca de obicei. frecare și springStrength atât ajustați proprietățile arcului.
restSpeed: false suprascrie comportamentul implicit al opririi animației atunci când mișcarea se oprește. Vrem să-l oprim manual stopTracking.
Pe cont propriu, această animație nu va face nimic pentru că ne-am stabilit la, ținta primăverii, la fel ca din. Deci, să reimplementăm ac indicator urmărind acest timp pentru a schimba ținta de primăvară din fizică. Pe ultima linie din startTracking, adăuga:
pointerTracker = pointer (ballXY.get ()). încep ((v) => fizicsAnimation.setSpringTarget (v););
Aici, folosim un model similar ac indicator animație ca înainte. Cu excepția acestui moment, îl folosim pentru a schimba ținta unei alte animații. Procedând astfel, vom crea această urmărire a pointerului elastic:
Vitezele bazate pe animații asociate cu urmărirea pointerului pot crea interfețe interesante și jucăușă.
primăvară pot fi folosite pentru a crea o varietate largă de simțuri de primăvară, în timp ce descompunere este special adaptată pentru animațiile de derulare a momentului. fizică este mai limitat decât în ceea ce privește configurabilitatea, dar oferă și posibilitatea de a schimba simularea în desfășurare, deschizând noi posibilități de interacțiune.
În următoarea și ultima parte a acestei serii introductive despre Popmotion, vom lua tot ceea ce am învățat în primele două părți și le vom folosi împreună cu o compoziție ușor funcțională pentru a crea o animație scrubbable, împreună cu un scruber de făcut curățarea cu!
