Share
Im ersten Tutorial der Anime.js-Reihe haben Sie verschiedene Möglichkeiten kennengelernt, um die Zielelemente anzugeben, die Sie animieren möchten, sowie die Arten von CSS-Eigenschaften und DOM-Attributen, die animiert werden können. Die Animationen im vorherigen Tutorial waren sehr einfach. Alle Zielelemente bewegten sich lediglich um eine bestimmte Entfernung oder veränderten den Grenzradius mit einer festen Geschwindigkeit.
Manchmal müssen Sie die Zielelemente rhythmischer animieren. Beispielsweise können Sie zehn verschiedene Elemente haben, die Sie mit einer Verzögerung von 500 ms zwischen dem Start der Animation für jedes Element von links nach rechts verschieben möchten. In ähnlicher Weise möchten Sie möglicherweise die Animationsdauer für jedes Element basierend auf seiner Position erhöhen oder verringern.
In diesem Lernprogramm erfahren Sie, wie Sie Anime.js verwenden, um die Animation verschiedener Elemente mit bestimmten Parametern richtig zu steuern. Auf diese Weise können Sie die Reihenfolge steuern, in der eine Animationssequenz für einzelne Elemente oder für alle Elemente abgespielt wird.
Mit diesen Parametern können Sie die Dauer, Verzögerung und Beschleunigung einzelner Eigenschaften oder einer Gruppe von Eigenschaften gleichzeitig steuern. Das Dauer und verzögern Parameter werden in Millisekunden angegeben. Der Standardwert für die Dauer beträgt 1000 ms oder 1 s.
Dies bedeutet, dass, sofern nicht anders angegeben, Animationen, die auf ein Element angewendet werden, 1 Sekunde lang abgespielt werden. Das verzögern Der Parameter gibt an, wie viel Zeit die Animation benötigt, nachdem Sie sie bereits ausgelöst haben. Der Standardwert für delay ist 0. Dies bedeutet, dass die Animationen beginnen, sobald sie ausgelöst werden.
Du kannst den ... benutzen Lockerung Parameter zur Steuerung der Rate, mit der eine Animation für die Dauer der Wiedergabe abgespielt wird. Einige Animationen beginnen langsam, beschleunigen in der Mitte und werden am Ende wieder langsamer. Andere starten in einem guten Tempo und werden dann für den Rest der Zeit langsamer.
In allen Fällen wird die Animation jedoch immer innerhalb der angegebenen Zeit mit abgeschlossen Dauer Parameter. Anime.js bietet viele Beschleunigungsfunktionen, die Sie direkt auf Ihre Elemente anwenden können, indem Sie nur deren Namen verwenden. Für einige Beschleunigungsfunktionen können Sie auch einen Wert für die festlegen Elastizität Parameter, um zu steuern, wie stark der Wert eines Elements wie eine Feder vor- und zurückspringt.
Im abschließenden Tutorial der Serie erfahren Sie mehr über die verschiedenen Beschleunigungsfunktionen. Das folgende Code-Snippet zeigt, wie Sie alle diese Parameter auf verschiedene Animationen anwenden.
var slowAnimation = anime (Ziele: '.square', translateY: 250, borderRadius: 50, Dauer: 4000); var delayAnimation = anime (Ziele: '.square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (Ziele: '.square', translateY: 250, borderRadius: 50, Dauer: 1200, Erleichterung: 'easeInOutCubic');
Wie Sie sehen, können diese Parameter unabhängig von anderen Parametern oder in Kombination mit ihnen verwendet werden. Das cubicAnimation hat sowohl die Dauer und Lockerung angewendeten Parameter. Wenn die Dauer nicht angegeben wurde, wäre die Animation 1 Sekunde lang ausgeführt worden. Jetzt läuft es 1.200 Millisekunden oder 1,2 Sekunden.
Eine wesentliche Einschränkung der Eigenschaftsparameter im obigen Beispiel bestand darin, dass alle Animationen des Zielelements gleich sind Dauer, verzögern und Lockerung Werte.
Dies kann das gewünschte Verhalten sein oder nicht. Anstatt den Grenzradius des Zielelements gleichzeitig zu übersetzen und zu ändern, möchten Sie möglicherweise zunächst das Zielelement übersetzen und dann seinen Grenzradius animieren. In Anime.js können Sie verschiedene Werte für die Dauer, verzögern, Lockerung und Elastizität Parameter für einzelne Eigenschaften. Der folgende Code und die folgende Demo sollten dies klarer machen.
var indiParam = anime (Ziele: '.square', translateY: Wert: 250, drehen: Wert: '2.125Turn', Hintergrundfarbe: Wert: 'rgb (255,0,0)', Dauer: 400, Verzögerung: 1500, Erleichterung: 'linear', Dauer: 1500);
Im obigen Code haben alle Eigenschaften, die wir animieren möchten, unterschiedliche Werte. Die Hintergrundfarbanimation hat eine Dauer von 400 ms, während die Rotations- und Translationsanimation den globalen Dauerwert von 1500 ms verwenden.
Die Hintergrundfarbenanimation hat auch eine Verzögerung, so dass eine Änderung der Farbe erst nach 1500 ms beginnt. Das drehen und translateY Eigenschaften verwenden den Standardwert für verzögern und Lockerung Parameter, weil wir weder einen lokalen noch einen globalen Wert für sie angegeben haben.
Eigenschaftsbasierte Parameter sind hilfreich, wenn Sie die Reihenfolge und Dauer für die Animation einzelner Eigenschaften ändern möchten. Das gleiche jedoch Dauer und verzögern wird weiterhin für einzelne Eigenschaften auf alle Zielelemente angewendet. Funktionsbasierte Parameter ermöglichen es Ihnen, den Parameter separat anzugeben Dauer, verzögern, Elastizität und Lockerung für unterschiedliche Zielelemente auf kompakte Weise.
In diesem Fall legen Sie die Werte verschiedener Parameter mithilfe von Funktionen anstelle von Zahlen fest. Diese Funktionen akzeptieren drei Parameter: Ziel, Index, und targetCount. Das Ziel Parameter speichert die Referenz auf das aktuelle Zielelement. Das Index Parameter speichert den Index oder die Position des aktuellen Zielelements. Das targetCount Parameter speichert die Gesamtzahl der Zielelemente.
Das Ziel Der Parameter ist nützlich, wenn die Animationswerte basierend auf einigen Attributen des Zielelements festgelegt werden müssen. Zum Beispiel können Sie das speichern verzögern, Dauer oder Lockerung Werte für ein Zielelement in Datenattributen und greifen Sie später darauf zu.
Ebenso können Sie auf die Hintergrundfarbe eines Zielelements zugreifen und diese bearbeiten, um einen endgültigen eindeutigen Farbwert für einzelne Elemente festzulegen. Auf diese Weise können Sie alle Elemente animieren, um eine Hintergrundfarbe zu erhalten, die um 20% dunkler als ihre aktuelle Farbe ist.
Das Index Parameter gibt Ihnen die Position des aktuellen Ziels in unserer Liste der Zielelemente an. Sie können es verwenden, um den Wert für Parameter wie schrittweise zu ändern Dauer und verzögern für verschiedene Elemente.
Dies ist im Allgemeinen hilfreich, wenn Sie die Werte in aufsteigender Reihenfolge festlegen möchten. Sie können das auch subtrahieren Index von dem targetCount um die Werte in absteigender Reihenfolge einzustellen. Im folgenden Codeausschnitt werden beide Parameter verwendet, um die Werte in aufsteigender und absteigender Reihenfolge anzugeben.
var delaySequence = anime (Ziele: '.square', translateY: 250, delay: Funktion (Ziel, Index) Rückkehrindex * 200;); var delaySequenceR = anime (Ziele: '.square', translateY: 250, delay: Funktion (Ziel, Index, Zielzahl) Rückgabe (Zielzahl - Index) * 200;);
Der folgende Code legt einen anderen Wert fest Lockerung Wert für jedes Zielelement mit der Index Parameter.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime (Ziele: '.square', translateY: 250, Dauer: 2000, Beschleunigung: function (Ziel, Index) return easeInValues [index];, autoplay: false);
Mit diesem letzten Parametersatz können Sie angeben, wie oft eine Animation abgespielt werden soll und in welche Richtung sie abgespielt werden soll. Sie können festlegen, wie oft eine Animation mit abgespielt werden soll Schleife Parameter. Es gibt auch eine automatisches Abspielen Parameter, der eingestellt werden kann wahr oder falsch. Der Standardwert ist wahr, Sie können jedoch den Start der Animationen stoppen, indem Sie sie auf setzen falsch.
Das Richtung Parameter steuert die Richtung, in der die Animation abgespielt wird. Es kann drei Werte haben: normal, umkehren, und wechseln. Der Standardwert ist normal, Dadurch bleibt die Animation normal von den Startwerten bis zu den Endwerten. Sobald die Zielelemente den Endwert erreichen, wenn die Schleife Ist der Wert größer als 1, springen die Zielelemente abrupt auf die Startwerte zurück und beginnen dann die Animation erneut.
Wenn der Richtung ist eingestellt auf umkehren und das Schleife Ist der Wert größer als 1, wird die Animation umgekehrt. Mit anderen Worten, die Zielelemente starten die Animation aus ihrem Endzustand und gehen zurück, um den Anfangszustand zu erreichen. Sobald sie sich im Anfangszustand befinden, springen die Elemente in den Endzustand zurück und beginnen erneut die umgekehrte Animation. Das wechseln Richtungswert ändert die Animationsrichtung nach jeder Schleife.
var normalLoop = anime (Ziele: '.square', translateY: 250, delay: Funktion (Ziel, Index) Rückkehrindex * 200;, Schleife: 4, Erleichterung: 'easeInSine', Autoplay: false);
In der folgenden Demo habe ich die Anzahl der Schleifen auf vier festgelegt, damit Sie den Unterschied in der Animation der Elemente in verschiedenen Modi leicht erkennen können.
In diesem Lernprogramm haben Sie verschiedene Arten von Parametern kennen gelernt, mit denen die Animation von Zielelementen in Anime.js gesteuert werden kann. Die Eigenschaftsparameter werden verwendet, um die Animation einzelner Eigenschaften zu steuern.
Sie können damit die Reihenfolge festlegen, in der die Animation für einzelne Elemente abgespielt wird. Mit den Funktionsparametern können Sie das Timing und die Animationsrate für einzelne Elemente in Bezug auf die gesamte Gruppe steuern. Mit den Animationsparametern können Sie steuern, wie die Animation selbst für verschiedene Elemente abgespielt wird.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua