Introduksjon til Popmotion Pointers and Physics

Velkommen tilbake til introduksjonen til Popmotion opplæringsserien. I del 1 oppdaget vi hvordan du bruker tweens og keyframes for å lage presise, tidsplanlagte animasjoner.

I del 2 skal vi se på pekersporing og hastighetsbaserte animasjoner.

Pekersporing gjør det mulig for oss å lage rullbare produkthyller, glidebrytere med tilpasset verdi eller dra og slipp-grensesnitt.

Hastighetsbaserte animasjoner er forskjellige fra en tidsbasert animasjon som tween, fordi den primære egenskapen som påvirker hvordan animasjonen oppfører seg, er hastighet. Animasjonen selv kan ta litt tid.

Vi ser på de tre hastighetsbaserte animasjonene i Popmotion, vår, forfall, og fysikk. Vi bruker hastighet av pekersporingsanimasjonen for å starte disse animasjonene, og det vil demonstrere hvordan hastighetsbaserte animasjoner kan skape engasjerende og lekende brukergrensesnitt på en måte som tidsbaserte animasjoner enkelt ikke kan.

Åpne først denne CodePen for å spille sammen.

Peker sporing

Popmotion gir pekeren Funksjon for å spore og skrive ut koordinatene til enten en mus eller en enkelt pekepeker.

La oss importere dette sammen med styler, som vil tillate oss å sette stillingen til ballen.

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

For dette eksempelet vil vi dra ballen. La oss legge til en hendelse som vil sende pekeren sin posisjon til ballen:

la pointerTracker; const startTracking = () => pointerTracker = pointer (). start (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);

Vi vil også ha noen kode for å stoppe sporing når vi slipper ballen:

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

Hvis du prøver å dra ballen nå, er det et åpenbart problem. Ballen hopper bort når vi berører det! Ikke en flott brukeropplevelse.

Dette er fordi, som standard, pekeren utfører pekerens posisjon i forhold til siden.

For å utføre pekerens posisjon i forhold til et annet punkt, i dette tilfellet ballens x / y transformasjon, kan vi bare passere den posisjonen til pekeren som dette:

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

Nå har du gjort ballen, i svært få linjer med kode, draggable! Men når brukeren slipper ballen, stopper den død.

Dette er ikke tilfredsstillende: Tenk deg en rullbar karusell av produkter som en bruker kan dra for å bla. Hvis det bare stoppet død i stedet for momentum rulling, ville det være mindre behagelig å bruke.

Det ville være vanskeligere også, fordi den totale fysiske innsatsen som trengs for å rulle karusellen, ville være høyere.

For å aktivere animasjoner som dette, må vi først kjenne hastighet av objektet kastes.

Sporhastighet

Popmotion gir en funksjon som kan hjelpe oss å spore hastighet. Det heter verdi. La oss importere det:

const peker, styler, verdi = popmotion;

For å snakke teknisk for et øyeblikk, er alle Popmotions animasjoner kjent som handlinger. Handlinger er reaktive strømmer av verdier som kan startes og stoppes.

EN verdi er omvendt a reaksjon. Det kan ikke stoppes eller startes. Det svarer bare passivt når det er Oppdater Metoden kalles. Den kan holde styr på verdier og kan brukes til å spørre om deres hastighet.

Så, etter at vi har definert ballStyler, la oss definere en ny verdi til ballXY:

const ballXY = verdi (x: 0, y: 0);

Når som helst ballXY oppdateringer, vi vil oppdatere ballStyler. Vi kan sende et annet argument til verdi, en funksjon som vil løpe når ballXY oppdateringer:

const ballXY = verdi (x: 0, y: 0, ballStyler.set);

Nå kan vi omskrive vår pekeren å oppdatere ballXY i stedet for ballStyler.set:

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

Nå kan vi ringe ved hvilken som helst peker ballXY.getVelocity () og vi mottar begge hastighetene x og y, klar til å plugge inn i våre hastighetsbaserte animasjoner.

Hastighetsbaserte animasjoner

vår

Den første hastighetsbaserte animasjonen å introdusere er vår. Den er basert på de samme ligningene som styrer Apples CASpringAnimation, våren animasjonen bak alt som iOS spredt lekfullhet.

Importere:

const peker, vår, styler, verdi = popmotion;

Nå, endre stopTracking slik at i stedet for å stoppe pointerTracker animasjon, starter den a vår animasjon som dette:

const stopTracking = () => vår (fra: ballXY.get (), hastighet: ballXY.getVelocity (), til: 0, stivhet: 100, demping: 20). start (ballXY);

