Introduktion till Popmotion Pointers and Physics

Välkommen tillbaka till introduktionsprogrammet till Popmotion. I del 1 upptäckte vi hur man använder tweens och nyckelbilder för att göra exakta, tidsplanerade animeringar.

I del 2 ska vi titta på pekerspårning och hastighetsbaserade animeringar.

Pekare spårning gör att vi kan skapa rullbara produkt hyllor, anpassade värde reglaget eller dra och släpp gränssnitt.

Hastighetsbaserade animeringar skiljer sig från en tidsbaserad animation som tween, eftersom den primära egenskapen som påverkar hur animationen beter sig är hastighet. Animationen i sig kan ta en viss tid.

Vi tittar på de tre hastighetsbaserade animationerna i Popmotion, vår, förfall, och fysik. Vi använder hastighet av pekarspårningsanimeringen för att starta dessa animeringar, och det kommer att visa hur hastighetsbaserade animeringar kan skapa engagerande och lekfulla användargränssnitt på ett sätt som tidsbaserade animationer helt enkelt inte kan.

Öppna först den här CodePen för att spela tillsammans.

Pekare spårning

Popmotion tillhandahåller pekare funktion för att spåra och mata ut koordinaterna för antingen en mus eller en enda pekare.

Låt oss importera det här tillsammans med styler, vilket gör det möjligt för oss att ställa in bollen.

const pekare, styler = popmotion; const ball = document.querySelector ('. ball'); const ballStyler = styler (boll);

För det här exemplet vill vi dra bollen. Låt oss lägga till en händelse som kommer att mata ut pekarens position till bollen:

låt pointerTracker; const startTracking = () => pointerTracker = pekare (). starta (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);

Vi vill också ha någon kod att sluta spåra när vi släpper bollen:

const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ('mouseup', stopTracking); document.addEventListener ('touchend', stopTracking);

Om du försöker dra bollen nu är det ett uppenbart problem. Bollen hoppar bort när vi rör det! Inte en bra användarupplevelse.

Detta beror på, som standard, pekare utmatar pekarens position i förhållande till sidan.

För att mata ut pekarens position i förhållande till en annan punkt, i detta fall bollens x / y-transform kan vi helt enkelt överföra den positionen till pekare så här:

const startTracking = () => pointerTracker = pekare (x: ballStyler.get ('x'), y: ballStyler.get ('y')). start (ballStyler.set); ;

Nu har du gjort bollen, i mycket få rader av kod, draggable! När användaren släpper bollen stoppar den dock död.

Detta är inte tillfredsställande: Föreställ dig en rullbar karusell av produkter som en användare kan dra för att rulla. Om det bara slutade dött i stället för momentumrullning, skulle det vara mindre angenämt att använda.

Det skulle vara svårare också, eftersom den totala fysiska ansträngningen som behövs för att rulla karusellen skulle vara högre.

För att aktivera animeringar så här behöver vi först veta hastighet av objektet kastas.

Spårhastighet

Popmotion ger en funktion som kan hjälpa oss att spåra hastighet. Det heter värde. Låt oss importera det:

const pekare, styler, värde = popmotion;

Att tala tekniskt för ett ögonblick är alla Popmotions animationer kända som åtgärder. Åtgärder är reaktiva strömmar av värden som kan startas och stoppas.

en värde är omvänt a reaktion. Det kan inte stoppas eller startas. Det svarar bara passivt när det är uppdatering Metoden heter. Det kan hålla koll på värden och kan användas för att fråga sig deras hastighet.

Så, efter att vi definierat ballStyler, låt oss definiera en ny värde för ballXY:

const ballXY = värde (x: 0, y: 0);

Närhelst ballXY uppdateringar, vi vill uppdatera ballStyler. Vi kan skicka ett andra argument till värde, en funktion som kommer att springa när ballXY uppdateringar:

const ballXY = värde (x: 0, y: 0, ballStyler.set);

Nu kan vi skriva om vårt pekare att uppdatera ballXY istället för ballStyler.set:

const startTracking = () => pekare (ballXY.get ()) .start (ballXY); ;

Nu, vid vilken som helst pekare, kan vi ringa ballXY.getVelocity () och vi får båda hastigheterna x och y, redo att ansluta till våra hastighetsbaserade animeringar.

Hastighetsbaserade animationer

vår

Den första hastighetsbaserade animationen att introducera är vår. Det bygger på samma ekvationer som styr Apples CASpringAnimation, vårens animering bakom allt som iOS springande lekfullhet.

Importera:

const pekare, vår, styler, värde = popmotion;

Ändra nu stopTracking så att istället för att stoppa pointerTracker animering, det startar a vår animering så här:

const stopTracking = () => våren (från: ballXY.get (), hastighet: ballXY.getVelocity (), till: 0, styvhet: 100, dämpning: 20). start (ballXY);

Vi ger den bollens nuvarande position, dess hastighet och ett mål, och simuleringen körs. Det ändras beroende på hur användaren har kastat bollen.

Den snygga saken om fjädrar är att de är uttrycksfulla. Genom att justera massa, styvhet och dämpning egenskaper, kan du sluta med radikalt olika vårkänslor.

Till exempel, om du bara ändrar styvhet ovan till 1000, du kan skapa en rörelse som känns som snabbare energi. Då, genom att ändra massa till 20, du skapar rörelse som ser nästan ut som tyngdkraften.

Det finns en kombination som känns rätt och tillfredsställande för dina användare, och lämplig för ditt varumärke, under nästan alla omständigheter. Genom att leka med olika vårkänslor kan du kommunicera olika känslor, som en sträng out-of-bounds snap eller en mjukare bekräftande studsa.

förfall

De förfall animering, som namnet antyder, sönderfall den angivna hastigheten så att animationen gradvis saktar till ett fullständigt stopp.

Detta kan användas för att skapa momentumrullningseffekten som finns på smartphones, så här:

Importera förfall fungera:

const sönderfall, pekare, vår, styler, värde = popmotion;

Och ersätt stopTracking funktion med följande:

const stopTracking = () => förfall (från: ballXY.get (), hastighet: ballXY.getVelocity ()) start (ballXY);

förfall beräknar automatiskt ett nytt mål baserat på det tillhandahållna från och hastighet rekvisita.

Det är möjligt att justera känslan av decelerationen genom att röra med rekvisita som beskrivs i docs länkade ovan men till skillnad från vår och fysik, förfall är utformad för att träna ur lådan. 

fysik

Slutligen har vi fysik animering. Det här är Popmotions schweiziska armékniv med hastighetsbaserade animeringar. Med det kan du simulera:

• konstant hastighet
• acceleration
• fjädrar
• friktion

vår och förfall erbjuder super precision rörelse och en bredare mängd "känner". Snart kommer de båda också att skruvas.

Men båda är oföränderlig. När du väl har börjat, sätts deras egenskaper i sten. Perfekt för när vi vill starta en animering baserad på början från/hastighet stat, men inte så bra om vi vill ha pågående interaktion.

fysik, istället är en integrerad simulering närmare ett videospel. Det fungerar genom att en gång per ram tar det nuvarande tillståndet och sedan ändrar det baserat på de aktuella egenskaperna vid den tidpunkten.

Detta låter det vara föränderlig, vilket innebär att vi kan ändra dessa egenskaper, vilket sedan ändrar resultatet av simuleringen.

För att demonstrera detta, låt oss göra en twist på klassisk pekareutjämning, med elastisk utjämning.

Importera fysik:

const pekare, vår, fysik, styler, värde = popmotion;

Den här gången kommer vi att ändra startTracking fungera. I stället för att ändra ballXY med pekare, vi ska använda fysik:

const.txt = () => const physicsAnimation = fysik (från: ballXY.get () till: ballXY.get (), hastighet: ballXY.getVelocity (), restSpeed: false, friktion: 0,6, springStrength: 400 ) Starta ett (ballXY); ;

Här ställer vi in från och hastighet som vanligt. friktion och springStrength båda anpassar fjäderns egenskaper.

restSpeed: false överstyrer standardbeteendet för animationen som slutar när rörelsen stannar. Vi vill stoppa det manuellt i stopTracking.

På egen hand kommer denna animering inte att göra någonting för att vi ställer in till, vårens mål, till samma som från. Så låt oss reimplementera pekare spårar denna gång för att ändra vårmål för fysik. På sista raden av startTracking, Lägg till:

pointerTracker = pekare (ballXY.get ()) start ((v) => physicsAnimation.setSpringTarget (v););

Här använder vi en liknande pekare animering som tidigare. Förutom den här tiden använder vi den för att ändra målet för en annan animering. Då skapar vi den här elastiska pekarens spårning:

Slutsats

Hastighetsbaserade animeringar ihop med pekerspårning kan skapa engagerande och lekfulla gränssnitt.

vår kan användas för att skapa en mängd olika vårkänslor, medan förfall är skräddarsydd för momentan rullningsanimationer. fysik är mer begränsad än vad gäller konfigurerbarhet, men ger också möjlighet att ändra simuleringen pågår och öppna nya interaktionsmöjligheter.

I nästa och sista delen av den här introduktionsserien om Popmotion ska vi ta allt vi har lärt oss i de två första delarna och använda dem tillsammans med lite lätt funktionell komposition för att skapa en skurbar animation tillsammans med en skrubber att göra skrubbningen med!