Share
Willkommen bei der Einführung in die Einführung zu Popmotion. In Teil 1 haben wir entdeckt, wie Tweens und Keyframes verwendet werden, um präzise, zeitlich geplante Animationen zu erstellen.
In Teil 2 werden wir die Zeigerverfolgung und geschwindigkeitsbasierte Animationen betrachten.
Mit der Zeigerverfolgung können Sie scrollbare Produktregale, Schieberegler für benutzerdefinierte Werte oder Drag-and-Drop-Schnittstellen erstellen.
Geschwindigkeitsbasierte Animationen unterscheiden sich von einer zeitbasierten Animation wie dem Tween-Verfahren dadurch, dass die primäre Eigenschaft, die das Verhalten der Animation beeinflusst, ist Geschwindigkeit. Die Animation selbst kann beliebig lange dauern.
Wir werden uns die drei Velocity-basierten Animationen in Popmotion anschauen, Frühling, zerfallen, und Physik. Wir werden die verwenden Geschwindigkeit der Zeiger-Tracking-Animation, um diese Animationen zu starten, und dies zeigt, wie durch geschwindigkeitsbasierte Animationen ansprechende und spielerische Benutzeroberflächen auf eine Weise erstellt werden können, die zeitbasierte Animationen einfach nicht können.
Öffnen Sie zuerst diesen CodePen, um mitzuspielen.
Popmotion liefert das Zeiger Mit dieser Funktion können Sie die Koordinaten einer Maus oder eines einzelnen Berührungszeigers verfolgen und ausgeben.
Lass uns das zusammen mit importieren Styler, Dadurch können wir die Position des Balls festlegen.
Accentsconagua
const pointer, styler = popmotion; const ball = document.querySelector ('. ball'); const ballStyler = Styler (Ball);Für dieses Beispiel möchten wir den Ball ziehen. Fügen wir ein Ereignis hinzu, das die Position des Zeigers an den Ball ausgibt:
zeig zeigerTracker; const startTracking = () => pointerTracker = pointer (). start (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);Wir wollen auch etwas Code, um die Verfolgung zu stoppen, wenn wir den Ball freigeben:
const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ('mouseup', stopTracking); document.addEventListener ('touchend', stopTracking);Wenn Sie jetzt versuchen, den Ball zu ziehen, gibt es ein offensichtliches Problem. Der Ball springt weg, wenn wir ihn berühren! Keine großartige Benutzererfahrung.
Dies ist standardmäßig so, Zeiger gibt die Zeigerposition aus relativ zur Seite.
Die Zeigerposition ausgeben relativ zu einem anderen Punkt, In diesem Fall können Sie die x / y-Transformation des Balls einfach an diese Position übergeben Zeiger so was:
const startTracking = () => pointerTracker = Zeiger (x: ballStyler.get ('x'), y: ballStyler.get ('y')). start (ballStyler.set); ;Jetzt haben Sie den Ball in sehr wenigen Codezeilen schleppbar gemacht! Wenn der Benutzer den Ball jedoch freigibt, bleibt er tot stehen.
Dies ist nicht zufriedenstellend: Stellen Sie sich ein scrollbares Karussell von Produkten vor, das ein Benutzer zum Scrollen ziehen kann. Wenn es einfach nicht mehr weiterläuft, als beim Scrollen, würde es weniger Spaß machen.
Es wäre auch schwieriger, da die gesamte körperliche Anstrengung zum Scrollen des Karussells höher wäre.
Um solche Animationen zu ermöglichen, müssen wir zuerst die Geschwindigkeit des Objekts, das geworfen wird.
Popmotion bietet eine Funktion, mit der wir die Geschwindigkeit verfolgen können. Es heißt Wert. Lass uns das importieren:
const Zeiger, Styler, Wert = Popmotion;
Technisch gesehen sind alle Animationen von Popmotion als bekannt Aktionen. Aktionen sind reaktive Werteströme, die gestartet und gestoppt werden können.
EIN Wert ist umgekehrt a Reaktion. Es kann nicht gestoppt oder gestartet werden. Es reagiert nur passiv, wenn es ist aktualisieren Methode wird aufgerufen. Es kann Werte nachverfolgen und deren Geschwindigkeit abfragen.
Also, nachdem wir definiert haben BallStyler, lass uns ein neues definieren Wert zum ballXY:
const ballXY = Wert (x: 0, y: 0);
Wann auch immer ballXY Updates möchten wir aktualisieren BallStyler. Wir können ein zweites Argument an übergeben Wert, eine Funktion, die immer ausgeführt wird ballXY Aktualisierung:
const ballXY = Wert (x: 0, y: 0, ballStyler.set);
Jetzt können wir unsere neu schreiben Zeiger aktualisieren ballXY anstatt ballStyler.set:
const startTracking = () => Zeiger (ballXY.get ()) .start (ballXY); ;
Nun, bei jedem Zeiger können wir anrufen ballXY.getVelocity () und wir erhalten die Geschwindigkeiten beider x und y, bereit, in unsere geschwindigkeitsbasierten Animationen einzusteigen.
FrühlingDie erste auf Geschwindigkeit basierende Animation ist Frühling. Es basiert auf den gleichen Gleichungen, die auch Apples CASpringAnimation beherrschen, die Federanimation hinter all dem iOS-Spiel.
Einführen:
const Zeiger, Feder, Styler, Wert = Popmotion;
Jetzt ändern stopTracking so dass, anstatt die zu stoppen pointerTracker Animation beginnt es ein Frühling Animation wie folgt:
const stopTracking = () => spring (from: ballXY.get (), Geschwindigkeit: ballXY.getVelocity (), bis: 0, Steifheit: 100, Dämpfung: 20). start (ballXY);
Wir liefern ihm die aktuelle Position des Balls, seine Geschwindigkeit und ein Ziel, und die Simulation wird ausgeführt. Dies hängt davon ab, wie der Benutzer den Ball geworfen hat.
Das Coole an Federn ist, dass sie ausdrucksstark sind. Durch Anpassen der Masse, Steifheit und Dämpfung Eigenschaften können Sie mit radikal anderen Federempfindungen enden.
Zum Beispiel, wenn Sie nur das ändern Steifheit über zu 1000, Sie können eine Bewegung erzeugen, die sich anfühlt wie ein energiereiches Einrasten. Dann durch Ändern Masse zu 20, Sie erzeugen eine Bewegung, die fast wie die Schwerkraft aussieht.
Es gibt eine Kombination, die sich für Ihre Benutzer unter nahezu allen Umständen als richtig und zufriedenstellend und für Ihre Marke geeignet anfühlt. Indem Sie mit verschiedenen Frühlingsgefühlen spielen, können Sie unterschiedliche Gefühle ausdrücken, wie ein strikter Ausreißer oder ein weicherer, positiver Sprung.
zerfallenDas zerfallen Animation, wie der Name schon sagt, zerfällt die angegebene Geschwindigkeit, so dass die Animation allmählich bis zum vollständigen Stillstand verlangsamt.
Dies kann verwendet werden, um den auf Smartphones gefundenen Momentum-Scrolling-Effekt wie folgt zu erzeugen:
Importieren Sie die zerfallen Funktion:
const decay, pointer, spring, styler, value = popmotion;
Und ersetzen Sie die stopTracking Funktion mit den folgenden:
const stopTracking = () => decay (from: ballXY.get (), Geschwindigkeit: ballXY.getVelocity ()). start (ballXY);
zerfallen berechnet automatisch ein neues Ziel basierend auf dem bereitgestellten von und Geschwindigkeit Requisiten.
Es ist möglich, das Gefühl der Verzögerung anzupassen, indem Sie mit den in den oben verknüpften Dokumenten beschriebenen Requisiten herumspielen, im Gegensatz dazu Frühling und Physik, zerfallen ist so konzipiert, dass sie sofort funktioniert.
PhysikEndlich haben wir die Physik Animation. Dies ist das Schweizer Messer von Popmotion, das Geschwindigkeits-Animationen enthält. Mit ihr können Sie simulieren:
Frühling und zerfallen bieten extrem präzise Bewegungen und eine breitere Auswahl an "Fühlen". Bald werden sie beide auch schrubben.
Aber beides ist unveränderlich. Sobald Sie begonnen haben, sind ihre Eigenschaften in Stein gemeißelt. Perfekt, wenn wir eine Animation basierend auf der ersten starten möchten von/Geschwindigkeit Zustand, aber nicht so gut, wenn wir eine ständige Interaktion wünschen.
Physik, stattdessen ist ein integrierte Simulation näher an das eines Videospiels. Es arbeitet, indem es einmal pro Frame den aktuellen Status übernimmt und ihn dann basierend auf den aktuellen Eigenschaften zu diesem Zeitpunkt ändert.
Das erlaubt es zu sein veränderlich, Das bedeutet, dass wir diese Eigenschaften ändern können, wodurch sich das Ergebnis der Simulation ändert.
Um dies zu demonstrieren, wenden wir die klassische Zeigerglättung mit elastischer Glättung an.
Einführen Physik:
const Zeiger, Frühling, Physik, Styler, Wert = Popmotion;
Dieses Mal werden wir das ändern startTracking Funktion. Anstatt sich zu ändern ballXY mit Zeiger, wir werden verwenden Physik:
const startTracking = () => const physicsAnimation = physics (von: ballXY.get (), an: ballXY.get (), Geschwindigkeit: ballXY.getVelocity (), restSpeed: false, Reibung: 0,6, springStrength: 400 ) .start (ballXY); ;
Hier setzen wir von und Geschwindigkeit wie normal. Reibung und springStrength beide stellen die Eigenschaften der Feder ein.
restSpeed: falsch überschreibt das Standardverhalten der Animation, wenn die Bewegung gestoppt wird. Wir möchten es manuell stoppen stopTracking.
Diese Animation allein macht nichts, weil wir eingestellt haben zu, das Ziel der Quelle, das gleiche wie von. Also lassen Sie uns das neu implementieren Zeiger Verfolgung dieser Zeit, um das Federziel von zu ändern Physik. In der letzten Zeile von startTracking, hinzufügen:
pointerTracker = Zeiger (ballXY.get ()). start ((v) => physicsAnimation.setSpringTarget (v););
Hier verwenden wir ein ähnliches Zeiger Animation wie zuvor. Außer dieser Zeit verwenden wir es, um das Ziel einer anderen Animation zu ändern. Dabei erstellen wir dieses elastische Zeiger-Tracking:
Geschwindigkeitsbasierte Animationen gepaart mit Pointer-Tracking können ansprechende und spielerische Schnittstellen schaffen.
Frühling kann verwendet werden, um eine Vielzahl von Federempfindungen zu erzeugen, während zerfallen ist speziell auf Momentum-Scroll-Animationen zugeschnitten. Physik ist im Hinblick auf die Konfigurierbarkeit eingeschränkter als beide, bietet aber auch die Möglichkeit, die laufende Simulation zu ändern und neue Interaktionsmöglichkeiten zu eröffnen.
Im nächsten und letzten Teil dieser Einführungsreihe zu Popmotion werden wir alles, was wir in den ersten beiden Teilen gelernt haben, zusammen mit einer leichten funktionalen Komposition verwenden, um eine scrubbable-Animation und einen Scrubber zu erstellen das Schrubben mit!
