Share
Im vorigen Tutorial der Anime.js-Serie haben Sie verschiedene Arten von Parametern kennen gelernt, die steuern, wie verschiedene Zielelemente animiert werden sollen. Sie haben auch gelernt, Funktionsparameter zu verwenden, um die Verzögerung oder Dauer der Elemente schrittweise zu ändern.
In diesem Lernprogramm werden wir einen Schritt weiter gehen und lernen, wie Sie die Eigenschaftswerte mithilfe von regulären Zahlen, funktionsbasierten Werten und Keyframes angeben. Sie lernen auch, Animationen nacheinander mit Zeitleisten abzuspielen.
Mit Anime.js können Sie die End- oder Endwerte für animierbare Eigenschaften von Zielelementen angeben. Der Anfangs- oder Startwert für die Animation ist der Standardwert dieser Eigenschaft. Jeder im CSS angegebene Wert kann auch als Startwert dienen. Es gibt mehrere Möglichkeiten, einen Endwert anzugeben.
Es kann auch eine einheitlose Nummer sein. In diesem Fall werden die ursprünglichen oder Standardeinheiten der Eigenschaft bei der Berechnung von Eigenschaftswerten verwendet. Sie können den Wert auch als Zeichenfolge angeben, die Zeichenfolge muss jedoch mindestens einen numerischen Wert enthalten. Beispiele für Zeichenfolgewerte wären 10vh, 80%, und 9.125Kehrung.
Anstatt einen absoluten Wert anzugeben, können Sie auch Eigenschaftswerte relativ zum aktuellen Wert angeben. Sie können beispielsweise das Finale festlegen translateY Wert zu sein 150px größer als der aktuelle Wert mit += 150px als Wert. Beachten Sie, dass Sie bei der Angabe relativer Werte nur Addition, Multiplikation und Subtraktion verwenden können.
Beim Animieren von Farben können Sie keine Farbnamen wie Rot, Schwarz und Blau verwenden, um einen endgültigen Farbwert für die Animation festzulegen. In solchen Fällen findet die Farbanimation überhaupt nicht statt und die Änderung wird sofort vorgenommen. Die einzige Möglichkeit, Farben zu animieren, besteht darin, die Werte entweder als Hex-Ziffern oder als RGB- und HSL-Werte anzugeben.
Wie Sie vielleicht bemerkt haben, haben wir keinen Anfangswert für unsere Zielelemente angegeben, um sie zu animieren. Anime.js ermittelt automatisch den Anfangswert basierend auf unserem CSS und den Standardwerten dieser Eigenschaften. Sie können jedoch einen anderen Anfangswert als den Standardwert für eine Eigenschaft mithilfe von Arrays angeben. Das erste Element im Array steht für den Anfangswert und das zweite Element für den Endwert.
Anstatt den gleichen Endwert für alle Zielelemente zu verwenden, können Sie Funktionen verwenden, um verschiedene Werte für verschiedene Parameter festzulegen. Der Prozess ähnelt dem Festlegen von funktionsbasierten Eigenschaftsparametern.
var uniqueTranslation = anime (Ziele: '.square', translateY: Funktion (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (Ziele: '.square', Maßstab: Funktion (el, i) return Math.random () * 1.5 + i / 10;, Autoplay: false); var randomRotation = anime (Ziele: '.square', drehen: function () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (Ziele: '.square', borderRadius: function (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (Ziele: '.square', translateY: Funktion (el, i) return 50 + 50 * i;, Maßstab: Funktion (el, i) return Math.random () * 1.5 + i / 10;, drehen: function () return anime.random (-180, 180);, borderRadius: function (el) return Math.random () * el.offsetWidth / 2;, duration: function ( ) return anime.random (1500, 2400);, delay: function () return anime.random (0, 1000);, autoplay: false);
Für die translateY Diese Eigenschaft verwenden wir den Index des Elements, um einen Übersetzungswert festzulegen. Verwenden 50 * (i + 1) Erhöht die translateY Wert für jedes Element um 50 Pixel.
Die Skalierungsanimation verwendet auch den Index des Elements zusammen mit dem integrierten Element Math.random () Funktion, um eine Fließkomma-Pseudozufallszahl kleiner als 1 zurückzugeben. Auf diese Weise skalieren die Elemente zufällig, aber die i / 10 Ein Teil der Eigenschaft erhöht geringfügig die Wahrscheinlichkeit, dass Elemente am Ende größer werden.
Innerhalb des Codes für die Rotationsanimation verwenden wir die anime.random (a, b) Hilfsfunktion, um zufällige Ganzzahlen zwischen -180 und 180 zu erhalten. Diese Funktion ist hilfreich, um zufällige Integralwerte Eigenschaften wie zuzuweisen translateY und drehen. Die Verwendung dieser Funktion zum Zuweisen von zufälligen Skalenwerten führt zu extremen Ergebnissen.
Der Grenzradiuswert für verschiedene Elemente wird durch Berechnen der Breite der Zielelemente mithilfe von bestimmt el Funktionsparameter. Schließlich ordnet der letzte Teil des Codes zufällige Werte zu Dauer und verzögern Parameter auch.
Sie können sehen, dass die durch den letzten Teil erzielte Animation sehr zufällig ist. Es gibt keinen Zusammenhang zwischen den Werten verschiedener Eigenschaften von Elementen oder deren Verzögerungs- und Dauerwerten. Im wirklichen Leben ist es sinnvoller, Werte zu verwenden, die der Animation eine gewisse Richtung verleihen können.
Es ist auch möglich, verschiedene Eigenschaften Ihrer Zielelemente mithilfe von Keyframes zu animieren. Jedes Keyframe besteht aus einem Array des Eigenschaftsobjekts. Sie können das Objekt verwenden, um den Eigenschaftswert anzugeben, Dauer, verzögern und Lockerung für diesen Teil der Animation. Mit dem folgenden Code wird eine Keyframe-basierte Übersetzungsanimation erstellt.
var keyframeTranslation = anime (Ziele: '.square', translateY: [Wert: 100, Dauer: 500, Wert: 300, Dauer: 1000, Verzögerung: 1000, Wert: 40, Dauer: 500, Verzögerung) : 1000], Autoplay: falsch); var keyframeAll = anime (Ziele: '.square', translateY: [Wert: 100, Dauer: 500, Wert: 300, Dauer: 1000, Verzögerung: 1000, Wert: 40, Dauer: 500, Verzögerung) : 1000], Maßstab: [Wert: 1.1, Dauer: 500, Wert: 0.5, Dauer: 1000, Verzögerung: 1000, Wert: 1, Dauer: 500, Verzögerung: 1000], Drehen: [ Wert: 60, Dauer: 500, Wert: -60, Dauer: 1000, Verzögerung: 1000, Wert: 75, Dauer: 500, Verzögerung: 1000], borderRadius: [Wert: 10, Dauer: 500, Wert: 50, Dauer: 1000, Verzögerung: 1000, Wert: 25, Dauer: 500, Verzögerung: 1000], Verzögerung: Funktion (el, i) return 100 * (i + 1) , Autoplay: falsch);
Sie können auch mehrere Eigenschaften gleichzeitig animieren, indem Sie für alle Parameter unterschiedliche oder dieselben Werte angeben. Im zweiten Fall der Globale verzögern Der Parameter wendet eine anfängliche Verzögerung auf alle Elemente basierend auf ihrem Index an. Diese Verzögerung ist unabhängig von der Verzögerung, die auf jede Eigenschaft in den Keyframes angewendet wird.
Bisher haben wir in der Serie die verzögern Parameter, um verschiedene Animationen in einer bestimmten Sequenz abzuspielen. Um die Verzögerung für diesen Zweck zu verwenden, müssen wir auch die Dauer der vorherigen Animation kennen.
Mit der zunehmenden Komplexität der Animationssequenz wird das Aufrechterhalten des richtigen Verzögerungswerts sehr mühsam. Jede Änderung der Dauer einer der Animationen zwingt uns, alle Verzögerungswerte neu zu berechnen, um die Animationen in der ursprünglichen Sequenz zu erhalten.
Eine bessere Lösung für dieses Problem ist die Verwendung von Zeitlinien zur Steuerung der Animationssequenz. Sie müssen das verwenden anime.timeline () Funktion zum Erstellen einer Zeitleiste in Anime.js. Sie können dieser Funktion auch verschiedene Parameter als Objekt übergeben. Diese Parameter können die Richtung angeben, in der die Timeline abgespielt wird, die Anzahl der Schleifen und eine automatisches Abspielen Parameter, um zu bestimmen, ob die Animation automatisch abgespielt werden soll. Alle diese Parameter wurden im Parameter-Tutorial dieser Serie ausführlich beschrieben.
Mit können Sie einer Timeline verschiedene Animationen hinzufügen hinzufügen() Methode. Alle zur Timeline hinzugefügten Animationen werden in der Reihenfolge abgespielt, in der sie hinzugefügt wurden. Sie können absolute oder relative Versatzwerte angeben, um die Reihenfolge zu steuern, in der die Animationen abgespielt werden.
Wenn relative Versatzwerte verwendet werden, wird die Startzeit der aktuellen Animation relativ zum Zeitpunkt der vorherigen Animation bestimmt. Relative Offsets können drei Arten haben:
Der folgende Code zeigt, wie Sie eine grundlegende Zeitleiste und eine Zeitleiste mit relativen Versatzwerten erstellen.
var basicTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); basicTimeline.add (Ziele: '.square', translateY: 200). add (Ziele: '.red', translateY: 100). add (Ziele: '.blue', translateY: 0); var offsetTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); offsetTimeline.add (Ziele: '.square', translateY: 200). add (Ziele: '.red', Offset: '+ = 1000', translateY: 100). add (Ziele: '.blue.) ', Offset:' * = 2 ', translateY: 0);
Klicken Sie auf das Symbol Versatz-Timeline Schaltfläche in der obigen Demo. Sie werden sehen, dass es zwischen dem Ende der Animation der roten Quadrate und dem Beginn der Animation der blauen Quadrate eine Verzögerung von 2 Sekunden gibt.
Wir haben keine angegeben Dauer für die Animation des roten Quadrats. Daher wird als Dauer ein Standardwert von 1000 ms oder 1 s verwendet. Der Multiplikatorversatz der blauen Quadratanimation verdoppelt diesen Wert, was zu einer Verzögerung von zwei Sekunden in der Animation führt.
Wenn absolute Versatzwerte verwendet werden, wird der Startzeitpunkt der Zeitleiste als Referenzpunkt verwendet. Es ist möglich, die Reihenfolge umzukehren, in der die Animationen abgespielt werden, indem große Versatzwerte für Animationen verwendet werden, die am Anfang der Zeitleiste auftreten.
Anime.js bietet eine Vielzahl von Optionen zum Abspielen, Anhalten, Neustarten oder Suchen von Animationen oder Zeitleisten zu einem bestimmten Zeitpunkt.
Das abspielen() Mit dieser Funktion können wir die Animation vom aktuellen Fortschritt aus starten. Das Pause() Die Funktion friert die Animation in dem Moment ein, in dem die Funktion aufgerufen wurde. Das Neustart() Die Funktion startet die Animation unabhängig vom aktuellen Fortschritt. Das suche (wert) Funktion kann verwendet werden, um die Animation um zu verschieben Wert Anzahl der Millisekunden.
Sie sollten daran denken, dass die abspielen() Die Funktion setzt die Animation nur ab dem Zeitpunkt fort, an dem sie unterbrochen wurde. Wenn die Animation bereits ihr Ende erreicht hat, können Sie die Animation nicht mit abspielen abspielen(). Um die Animation abzuspielen, müssen Sie die Neustart() Funktion.
Accentsconagua
var slowAnimation = anime (Ziele: '.square', translateY: 250, borderRadius: 50, Dauer: 4000, Erleichterung: 'linear', Autoplay: false); document.querySelector ('. play'). onclick = slowAnimation.play; document.querySelector ('. pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. seek'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Beachten Sie, dass wir nicht verwenden seekInput.value um einen Wert für die Suchfunktion festzulegen. Dies liegt daran, dass der maximale Wert für die Bereichseingabe im Markup auf 100 eingestellt wurde. Durch die direkte Verwendung des Wertes für den Eingabebereich können wir nur bis zu 100 ms suchen. Durch die Multiplikation des Bereichseingabewerts mit der Animationsdauer wird sichergestellt, dass die Animation mit unserem Bereichsschieberegler vom Anfang bis zum Ende gesucht werden kann.
In diesem Lernprogramm haben Sie gelernt, wie Sie verschiedene Eigenschaftswerte als Zahlen, Funktionen oder Keyframes animieren. Sie haben auch gelernt, Zeitleisten in Anime.js zu steuern und zu bearbeiten, um die Reihenfolge zu steuern, in der eine Animationssequenz abgespielt wird.
Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
