Share
Popmotion er et funksjonelt JavaScript animasjonsbibliotek. Sammenlignet med andre biblioteker som GreenSock eller Anime.js, er Popmotion lavt og ubøyelig.
Den pakker massevis av funksjoner, som vårfysikk og pekersporing, inn i en svært liten filstørrelse (11,5 kb).
Det tillater utviklere å skrive sine egne funksjoner ved hjelp av enkle funksjoner, i stedet for å vente på at biblioteksforfatteren legger til dem.
Det betyr også at det er like enkelt å animere 3D-objekter, diagrammer eller React-komponenter som det er å animere DOM- eller SVG-elementer.
Denne fleksibiliteten kan gjøre den første læringskurven brattere enn for andre biblioteker. Så i denne opplæringsserien lærer vi grunnleggende om Popmotions kraftige animasjoner. Vi starter med arbeidshesten av animasjonsverdenen, The tween.
Popmotion støtter en rekke installasjonsmetoder. I produksjon anbefaler jeg å installere via npm, da dette bare gjør at du bare kan importere biter du trenger, og sparer plass enda lenger.
Men for denne opplæringen kan du følge med denne CodePen, som er satt opp med den nyeste versjonen av Popmotion.
For de ukjente, en tweenovergang mellom ett nummer og et annet over en forhåndsbestemt tid. Hvis du har brukt en CSS-overgang, er Popmotion's tween funksjonen fungerer akkurat det samme.
Vi kan importere tween som så:
const tween = popmotion;
Som standard, tween animerer mellom 0 og 1 over en varighet på 300 millisekunder. Hvis du åpner konsollen din, kan du teste dette selv:
Accentsconagua
tween (). start (update: v => console.log (v), fullfør: () => console.log ('complete!'));Men vi ønsker ikke å animere konsollen - vi vil animere ballen. For dette inkluderer Popmotion en annen funksjon, styler.
Merk: I dette første eksempelet definerte vi begge Oppdaterog fullstendig funksjoner. Men hvis du gir start Med bare en enkelt funksjon, vil den automatisk tildele den til Oppdater.
styler brukes til å opprette få / sett grensesnitt for HTML og SVG stiler optimalisert for bruk med animasjoner (fra et hvilket som helst bibliotek!).
I eksemplet ovenfor, tween utgir et tall, så vi kunne selvfølgelig sette kulens opasitet som dette (prøv det):
const ball = document.querySelector ('ball'); tween (). start (v => ball.style.opacity = v);derimot, styler har følgende fordeler:
forvandle rekvisitter som skal settes individuelt, slik at selvstendige animasjon av rekvisitter som skala og translateX.translateX (for eksempel) uten å legge til 'Px'.Du er heller ikke begrenset til å bruke den i en animasjon. Du kan manuelt angi et elements stil mens andre er animerende, og endringen blir automatisk planlagt og batchet sammen med de andre.
Så la oss importere det:
const tween, styler = popmotion;
Lag ball styler:
const ballStyler = styler (ball);
Nå kan vi bruke ballStyler å sette og animere noen av ballens egenskaper. ballStyler.set er fleksibel. Det kan angi en enkelt eiendom:
ballStyler.set ('background', '# f00');Eller flere egenskaper:
ballStyler.set (x: 100, y: 100);
Vi ønsker å animere opasitet for nå, så la oss endre animasjonen vår:
tween (). start (v => ballStyler.set ('opacity', v));sett kan også være curried. Ved å gi det bare et eiendomsnavn, vil det returnere en setter-funksjon for den prop. Så vi kan neaten ovenfor ved å skrive:
. Tween () start (ballStyler.set ( 'opacity'));
Så langt har vi bare animert ballen ved hjelp av standard tween eiendommer. La oss ta en titt på hvor allsidig a tween kan være.
tween aksepterer et valgfritt argument, et objekt av tween egenskaper. La oss ta en titt på noen av de mest brukte rekvisita:
fra/til EN tween kan være mellom alle to tilstander. Vi definerer disse med fra og til.
La oss animere translateX ved å skrive om 'Opacity' til 'X'. Så passere fra og til Rekvisitter:
tween (fra: 0 til: 300)
Din ball beveger nå fra venstre til høyre med 300px.
Men jeg sa at a tween kan være mellom to stater, ikke bare tall. Hvis vi gir fra og til objekter av tall og / eller farger, Vi kan animere flere egenskaper samtidig.
Prøv dette:
tween (fra: x: 0, background: '# 198FE3', til: x: 300, bakgrunn: '# FF1C68') start (ballStyler.set);
Dette er en enkel måte å animere flere rekvisitter samtidig.
varighet er definert i millisekunder. Som standard vil en tween ta 300ms, men hvis vi setter varighet til 1000, det tar et sekund:
tween (varighet: 1000, fra: 0 til: 300). start (ballStyler.set ('x'));Easing-funksjoner brukes i tweening for å endre bevegelseshastigheten gjennom animasjonen.
I virkeligheten begynner objekter ikke eller stopper ved målhastigheten. Avhengig av objektet, øker de gradvis opp, eller gradvis saktere, eller begge deler.
En lettelsefunksjon fungerer bare ved å ta tweenens fremgang, definert som et tall mellom 0 og 1, og returnerer en ny.
Du trenger ikke å vite hvordan du gjør disse funksjonene fordi Popmotion gir deg en haug.
Importer dem:
const easing, tween, styler = popmotion;
Som standard, letthet er satt til easing.easeOut. Når en funksjon letter ut, betyr det det starter fort og slutter sakte.
Dette ble valgt som standard fordi det er min tro på at de fleste animasjoner i brukergrensesnitt skal starte som et resultat av en brukers handling. Ved å starte raskt og slutte sakte, vil brukeren føle seg som om de overførte sin energi, via deres trykk eller klikk, direkte inn i grensesnittet. Det føles snappy, levende og responsivt.
For mange animasjoner vekk fra brukerens innspill, eller på egenhånd, kan det føles litt mindre grusomt å bruke en animasjon som lindrer seg i, som easing.easeInOut eller easing.anticipate, som gjør en lekfull slæbebane før det blir animert.
Til slutt er det easing.cubicBezier funksjon, som skaper en ny lettelse funksjon basert på en lettelse kurve, akkurat som CSS overganger. Dette gir en enorm grad av kontroll og fleksibilitet over bevegelsen.
Prøv å bruke noen av disse til animasjonen din mens du leker med varighet for å se hvordan det påvirker følelsen og karakteren av den.
Animasjoner kan gjentas på tre forskjellige måter: sløyfe, yoyo, og flip.
Loop starter animasjonen fra starten. yoyo speiler tweenen ved å kjøre den bakover. Og flip kjører det bakover ogflipper lettelsefunksjonen.
En av disse kan settes per tween, og hver er satt som et tall som angir antall ganger for å gjenta animasjonen. For å gjenta for alltid, bare pass evighet:
tween (yoyo: Infinity, fra: 0 til: 300). start (ballStyler.set ('x'));Når en tween er startet, returnerer den avspillingskontroller som vi kan bruke til å kontrollere den animasjonen.
const controls = tween (). start (console.log);
I eksemplet ovenfor, kontroller vil ha tilgang til alle disse avspillingsmetodene, som Stoppe, pause, og gjenoppta:
const controls = tween (varighet: 1000, fra: 0 til: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Vi kan bruke disse avspillingskontrollene til pause og så søke gjennom tween:
const controls = tween (varighet: 1000, fra: 0 til: 300). start (ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Med dette kan vi lage en skrubbar animasjon! I en senere opplæring vil vi undersøke hvordan du bruker Popmotions pekeren Fungerer for å lage en skrubbe, men for nå kan du skrubbe en tween med en andre tween, for å se dette i aksjon:
const controls = tween (fra: 0 til: 300). start (ballStyler.set ('x')); controls.pause (); tween (varighet: 1000) .start (controls.seek);For enkle, a-til-b overganger, tween er utmerket. For mer kompliserte sekvenser av tweens, gir Popmotion en annen funksjon som heter nøkkelbilder.
La oss importere det nå:
const keyframes, easing, tween, styler = popmotion;
nøkkelbilder tweens gjennom alineær serie stater. Vi gir disse statene til sin verdier eiendom:
keyframes (values: [0, -150, 150, 0], duration: 2000). start (ballStyler.set ('x'));Som tween, Vi kan også definere disse tilstandene som objekter. Så for å flytte ballen rundt i en firkant, kan vi skrive:
keyframes (verdier: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], varighet: 2000). start (ballStyler.set);
Som standard, nøkkelbilder vil tildele hver av disse tweens en lik andel av det totale varighet.
Ved å gi en ganger array, kan vi markere hver av disse statene med et tall mellom 0 og 1. 0 representerer starten på animasjonen, og 1 representerer slutten:
keyframes (verdier: [0, -150, 150, 0], ganger: [0, 0,1, 0,9, 1], varighet: 2000). start (ballStyler.set ('x'));På denne måten kan vi justere lengden på animasjonen uten å måtte merke hvert enkelt segment.
Det tillater også at hver animasjon blir gitt en enkel lettelse med easing eiendom:
keyframes (verdier: [0, -150, 150, 0], ganger: [0, 0.1, 0.9, 1], easings: [easing.easeIn, easing.linear, easing.easeOut], duration: 2000). start (ballStyler.set ( 'x'));
Fordi nøkkelbilder er bare en tween, Vi kan justere den samlede avspillingen med alle de samme egenskapene som letthet og sløyfe, og kontroller det med alle de samme metodene som vi lærte tidligere.
De tween og nøkkelbilder funksjoner lar deg lage både enkle og komplekse animasjoner.
styler bringer sine egne fordeler, som bruk utenfor animasjoner, standardisering av CSS og SVG transform-modeller, og gjør batching for høy animasjonsytelse.
I denne opplæringen har vi dekket bare et par animasjoner som Popmotion tilbyr. I neste avdrag skal vi utforske pekersporing og hastighetsbaserte animasjoner som fysikk og vår.
Velocity-baserte animasjoner kan brukes til å skape naturlige følelsesmessige brukergrensesnitt som reagerer realistisk på brukerens innspill. Ser deg der!
