JavaScript-basierte Animationen mit Anime.js, Teil 2: Parameter

Anime.js Animation Tutorial Teil 2: Detaillierte Erläuterung der Parameter. Im ersten Teil des Tutorials haben wir gelernt, wie man animierte Zielelemente sowie animierte CSS und DOM -Eigenschaften angeben. Die vorherige Animation war sehr einfach, und alle Zielelemente bewegten einfach eine bestimmte Entfernung mit fester Geschwindigkeit oder änderten den abgerundeten Radius.

Manchmal müssen Sie die Zielelemente möglicherweise rhythmisch animieren. Zum Beispiel benötigen Sie möglicherweise zehn verschiedene Elemente, um sich von links nach rechts zu bewegen, wobei die Animation jedes Elements zwischen den Anfängen um 500 Millisekunden verspätet ist. Ebenso möchten Sie die Animationsdauer basierend auf der Position jedes Elements erhöhen oder verringern.

Dieses Tutorial zeigt Ihnen, wie Sie Anime.js verwenden, um die Animationszeit verschiedener Elemente mit spezifischen Parametern genau zu steuern, wodurch die Wiedergabe der Animationssequenz -Wiedergabe eines einzelnen Elements oder aller Elemente gesteuert wird.

Attributparameter

Mit diesen Parametern können Sie die Dauer, Verzögerung und Lockerungseffekte eines einzelnen Attributs oder einer Gruppe von Attributen steuern. stagger() Methode

Bisher haben wir Funktionen verwendet, um verschiedene Werte für die Animationsverzögerung oder Dauer des Zielelements zu übergeben. Mit Hilfe der stagger() -Methode können Sie auch die gleiche Funktionalität erhalten, mit der Sie im Grunde genommen steuern können, wie die Animation zwischen mehreren Elementen auftritt. Es akzeptiert zwei Parameter. Der erste ist der Wert, den Sie anwenden möchten, und das zweite ist ein Objekt mit vielen Parametern, die bestimmen, wie das Verschachtel angewendet wird.

Folgendes ist ein Beispiel, das die Verschachtung des auf 1000 festgelegten start -Parameters zeigt. Beispiele sind wie folgt:

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

Was ist, wenn zu Beginn des letzten Elements ein Dauerwert ungleich Null angewendet werden muss? In diesem Fall können wir die folgenden Parameter der stagger() -Methode verwenden, um dies zu erreichen. Wie Sie sehen können, ist das Endergebnis kein Unterschied.

Es ist zu beachten, dass die Methode stagger in älteren Versionen der Bibliotheken nicht funktioniert. Stellen Sie sicher, dass Sie die neueste Version verwenden, um Fehler zu vermeiden.

Zusammenfassung

In diesem Tutorial haben Sie verschiedene Arten von Parametern gelernt, mit denen die Animation von Zielelementen in Anime.js gesteuert werden kann. Attributparameter werden verwendet, um die Animation eines einzelnen Attributs zu steuern.

Sie können sie verwenden, um die Reihenfolge zu steuern, in der Animationen für ein einzelnes Element abgespielt werden. Mit Funktionsparametern können Sie die Animationszeit und die Rate eines einzelnen Elements relativ zur gesamten Gruppe steuern. Mit Animationsparametern können Sie steuern, wie Animationen für verschiedene Elemente abgespielt werden.

Das obige ist der detaillierte Inhalt vonJavaScript-basierte Animationen mit Anime.js, Teil 2: Parameter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!