Share
Welkom bij de Introductie tot Popmotion-lessenreeks. In deel 1 hebben we ontdekt hoe je tweens en keyframes kunt gebruiken om nauwkeurige, in de tijd geplande animaties te maken.
In deel 2 gaan we kijken naar pointer-tracking en op snelheid gebaseerde animaties.
Met het volgen van de aanwijzer kunnen we schuifbare productschappen, schuifregelaars met aangepaste waarde of slepen-en-neerzetten-interfaces maken.
Velocity-gebaseerde animaties verschillen van een op tijd gebaseerde animatie zoals tween omdat de primaire eigenschap die beïnvloedt hoe de animatie zich gedraagt, is snelheid. De animatie zelf kan even duren.
We zullen kijken naar de drie op snelheid gebaseerde animaties in Popmotion, de lente, verval, en fysica. We zullen de gebruiken snelheid van de aanwijzer-trackinganimatie om deze animaties te starten, en dat zal aantonen hoe op snelheid gebaseerde animaties boeiende en speelse gebruikersinterfaces kunnen creëren op een manier dat op tijd gebaseerde animaties eenvoudig niet kunnen.
Open eerst deze CodePen om mee te spelen.
Popmotion biedt het wijzer functie om de coördinaten van een muisaanwijzer of een aanraakaanwijzer bij te houden en uit te voeren.
Laten we dit samen met importeren styler, waarmee we de positie van de bal kunnen bepalen.
Accentsconagua
const pointer, styler = popmotion; const ball = document.querySelector ('. ball'); const ballStyler = styler (bal);Voor dit voorbeeld willen we de bal slepen. Laten we een gebeurtenis toevoegen die de positie van de aanwijzer naar de bal uitvoert:
laat pointerTracker; const startTracking = () => pointerTracker = pointer (). start (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);We willen ook dat een code stopt met traceren wanneer we de bal loslaten:
const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ('mouseup', stopTracking); document.addEventListener ('touchend', stopTracking);Als je de bal nu probeert te slepen, is er een duidelijk probleem. De bal springt weg wanneer we hem aanraken! Geen geweldige gebruikerservaring.
Dit komt omdat, standaard, wijzer geeft de positie van de aanwijzer door ten opzichte van de pagina.
De positie van de aanwijzer uitvoeren ten opzichte van een ander punt, in dit geval de x / y-transformatie van de bal, kunnen we eenvoudig die positie doorgeven aan wijzer zoals dit:
const startTracking = () => pointerTracker = pointer (x: ballStyler.get ('x'), y: ballStyler.get ('y')). start (ballStyler.set); ;Nu heb je de bal gemaakt, in slechts enkele regels code, versleepbaar! Wanneer de gebruiker de bal loslaat, stopt deze echter dood.
Dit voldoet niet: stel je een scrollbare carrousel voor van producten die een gebruiker kan slepen om te scrollen. Als het gewoon dood zou stoppen in plaats van met momentum scrollen, zou het minder plezierig zijn om te gebruiken.
Het zou ook moeilijker zijn, omdat de totale fysieke inspanning die nodig is om door de carrousel te bladeren hoger zou zijn.
Om animaties als deze in te schakelen, moeten we eerst de snelheid van het object dat wordt gegooid.
Popmotion biedt een functie die ons kan helpen om de snelheid te volgen. Het heet waarde. Laten we dat importeren:
const pointer, styler, value = popmotion;
Om een moment technisch te spreken, zijn alle animaties van Popmotion bekend acties. Acties zijn reactieve informatiestromen die kunnen worden gestart en gestopt.
EEN waarde is, omgekeerd, een reactie. Het kan niet worden gestopt of gestart. Het reageert gewoon passief wanneer het bijwerken methode wordt genoemd. Het kan de waarden bijhouden en kan worden gebruikt om hun snelheid op te vragen.
Dus, nadat we het hebben gedefinieerd ballStyler, laten we een nieuw definiëren waarde voor ballXY:
const ballXY = waarde (x: 0, y: 0);
telkens als ballXY updates die we willen updaten ballStyler. We kunnen een tweede argument doorgeven waarde, een functie die altijd wordt uitgevoerd ballXY updates:
const ballXY = waarde (x: 0, y: 0, ballStyler.set);
Nu kunnen we onze herschrijven wijzer updaten ballXY in plaats van ballStyler.set:
const startTracking = () => pointer (ballXY.get ()) .start (ballXY); ;
Nu kunnen we bij elke aanwijzer bellen ballXY.getVelocity () en we zullen de snelheden van beide ontvangen X en Y, klaar om te pluggen in onze op snelheid gebaseerde animaties.
de lenteDe eerste op snelheid gebaseerde animatie om te introduceren is de lente. Het is gebaseerd op dezelfde vergelijkingen die van toepassing zijn op Apple's CASpringAnimation, de lente-animatie achter al die iOS-achtige speelsheid.
Importeren:
const pointer, spring, styler, value = popmotion;
Nu, wijzigen stopTracking zodat in plaats van het stoppen van de pointerTracker animatie, het begint a de lente animatie zoals deze:
const stopTracking = () => spring (from: ballXY.get (), velocity: ballXY.getVelocity (), to: 0, stijfheid: 100, demping: 20). start (ballXY);
We bieden hem de huidige positie van de bal, zijn snelheid en een doelwit en de simulatie wordt uitgevoerd. Het verandert afhankelijk van hoe de gebruiker de bal heeft gegooid.
Het leuke aan veren is dat ze expressief zijn. Door de massa-, stijfheid en demping eigenschappen, kunt u eindigen met radicaal verschillende veergevoelens.
Bijvoorbeeld als u alleen de stijfheid hierboven naar 1000, je kunt een beweging creëren die aanvoelt als energiek knappen. Vervolgens door te veranderen massa- naar 20, je creëert beweging die bijna lijkt op zwaartekracht.
Er is een combinatie die goed en bevredigend zal aankomen voor uw gebruikers en past bij uw merk, onder vrijwel elke omstandigheid. Door te spelen met verschillende veergevoeligheden, kunt u verschillende gevoelens overbrengen, zoals een strikte out-of-bounds-breuk of een zachtere bevestigende bounce..
vervalDe verval animatie, zoals de naam doet vermoeden, verval de aangeleverde snelheid, zodat de animatie geleidelijk vertraagt tot een volledige stop.
Dit kan worden gebruikt om het momentum-scrolleffect op smartphones te creëren, zoals dit:
Importeer de verval functie:
const decay, pointer, spring, styler, value = popmotion;
En vervang de stopTracking functie met het volgende:
const stopTracking = () => verval (van: ballXY.get (), velocity: ballXY.getVelocity ()). start (ballXY);
verval berekent automatisch een nieuw doel op basis van het geleverde van en snelheid rekwisieten.
Het is mogelijk om het gevoel van de vertraging aan te passen door te knoeien met de rekwisieten die zijn beschreven in de documenten die hierboven zijn gelinkt, maar in tegenstelling tot de lente en fysica, verval is ontworpen om uit de doos te werken.
fysicaEindelijk hebben we de fysica animatie. Dit is Popmotion's Zwitserse zakmes van op snelheid gebaseerde animaties. Hiermee kun je:
de lente en verval bieden een supernauwkeurige beweging en een breder scala aan 'aanrakingen'. Binnenkort zullen ze allebei ook schrobbaar zijn.
Maar beide zijn onveranderlijk. Als u eenmaal bent begonnen, worden hun eigenschappen in steen gezet. Perfect voor wanneer we een animatie willen starten op basis van de initiaal van/snelheid staat, maar niet zo goed als we permanente interactie willen.
fysica, in plaats daarvan is het een geïntegreerde simulatie dichter bij dat van een videogame. Het werkt door, eenmaal per frame, de huidige status te nemen en vervolgens te wijzigen op basis van de huidige eigenschappen op dat moment.
Dit staat het toe veranderlijk, wat betekent dat we die eigenschappen kunnen wijzigen, wat vervolgens de uitkomst van de simulatie verandert.
Om dit te demonstreren, maken we een draai aan klassieke pointer smoothing, met elastische smoothing.
Importeren fysica:
const pointer, spring, physics, styler, value = popmotion;
Deze keer gaan we het veranderen startTracking functie. In plaats van veranderen ballXY met wijzer, we zullen gebruiken fysica:
const startTracking = () => const physicsAnimation = physics (van: ballXY.get (), to: ballXY.get (), velocity: ballXY.getVelocity (), restSpeed: false, friction: 0.6, springStrength: 400 ) .start (ballXY); ;
Hier gaan we zitten van en snelheid zoals normaal. wrijving en springStrength beide passen de eigenschappen van de veer aan.
restSpeed: false overschrijft het standaardgedrag van de animatie die stopt wanneer de beweging stopt. We willen het handmatig stoppen stopTracking.
Op zichzelf zal deze animatie niets doen omdat we ingesteld hebben naar, het doelwit van de lente, naar dezelfde als van. Dus laten we het opnieuw implementeren wijzer deze tijd volgen om het lentedoel van te veranderen fysica. Op de laatste regel van startTracking, toevoegen:
pointerTracker = pointer (ballXY.get ()). start ((v) => physicsAnimation.setSpringTarget (v););
Hier gebruiken we een soortgelijke wijzer animatie zoals eerder. Behalve deze keer gebruiken we het om het doelwit van een andere animatie te wijzigen. Door dit te doen, creëren we deze elastische aanwijzer-tracking:
Op snelheid gebaseerde animaties gecombineerd met het volgen van de aanwijzer kunnen boeiende en speelse interfaces creëren.
de lente kan worden gebruikt om een breed scala aan lente-gevoel te creëren, terwijl verval is speciaal afgestemd op momentum scroll-animaties. fysica is beperkter dan wat betreft de configureerbaarheid, maar biedt ook de mogelijkheid om de lopende simulatie te wijzigen en nieuwe interactiemogelijkheden te openen.
In het volgende en laatste deel van deze introductiereeks over Popmotion gaan we alles opnemen wat we hebben geleerd in de eerste twee delen en deze samen met een aantal lichte functionele composities gebruiken om een scrubbbare animatie te maken, samen met een scrubber om te doen het schrobben met!