Vi gir det med ballens nåværende posisjon, dens hastighet og et mål, og simuleringen kjøres. Det endres avhengig av hvordan brukeren har kastet ballen.

Den kule tingen om fjærer er at de er uttrykksfulle. Ved å justere masse, stivhet og demping egenskaper, kan du ende opp med radikalt forskjellige spring-føles.

For eksempel, hvis du bare endrer stivhet over til 1000, Du kan lage en bevegelse som føles som høy energi snapping. Deretter, ved å endre masse til 20, du lager bevegelse som ser nesten ut som tyngdekraften.

Det er en kombinasjon som vil føle seg riktig og tilfredsstillende for brukerne, og passende for merkevaren din, under nesten alle omstendigheter. Ved å spille med forskjellige vårføler kan du kommunisere forskjellige følelser, som en streng utjevning eller en mykere bekreftende sprette.

forfall

De forfall animasjon, som navnet antyder, henfall Den angitte hastigheten, slik at animasjonen gradvis bremser til et komplett stopp.

Dette kan brukes til å skape momentumrulleffekten som finnes på smarttelefoner, slik som dette:

Importer forfall funksjon:

const forfall, peker, vår, styler, verdi = popmotion;

Og erstatte stopTracking fungere med følgende:

const stopTracking = () => forfall (fra: ballXY.get (), hastighet: ballXY.getVelocity ()). start (ballXY);

forfall beregner automatisk et nytt mål basert på den angitte fra og hastighet Rekvisitter.

Det er mulig å justere følelsen av decelerasjonen ved å rote med rekvisitter som er skissert i docs koblet over, men i motsetning til vår og fysikk, forfall er designet for å trene ut av esken. 

fysikk

Endelig har vi fysikk animasjon. Dette er Popmotions sveitsiske hærkniv av hastighetsbaserte animasjoner. Med det kan du simulere:

• konstant hastighet
• akselerasjon
• fjærer
• friksjon

vår og forfall tilbyr super presis bevegelse og et bredere utvalg av "føles". Snart vil de begge være skrubbare.

Men begge er uforanderlige. Når du har startet, blir deres egenskaper satt i stein. Perfekt for når vi vil starte en animasjon basert på den første fra/hastighet stat, men ikke så bra hvis vi ønsker kontinuerlig samhandling.

fysikk, i stedet er en integrert simulering nærmere det av et videospill. Det virker av, en gang per ramme, å ta den nåværende tilstanden og deretter endre den basert på gjeldende egenskaper på det tidspunktet.

Dette tillater det å være foranderlig, som betyr at vi kan endre disse egenskapene, som deretter endrer utfallet av simuleringen.

For å demonstrere dette, la oss gjøre en vri på klassisk pekerutjevning, med elastisk utjevning.

Importere fysikk:

const peker, vår, fysikk, styler, verdi = popmotion;

Denne gangen kommer vi til å endre startTracking funksjon. I stedet for å endre ballXY med pekeren, vi skal bruke fysikk:

const.txt = () => const physicsAnimation = fysikk (fra: ballXY.get () til: ballXY.get (), hastighet: ballXY.getVelocity (), restSpeed: false, friksjon: 0,6, springStrength: 400 ) .start (ballXY); ;

Her setter vi inn fra og hastighet som normalt. friksjon og springStrength begge justerer egenskapene til våren.

restSpeed: false overstyrer standard oppførsel av animasjonen som stopper når bevegelsen stopper. Vi vil stoppe det manuelt i stopTracking.

På egen hånd vil denne animasjonen ikke gjøre noe fordi vi setter til, vårens mål, til det samme som fra. Så la oss reimplementere pekeren sporer denne gangen for å endre vårmål for fysikk. På siste linje av startTracking, Legg til:

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

Her bruker vi en lignende pekeren animasjon som før. Bortsett fra denne tiden, bruker vi den til å endre målet for en annen animasjon. På den måten oppretter vi denne elastiske pekersporing:

Konklusjon

Hastighetsbaserte animasjoner kombinert med pekersporing kan skape engasjerende og lekende grensesnitt.

vår kan brukes til å skape et bredt spekter av vårføler, mens forfall er spesielt skreddersydd for momentum rulle animasjoner. fysikk er mer begrenset enn enten med hensyn til konfigurerbarhet, men gir også muligheten til å endre simuleringen pågår, åpne nye samspillingsmuligheter.

I neste og siste del av denne introduksjonsserien om Popmotion skal vi ta alt vi har lært i de to første delene, og bruk dem sammen med litt lett funksjonell sammensetning for å skape en skrubbar animasjon sammen med en skrubber å gjøre skrubbe med!