Share
Popmotion is een functionele JavaScript-animatiebibliotheek. Vergeleken met andere bibliotheken zoals GreenSock of Anime.js, is Popmotion low-level en unopinionated.
Het pakket bevat een groot aantal functies, zoals veerfysica en aanwijzer volgen, in een zeer kleine bestandsgrootte (11.5kb).
Hiermee kunnen ontwikkelaars hun eigen functies schrijven met behulp van eenvoudige functies, in plaats van te wachten tot de auteur van de bibliotheek ze toevoegt.
Het betekent ook dat het net zo gemakkelijk is om 3D-objecten, grafieken of componenten te animeren als het is om DOM- of SVG-elementen te animeren.
Deze flexibiliteit kan de initiële leercurve steiler maken dan voor andere bibliotheken. In deze tutorialserie leren we de basisprincipes van de krachtige animaties van Popmotion. We beginnen met het werkpaard van de animatiewereld, de tween.
Popmotion ondersteunt een verscheidenheid aan installatiemethoden. In de productie raad ik aan om via npm te installeren, omdat je dan alleen de benodigde bits kunt importeren, waardoor je nog meer ruimte bespaart.
Voor deze zelfstudie kunt u echter deze CodePen volgen, die is ingesteld met de nieuwste versie van Popmotion.
Voor degenen die niet vertrouwd zijn, gaat een tween over een vooraf bepaalde tijdsduur over tussen het ene getal en het andere. Als je een CSS-overgang hebt gebruikt, Popmotion's tween functie werkt precies hetzelfde.
We kunnen importeren tween zoals zo:
const tween = popmotion;
Standaard, tween animeert tussen 0 en 1 gedurende een duur van 300 milliseconden. Als u uw console opent, kunt u dit zelf testen:
Accentsconagua
tween (). start (update: v => console.log (v), voltooi: () => console.log ('compleet!'));Maar we willen de console niet animeren, we willen de bal animeren. Hiervoor bevat Popmotion een andere functie, styler.
Notitie: In dit eerste voorbeeld hebben we zowel de bijwerkenen compleet functies. Maar als je geeft begin met slechts een enkele functie, zal het automatisch toewijzen aan bijwerken.
styler wordt gebruikt om get / set-interfaces te maken voor HTML- en SVG-stijlen die zijn geoptimaliseerd voor gebruik met animaties (uit elke bibliotheek!).
In het bovenstaande voorbeeld, tween geeft een nummer af, dus we kunnen natuurlijk de dekking van de bal op deze manier instellen (probeer het):
const ball = document.querySelector ('. ball'); tween (). start (v => ball.style.opacity = v);Echter, styler heeft de volgende voordelen:
transformeren rekwisieten die afzonderlijk kunnen worden ingesteld, waardoor de onafhankelijke animatie van rekwisieten mogelijk is schaal en translateX.translateX (bijvoorbeeld) zonder toe te voegen 'Px'.Je bent ook niet beperkt tot het gebruik van het in een animatie. U kunt de stijl van een element handmatig instellen terwijl andere animeren en de wijziging wordt automatisch gepland en samen met de anderen gemaakt.
Dus laten we het importeren:
const tween, styler = popmotion;
Maak de bal styler:
const ballStyler = styler (bal);
Nu kunnen we gebruiken ballStyler om elk van de eigenschappen van de bal in te stellen en te animeren. ballStyler.set is flexibel. Het kan een enkele eigenschap instellen:
ballStyler.set ('background', '# f00');Of meerdere eigenschappen:
ballStyler.set (x: 100, y: 100);
We willen animeren ondoorzichtigheid voorlopig dus laten we onze animatie wijzigen:
tween (). start (v => ballStyler.set ('opacity', v));reeks kan ook worden gecurryed. Door het alleen een eigenschapnaam te geven, zal het een setter-functie voor die prop teruggeven. Dus we kunnen het bovenstaande negeren door te schrijven:
. Tween () te starten (ballStyler.set ( 'ondoorzichtigheid'));
Tot nu toe hebben we de bal alleen geanimeerd met de standaardinstelling tween eigenschappen. Laten we eens kijken naar hoe veelzijdig a tween kan zijn.
tween accepteert een optioneel argument, een object van tween-eigenschappen. Laten we een paar van de meest gebruikte rekwisieten bekijken:
van/naar EEN tween kan tussen twee willekeurige staten zijn. We definiëren deze met van en naar.
Laten we animeren translateX door te herschrijven 'Ondoorzichtigheid' naar 'X'. Ga dan voorbij van en naar rekwisieten:
tween (from: 0, to: 300)
Je bal beweegt nu met 300px van links naar rechts.
Ik zei dat echter: tween kan tussen twee zijn staten, niet alleen cijfers. Als we bieden van en naar objecten van cijfers en / of kleuren, we kunnen meerdere eigenschappen tegelijkertijd animeren.
Probeer dit:
tween (from: x: 0, background: '# 198FE3', to: x: 300, background: '# FF1C68') start (ballStyler.set);
Dit is een eenvoudige manier om tegelijkertijd meerdere rekwisieten te animeren.
looptijd wordt gedefinieerd in milliseconden. Standaard duurt een tween 300 ms, maar als we instellen looptijd naar 1000, het duurt een seconde:
tween (duration: 1000, from: 0, to: 300). start (ballStyler.set ('x'));Verlichtingsfuncties worden gebruikt bij het tweenen om de bewegingssnelheid tijdens de animatie te wijzigen.
In het echte leven starten objecten niet of stoppen ze met hun doelsnelheid. Afhankelijk van het object, versnellen ze geleidelijk, of nemen geleidelijk af, of beide.
Een versnellingsfunctie werkt eenvoudig door de voortgang van de tween te nemen, gedefinieerd als een getal tussen 0 en 1, en een nieuwe retourneren.
Je hoeft niet te weten hoe je deze functies kunt maken, want Popmotion biedt een hoop voor je.
Importeer ze:
const easing, tween, styler = popmotion;
Standaard, gemak ingesteld op easing.easeOut. Wanneer een functie wegvalt, betekent het dat begint snel en eindigt langzaam.
Dit werd als standaard gekozen omdat het mijn overtuiging is dat de meeste animaties in gebruikersinterfaces zouden moeten starten als gevolg van de actie van een gebruiker. Door snel te beginnen en langzaam te eindigen, heeft de gebruiker het gevoel dat hij zijn energie, via de tik of klik, direct in de interface heeft overgebracht. Het voelt pittig, levendig en ontvankelijk.
Voor veel animaties weg van de input van de gebruiker, of op zichzelf, kan het een beetje minder schokkend aanvoelen om een animatie te gebruiken die makkelijker wordt, zoals easing.easeInOut of easing.anticipate, die een speelse ruk doet voordat ze animeert.
Eindelijk is er de easing.cubicBezier functie, die een nieuwe easing-functie creëert op basis van een versnellingscurve, net als bij CSS-overgangen. Dit biedt een enorme mate van controle en flexibiliteit over uw beweging.
Probeer sommige van deze toe te passen op je animatie terwijl je speelt met looptijd om te zien hoe het het gevoel en het karakter ervan beïnvloedt.
Animaties kunnen op drie verschillende manieren worden herhaald: lus, yoyo, en omdraaien.
Lus start de animatie vanaf het begin. yoyo spiegelt de tween door deze achterwaarts te laten lopen. En omdraaien draait het achteruit endraait de versnellingsfunctie om.
Een van deze kan per tween worden ingesteld en elke waarde wordt ingesteld als een getal dat staat voor het aantal keren dat de animatie moet worden herhaald. Om te herhalen voor altijd, gewoon passeren Oneindigheid:
tween (yoyo: Infinity, from: 0, to: 300). start (ballStyler.set ('x'));Wanneer een tween wordt gestart, worden de besturingselementen voor afspelen weergegeven die we kunnen gebruiken om die animatie te besturen.
const controls = tween (). start (console.log);
In het bovenstaande voorbeeld, controls krijgt toegang tot al deze afspeelmethoden, zoals hou op, pauze, en hervatten:
const controls = tween (duration: 1000, from: 0, to: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);We kunnen deze afspeelknoppen gebruiken voor pauze en dan zoeken door de tween:
const controls = tween (duration: 1000, from: 0, to: 300). start (ballStyler.set ('x')); controls.pause (); controls.seek (0,5);Hiermee kunnen we een scrubbare animatie maken! In een latere tutorial zullen we onderzoeken hoe je Popmotion's kunt gebruiken wijzer functie om een scrubbar te maken, maar nu kun je er een schrobben tween met een tweede tween, om dit in actie te zien:
const controls = tween (from: 0, to: 300). start (ballStyler.set ('x')); controls.pause (); tween (duration: 1000) .start (controls.seek);Voor eenvoudige, a-naar-b overgangen, tween is uitstekend. Voor meer gecompliceerde sequenties van tweens, biedt Popmotion een andere functie genaamd keyframes.
Laten we het nu importeren:
const keyframes, easing, tween, styler = popmotion;
keyframes tweens door eenlineaire reeks toestanden. Wij bieden deze staten aan waarden eigendom:
keyframes (waarden: [0, -150, 150, 0], duur: 2000). start (ballStyler.set ('x'));Net zoals tween, we kunnen deze toestanden ook als objecten definiëren. Dus om de bal in een vierkant te verplaatsen, kunnen we schrijven:
keyframes (waarden: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], duration: 2000). start (ballStyler.set);
Standaard, keyframes zal elk van deze tweens een gelijk deel van het totaal toewijzen looptijd.
Door een tijden array kunnen we elk van deze statussen markeren met een nummer ertussen 0 en 1. 0 staat voor het begin van de animatie, en 1 vertegenwoordigt het einde:
keyframes (waarden: [0, -150, 150, 0], tijden: [0, 0.1, 0.9, 1], duur: 2000). start (ballStyler.set ('x'));Op deze manier kunnen we de lengte van de animatie aanpassen zonder elk afzonderlijk segment te hoeven beoordelen.
Het zorgt er ook voor dat elke animatie een individuele versoepeling krijgt met de easings eigendom:
keyframes (values: [0, -150, 150, 0], times: [0, 0.1, 0.9, 1], easings: [easing.easeIn, easing.linear, easing.easeOut], duration: 2000). te starten (ballStyler.set ( 'x'));
Omdat keyframes is gewoon een tween, we kunnen zijn algemene weergave aanpassen met dezelfde eigenschappen als gemak en lus, en controleer het met dezelfde methoden die we eerder hebben geleerd.
De tween en keyframes functies kunt u zowel eenvoudige als complexe animaties maken.
styler brengt zijn eigen voordelen met zich mee, zoals gebruik buiten animaties, standaardisatie van CSS- en SVG-transformatiemodellen en renderbatching voor hoge animatiesnelheid.
In deze zelfstudie hebben we slechts een paar van de animaties besproken die Popmotion biedt. In de volgende aflevering gaan we naar aanwijzer volgen en op snelheid gebaseerde animaties zoals fysica en de lente.
Op snelheid gebaseerde animaties kunnen worden gebruikt om UI's met natuurlijk gevoel te creëren die realistisch op de invoer van een gebruiker reageren. Zie je daar!
