Share
Popmotion ist eine funktionale JavaScript-Animationsbibliothek. Im Vergleich zu anderen Bibliotheken wie GreenSock oder Anime.js ist Popmotion auf niedrigem Niveau und unopinioniert.
Es packt eine Menge Features, wie die Physik des Frühlings und die Zeigerverfolgung, in eine sehr kleine Dateigröße (11,5 kb)..
Damit können Entwickler ihre eigenen Funktionen mit einfachen Funktionen schreiben, anstatt auf den Bibliotheksautor zu warten, der sie hinzufügen kann.
Es bedeutet auch, 3D-Objekte, Diagramme oder React-Komponenten genauso einfach zu animieren wie DOM- oder SVG-Elemente.
Diese Flexibilität kann die anfängliche Lernkurve steiler machen als bei anderen Bibliotheken. In diesem Lernprogramm lernen wir die Grundlagen der leistungsfähigen Animationen von Popmotion. Wir beginnen mit dem Arbeitstier der Animationswelt, der zwischen.
Popmotion unterstützt verschiedene Installationsmethoden. In der Produktion empfehle ich die Installation über npm, da Sie nur die Bits importieren können, die Sie benötigen, um Platz zu sparen.
Für dieses Tutorial können Sie jedoch diesen CodePen mitverfolgen, der mit der neuesten Version von Popmotion eingerichtet wurde.
Für diejenigen, die nicht vertraut sind, wechselt ein Tween zwischen einer Zahl und einer anderen über eine vorbestimmte Zeitdauer. Wenn Sie einen CSS-Übergang verwendet haben, den von Popmotion zwischen Funktion funktioniert genau gleich.
Wir können importieren zwischen wie so:
const Tween = Popmotion;
Standardmäßig, zwischen animiert zwischen 0 und 1 über eine Dauer von 300 Millisekunden. Wenn Sie Ihre Konsole öffnen, können Sie dies selbst testen:
Accentsconagua
tween (). start (update: v => console.log (v), complete: () => console.log ('complete!'));Aber wir wollen die Konsole nicht animieren - wir wollen den Ball animieren. Popmotion enthält dazu eine weitere Funktion, Styler.
Hinweis: In diesem ersten Beispiel haben wir beide definiert aktualisierenund Komplett Funktionen. Aber wenn du bereitstellst Start Mit nur einer einzigen Funktion wird sie automatisch zugewiesen aktualisieren.
Styler dient zum Erstellen von Get / Set-Interfaces für HTML- und SVG-Stile, die für die Verwendung mit Animationen (aus jeder Bibliothek!) optimiert sind..
Im obigen Beispiel, zwischen gibt eine Zahl aus, also können wir die Deckkraft des Balls natürlich so einstellen (probieren Sie es):
const ball = document.querySelector ('. ball'); tween (). start (v => ball.style.opacity = v);jedoch, Styler hat folgende Vorteile:
verwandeln Requisiten können individuell eingestellt werden und ermöglichen die unabhängige Animation von Requisiten wie Rahmen und translateX.translateX (zum Beispiel) ohne anzufügen 'px'.Sie sind auch nicht darauf beschränkt, sie in einer Animation zu verwenden. Sie können den Stil eines Elements manuell festlegen, während andere animiert werden. Die Änderung wird automatisch geplant und zusammen mit den anderen gestapelt.
Also lasst es uns importieren:
const Tween, Styler = Popmotion;
Erstellen Sie den Ball-Styler:
const ballStyler = Styler (Ball);
Jetzt können wir verwenden BallStyler um die Eigenschaften des Balls einzustellen und zu animieren. ballStyler.set ist flexibel. Es kann eine einzelne Eigenschaft festgelegt werden:
ballStyler.set ('background', '# f00');Oder mehrere Eigenschaften:
ballStyler.set (x: 100, y: 100);
Wir möchten animieren Opazität Im Moment ändern wir also unsere Animation:
tween (). start (v => ballStyler.set ('opacity', v));einstellen kann auch curry gemacht werden. Wenn Sie nur einen Eigenschaftsnamen angeben, wird eine Setterfunktion für diese Eigenschaft zurückgegeben. So können wir das Obige durch Schreiben abschreiben:
tween (). start (ballStyler.set ('opacity'));Bisher haben wir den Ball nur mit der Standardeinstellung animiert zwischen Eigenschaften. Lassen Sie uns einen Blick darauf werfen, wie vielseitig ein zwischen kann sein.
zwischen akzeptiert ein optionales Argument, ein Objekt mit Tween-Eigenschaften. Schauen wir uns einige der am häufigsten verwendeten Requisiten an:
von/zu EIN zwischen kann zwischen zwei beliebigen Zuständen liegen. Wir definieren diese mit von und zu.
Lass uns animieren translateX durch Umschreiben 'Opazität' zu 'x'. Dann pass weiter von und zu Requisiten:
Tween (von: 0 bis: 300)
Dein Ball bewegt sich jetzt um 300 Pixel von links nach rechts.
Ich sagte jedoch das a zwischen kann zwischen zwei sein Zustände, nicht nur zahlen. Wenn wir zur Verfügung stellen von und zu Objekte von Zahlen und / oder farben, Wir können mehrere Eigenschaften gleichzeitig animieren.
Versuche dies:
Tween (von: x: 0, Hintergrund: '# 198FE3', bis: x: 300, Hintergrund: '# FF1C68'). start (ballStyler.set);
Dies ist eine einfache Möglichkeit, mehrere Requisiten gleichzeitig zu animieren.
Dauer ist in Millisekunden definiert. Standardmäßig dauert ein Tween 300 ms, wenn wir es jedoch festlegen Dauer zu 1000, es dauert eine Sekunde:
Tween (Dauer: 1000, von: 0 bis: 300). start (ballStyler.set ('x'));Beschleunigungsfunktionen werden beim Tweening verwendet, um die Bewegungsgeschwindigkeit während der Animation zu ändern.
Im wirklichen Leben starten oder stoppen Objekte nicht mit der Zielgeschwindigkeit. Je nach Objekt beschleunigen sie allmählich oder langsamer oder beides.
Eine Beschleunigungsfunktion funktioniert einfach, indem der Fortschritt des Tweens als Zahl dazwischen definiert wird 0 und 1, und ein neues zurückgeben.
Sie müssen nicht wissen, wie Sie diese Funktionen erstellen, da Popmotion Ihnen eine Menge bietet.
Importiere sie:
const Lockerung, Tween, Styler = Popmotion;
Standardmäßig, Leichtigkeit ist eingestellt auf easing.easeOut. Wenn eine Funktion nachlässt, bedeutet dies beginnt schnell und endet langsam.
Dies wurde als Standard gewählt, da ich der Meinung bin, dass die meisten Animationen in Benutzeroberflächen initiiert werden sollten als Ergebnis einer Benutzeraktion. Wenn Sie schnell anfangen und langsam enden, hat der Benutzer das Gefühl, dass er seine Energie durch Tippen oder Klicken direkt auf die Benutzeroberfläche überträgt. Es fühlt sich bissig, lebendig und ansprechend an.
Bei vielen Animationen, die sich von den Eingaben des Benutzers oder von sich aus entfernen lassen, kann es sich weniger anstrengend fühlen, wenn eine Animation verwendet wird, die sich vereinfacht, wie easing.easeInOut oder Erleichterung, das macht einen spielerischen Zug vor der Animation.
Endlich gibt es die easing.cubicBezier Funktion, die eine neue Beschleunigungsfunktion erstellt, die auf einer Beschleunigungskurve basiert, genau wie bei CSS-Übergängen. Dies bietet ein enormes Maß an Kontrolle und Flexibilität für Ihre Bewegung.
Versuchen Sie, einige davon auf Ihre Animation anzuwenden, während Sie herumspielen Dauer um zu sehen, wie es das Gefühl und den Charakter davon beeinflusst.
Animationen können auf drei verschiedene Arten wiederholt werden: Schleife, Yoyo, und Flip.
Schleife startet die Animation von Anfang an. Yoyo spiegelt das Tween wider, indem es rückwärts läuft. Und Flip Läuft es rückwärts undschaltet die Beschleunigungsfunktion um.
Eine davon kann pro Tween eingestellt werden, und jedes ist eine Zahl, die die Anzahl der Wiederholungen der Animation angibt. Um es für immer zu wiederholen, übergeben Sie einfach Unendlichkeit:
Tween (yoyo: Infinity, von: 0 bis: 300). start (ballStyler.set ('x'));Wenn ein Tween gestartet wird, werden Wiedergabesteuerelemente zurückgegeben, mit denen wir diese Animation steuern können.
const steuert = tween (). start (console.log);
Im obigen Beispiel, Kontrollen Zugriff auf alle diese Wiedergabemethoden haben, wie z halt, Pause, und fortsetzen:
const steuert = Tween (Dauer: 1000, von: 0 bis: 300). start (ballStyler.set ('x')); setTimeout (() => controls.stop (), 500);Wir können diese Wiedergabesteuerelemente dazu verwenden Pause und dann suchen durch das Tween:
const steuert = Tween (Dauer: 1000, von: 0 bis: 300). start (ballStyler.set ('x')); Steuerelemente.Pause (); Steuerungen.seek (0,5);Damit können wir eine scrubbable Animation erstellen! In einem späteren Lernprogramm werden wir die Verwendung von Popmotions näher kennenlernen Zeiger Funktion zum Erstellen einer Scrub-Leiste, aber vorerst können Sie eine Scrub-Leiste erstellen zwischen mit einem zweiten Tween, um dies in Aktion zu sehen:
const steuert = Tween (von: 0 bis: 300). start (ballStyler.set ('x')); Steuerelemente.Pause (); Tween (duration: 1000) .start (controls.seek);Für einfache A-to-B-Übergänge, zwischen ist ausgezeichnet. Für kompliziertere Sequenzen von Tweens stellt Popmotion eine weitere Funktion bereit Keyframes.
Lassen Sie uns es jetzt importieren:
const Keyframes, Beschleunigung, Tween, Styler = Popmotion;
Keyframes Tweens durch einenlineare Reihe von Zuständen. Wir stellen diese Zustände zur Verfügung Werte Eigentum:
Keyframes (Werte: [0, -150, 150, 0], Dauer: 2000). start (ballStyler.set ('x'));Mögen zwischen, Wir können diese Zustände auch als Objekte definieren. Um den Ball in einem Feld zu bewegen, können wir schreiben:
Keyframes (Werte: [x: 0, y: 0, x: -150, y: -150, x: -150, y: 150, x: 150, y: 150, x: 150, y: -150, x: 0, y: 0], Dauer: 2000). start (ballStyler.set);
Standardmäßig, Keyframes wird jedem dieser Tweens einen gleichen Anteil am Gesamtwert zuweisen Dauer.
Durch die Bereitstellung eines mal Array können wir jeden dieser Zustände mit einer Zahl dazwischen markieren 0 und 1. 0 steht für den Beginn der Animation und 1 stellt das Ende dar:
Keyframes (Werte: [0, -150, 150, 0], Zeiten: [0, 0.1, 0.9, 1], Dauer: 2000). start (ballStyler.set ('x'));Auf diese Weise können wir die Länge der Animation anpassen, ohne jedes Segment einzeln kommentieren zu müssen.
Es ermöglicht auch, dass jede Animation mit dem Programm eine individuelle Erleichterung erhält Erleichterungen Eigentum:
Keyframes (Werte: [0, -150, 150, 0], Zeiten: [0, 0,1, 0,9, 1], Erleichterungen: [easing.easeIn, easing.linear, easing.easeOut], Dauer: 2000). start (ballStyler.set ('x'));weil Keyframes ist nur ein zwischen, wir können seine allgemeine Wiedergabe mit den gleichen Eigenschaften anpassen Leichtigkeit und Schleife, und kontrollieren Sie es mit den gleichen Methoden, die wir zuvor gelernt haben.
Das zwischen und Keyframes Mit Funktionen können Sie sowohl einfache als auch komplexe Animationen erstellen.
Styler bringt seine eigenen Vorteile mit, z. B. die Verwendung außerhalb von Animationen, die Standardisierung von CSS- und SVG-Transformationsmodellen sowie das Rendern von Batching für hohe Animationsleistung.
In diesem Tutorial haben wir nur einige Animationen behandelt, die Popmotion anbietet. Im nächsten Teil werden wir Zeigerverfolgung und geschwindigkeitsbasierte Animationen wie Physik und Frühling.
Geschwindigkeitsbasierte Animationen können verwendet werden, um UIs mit einem natürlichen Gefühl zu erzeugen, die realistisch auf die Eingaben eines Benutzers reagieren. Wir sehen uns dort!
