Share
Popmotion är ett funktionellt JavaScript-animationsbibliotek. Jämfört med andra bibliotek som GreenSock eller Anime.js, är Popmotion lågnivå och oinvesterad.
Den packar massor av funktioner, som vårfysik och pekarspårning, till en mycket liten filstorlek (11,5 kb).
Det gör det möjligt för utvecklare att skriva egna funktioner med hjälp av enkla funktioner, snarare än att vänta på att biblioteksförfattaren lägger till dem.
Det betyder också att det är lika enkelt att animera 3D-objekt, diagram eller React-komponenter som det är att animera DOM- eller SVG-element.
Denna flexibilitet kan göra initialkurvan brantare än för andra bibliotek. Så, i den här tutorialserien lär vi oss grunderna i Popmotions kraftfulla animationer. Vi börjar med animationsvärldens arbetshorse tween.
Popmotion stöder en mängd olika installationsmetoder. I produktion rekommenderar jag att du installerar via npm, eftersom det här låter dig bara importera de bitar du behöver, vilket sparar utrymme ännu mer.
Men för denna handledning kan du följa med denna CodePen, som har upprättats med den senaste versionen av Popmotion.
För de som är obekanta, en mellanliggande övergång mellan ett tal och en annan under en förutbestämd tid. Om du har använt en CSS-övergång, är Popmotions tween funktion fungerar exakt densamma.
Vi kan importera tween såhär:
const tween = popmotion;
Som standard, tween animerar mellan 0 och 1 över en varaktighet av 300 millisekunder. Om du öppnar konsolen kan du testa detta själv:
Accentsconagua
tween (). start (uppdatering: v => console.log (v), komplett: () => console.log ('complete!'));Men vi vill inte animera konsolen - vi vill animera bollen. För detta inkluderar Popmotion en annan funktion, styler.
Notera: I det här första exemplet definierade vi båda uppdateringoch komplett funktioner. Men om du ger Start med bara en enda funktion, kommer den automatiskt att tilldela den uppdatering.
styler används för att skapa gränssnitt för hämtning / inställning för HTML och SVG-stilar optimerade för användning med animeringar (från vilket bibliotek som helst!).
I ovanstående exempel, tween utger ett nummer, så vi kan naturligtvis sätta bollens opacitet så här (prova det):
const ball = document.querySelector ('. ball'); tween (). start (v => ball.style.opacity = v);dock, styler har följande fördelar:
omvandla rekvisita som ska ställas individuellt, vilket möjliggör självständig animering av rekvisita som skala och translateX.translateX (till exempel) utan att lägga till 'Px'.Du är inte heller begränsad till att använda den inom en animering. Du kan manuellt ställa in ett elements stil medan andra animerar, och ändringen kommer automatiskt att schemaläggas och sändas tillsammans med de andra.
Så låt oss importera det:
const tween, styler = popmotion;
Skapa boll styler:
const ballStyler = styler (boll);
Nu kan vi använda ballStyler att ställa in och animera någon av bollens egenskaper. ballStyler.set är flexibel. Det kan ställa in en enda egenskap:
ballStyler.set ('background', '# f00');Eller flera egenskaper:
ballStyler.set (x: 100, y: 100);
Vi vill animera opacitet för nu, så låt oss ändra vår animation:
tween (). start (v => ballStyler.set ('opacity', v));uppsättning kan också curry. Genom att bara ge det ett egendomsnamn returnerar det en setterfunktion för den propellen. Så vi kan nämna ovanstående genom att skriva:
. Tween () starta (ballStyler.set ( 'opacitet'));
Hittills har vi bara animerat bollen med standard tween egenskaper. Låt oss ta en titt på hur mångsidig a tween kan vara.
tween accepterar ett valfritt argument, ett objekt av tween-egenskaper. Låt oss ta en titt på några av de mer vanliga rekvisita:
från/till en tween kan vara mellan några två stater. Vi definierar dessa med från och till.
Låt oss animera translateX genom omskrivning 'opacitet' till 'X'. Passera sedan från och till rekvisita:
tween (från: 0 till: 300)
Din boll flyttas nu från vänster till höger med 300px.
Men jag sa att a tween kan vara mellan två stater, inte bara siffror. Om vi tillhandahåller från och till föremål av siffror och / eller färger, vi kan animera flera egenskaper samtidigt.
Prova detta:
tween (från: x: 0, background: '# 198FE3', till: x: 300, bakgrund: '# FF1C68') start (ballStyler.set);
Detta är ett enkelt sätt att animera flera rekvisita samtidigt.
varaktighet definieras i millisekunder. Som standard tar en tween 300ms, men om vi ställer in varaktighet till 1000, det tar en sekund:
tween (duration: 1000, från: 0 till: 300). start (ballStyler.set ('x'));Easingfunktioner används i tweening för att ändra rörelseshastigheten under animeringen.
I verkliga livet startar eller stoppar inte objekt vid deras målhastighet. Beroende på objektet kommer de gradvis att öka, eller gradvis sakta ner, eller båda.
En lättnad funktion fungerar helt enkelt genom att ta intervallets framsteg, definierad som ett tal mellan 0 och 1, och återkommer en ny.
Du behöver inte veta hur man gör dessa funktioner eftersom Popmotion ger dig en massa.
Importera dem:
const easing, tween, styler = popmotion;
Som standard, lätthet är satt till easing.easeOut. När en funktion lättas ut betyder det det börjar snabbt och slutar långsamt.
Detta valdes som standard eftersom det är min tro på att de flesta animationer i användargränssnitt ska initiera som ett resultat av en användares åtgärd. Genom att starta snabbt och sluta långsamt, kommer användaren att känna som om de överförde sin energi via sina knappar eller klickar direkt till gränssnittet. Det känns snällt, levande och lyhörd.
För många animeringar bort från användarens inmatning, eller på egen hand, kan det känna sig lite mindre för att använda en animering som lättnar in, som easing.easeInOut eller easing.anticipate, vilket gör en lekfull bogserbåt före animering.
Slutligen finns det easing.cubicBezier funktion, vilket skapar en ny lättnad funktion baserad på en lättnadskurva, precis som CSS-övergångar. Detta ger en stor grad av kontroll och flexibilitet över din rörelse.
Försök att applicera några av dessa på din animering när du spelar med varaktighet för att se hur det påverkar känslan och karaktären av den.
Animationer kan upprepas på tre olika sätt: slinga, jojo, och flip.
Slinga startar animationen från början. Jojo speglar mellanrummen genom att köra den bakåt. Och flip kör det bakåt ochspringer lättare funktionen.
En av dessa kan ställas in per tween och varje sätts som ett tal som anger hur många gånger som ska repeteras. För att repetera för alltid, gå enkelt Oändlighet:
tween (yoyo: Infinity, från: 0 till: 300). starta (ballStyler.set ('x'));När en tween startas, returnerar den uppspelningskontroller som vi kan använda för att styra den animationen.
const controls = tween (). start (console.log);
I ovanstående exempel, kontroller kommer ha tillgång till alla dessa uppspelningsmetoder, som sluta, paus, och återuppta:
const controls = tween (duration: 1000, från: 0 till: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Vi kan använda dessa uppspelningskontroller till paus och då söka genom intervallet:
const controls = tween (duration: 1000, från: 0 till: 300). start (ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Med detta kan vi skapa en skurbar animering! I en senare handledning undersöker vi hur man använder Popmotions pekare funktion för att skapa en scrub bar, men för närvarande kan du skrubba en tween med en andra tween, för att se detta i åtgärd:
const controls = tween (från: 0 till: 300). start (ballStyler.set ('x')); controls.pause (); tween (duration: 1000) .start (controls.seek);För enkla, a-till-b-övergångar, tween är utmärkt. För mer komplicerade sekvenser av tweens, ger Popmotion en annan funktion som heter nyckelrutor.
Låt oss importera det nu:
const keyframes, easing, tween, styler = popmotion;
nyckelrutor tweens genom alinjär serie stater. Vi ger dessa stater till dess värden fast egendom:
keyframes (värden: [0, -150, 150, 0], duration: 2000). start (ballStyler.set ('x'));Tycka om tween, vi kan också definiera dessa stater som objekt. Så för att flytta bollen runt i en kvadrat kan vi skriva:
keyframes (värden: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], varaktighet: 2000). start (ballStyler.set);
Som standard, nyckelrutor kommer att fördela var och en av dessa tweens en lika stor andel av det totala varaktighet.
Genom att tillhandahålla en gånger array, kan vi markera var och en av dessa stater med ett tal mellan 0 och 1. 0 representerar starten på animationen och 1 representerar slutet:
keyframes (värden: [0, -150, 150, 0], gånger: [0, 0,1, 0,9, 1], varaktighet: 2000). start (ballStyler.set ('x'));På så sätt kan vi ändra animationslängden utan att behöva ange varje enskilt segment.
Det låter också varje animering ges en individuell lättnad med lättnader fast egendom:
keyframes (värden: [0, -150, 150, 0], tider: [0, 0,1, 0,9, 1], easings: [easing.easeIn, easing.linear, easing.easeOut], duration: 2000). start (ballStyler.set ( 'x'));
Därför att nyckelrutor är bara en tween, Vi kan justera den övergripande uppspelningen med alla samma egenskaper som lätthet och slinga, och kontrollera det med alla samma metoder som vi lärt oss tidigare.
De tween och nyckelrutor funktioner kan du skapa både enkla och komplexa animationer.
styler ger egna fördelar, som användningen utanför animationer, standardisering av CSS och SVG-transformmodeller, och gör batching för hög animationsprestanda.
I den här handledningen har vi täckt några av de animationer som Popmotion erbjuder. I nästa del kommer vi att utforska pekarspårning och hastighetsbaserade animeringar som fysik och vår.
Hastighetsbaserade animeringar kan användas för att skapa naturliga känslighetsgränssnitt som reagerar realistiskt på användarens inmatning. Vi ses där!
