Ausführliche Erläuterung der Anwendungsbeispiele von tween.js

Dieser Artikel stellt hauptsächlich die Verwendung von tween.js im Detail vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Die vorherigen Wörter

TweenJS bietet eine einfache, aber leistungsstarke Verlaufsschnittstelle. Es unterstützt digitale Farbverlaufsobjekteigenschaften und CSS-Stileigenschaften und ermöglicht die Kombination verknüpfter getweenter Animationen und Aktionen zur Erstellung komplexer Sequenzen. In diesem Artikel wird die Verwendung von tween.js im Detail vorgestellt.

Übersicht

Mit tween.js können Sie die Attributwerte von Elementen reibungslos ändern Weg. Sie müssen Tween lediglich mitteilen, welchen Wert Sie ändern möchten, wie hoch der Endwert sein wird, wenn die Animation endet, wie lange die Animation dauert und andere Informationen. Die Tween-Engine kann den Wert vom Startpunkt der Animation bis zum Endpunkt der Animation berechnen Punkt, um einen reibungslosen Animationseffekt zu erzeugen Wenn Sie den Wert von x von 100 auf 200 ändern möchten, müssen Sie nur Folgendes tun:

Hier erstellen Sie lediglich das Tween-Objekt und müssen es aktivieren und lassen Sie die Animation starten:

var position = { x: 100, y: 0 }

Um den Animationseffekt zu glätten, muss schließlich die TWEEN.update-Methode in derselben Schleifenanimation aufgerufen werden. Der Code lautet wie folgt:

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

Diese Aktion aktualisiert alle aktivierten Tweens und position.x wird in 1 Sekunde (z. B. 1000 ms) auf 200 gesetzt.

// And set it to start
tween.start();

Sie können auch die Rückruffunktion onUpdate verwenden, um die Ergebnisse auf der Konsole zu drucken

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

Diese Funktion wird jedes Mal aufgerufen, wenn die Tweens aktualisiert werden. Seine Häufigkeit hängt von vielen Faktoren ab. Zum Beispiel: Hängt von der Laufgeschwindigkeit Ihres Computers oder Geräts ab

Animation starten

tween.onUpdate(function() {
  console.log(this.x);
});

Tween.js selbst wird nicht ausgeführt und muss explizit durchgegeben werden die Update-Methode. Wann wird sie ausgeführt? Es wird empfohlen, diese Methode in der Hauptschleife der Animation zu verwenden. Eine gute Bildleistung kann durch Aufrufen der requestAnimationFrame-Methode erzielt werden.

Hier wird die Parameterlose Aufrufmethode verwendet, und die Aktualisierungsmethode klärt die aktuelle Zeit, um dies zu erreichen Ermitteln Sie die Ausführungszeit der letzten Animation.

Sie können auch eine Zeit für die Aktualisierungsmethode angeben:

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

Die obige Aussage bedeutet: Aktualisierungszeit = 100 Millisekunden. Mit diesem Ansatz können Sie alle zeitvariablen Funktionen in Ihrem Code identifizieren. Wenn die Animation beispielsweise gestartet wurde und Sie möchten, dass alle Animationen gleichzeitig ablaufen, ändern Sie den Animationscode wie folgt:

TWEEN.update(100);

Animation steuern

[Start und Stopp]

var currentTime = player.currentTime;
TWEEN.update(currentTime);

Tween.start und Tween.stop werden verwendet, um den Start bzw. das Ende der Tween-Animation zu steuern.

Für Animationen, die dies getan haben beendet und nicht gestartet wurden, funktioniert die Tween.stop-Methode nicht. Die Tween.start-Methode erhält außerdem einen Zeitparameter. Wenn dieser Parameter verwendet wird, startet die Tween-Animation die Animation nach dieser Anzahl von Verzögerungen. Andernfalls wird die Animation sofort gestartet
[update]

Sie können die TWEEN.update-Methode verwenden, um Animationsaktualisierungen durchzuführen

[chain]

Wenn Sie mehrere Zeilen erstellen, zum Beispiel: Eine Animation beginnt, nachdem eine andere Animation endet. Dies kann durch die Kettenmethode erreicht werden. Im folgenden Code startet tweenB die Animation nach tweenA

Sie können eine Endlosschleifenanimation wie folgt erstellen:

【Wiederholen】

tweenA.chain(tweenB);

Wenn Sie eine Schleifenanimation erstellen, können Sie dies mithilfe der Kette erreichen. Eine bessere Möglichkeit ist jedoch die Verwendung der Wiederholungsmethode. Es erhält einen Parameter, der beschreibt, wie oft es eine Schleife ausführen möchte

tweenA.chain(tweenB);
tweenB.chain(tweenA);

[yoyo]

Diese Funktion funktioniert nur bei Verwendung der Wiederholungsmethode. Wenn es aktiviert ist, ähnelt die Wirkung des Tweens der eines Jojo-Balls. Der Effekt ist, dass die Animation am Anfang oder Ende in die entgegengesetzte Richtung springt

[Verzögerung]

Die Verzögerungsmethode wird verwendet, um die Verzögerung zwischen Animationen zu steuern

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

Globale Methoden

Die folgenden Methoden sind im globalen Objekt von TWEEN definiert, mit Ausnahme der Aktualisierung Methode:

tween.delay(1000);
tween.start();

[TWEEN.update(time)]

Diese Methode wird für alle aktivierten Tweens verwendet. Wenn keine Zeit angegeben ist, wird die aktuelle Zeit verwendet.
[TWEEN.getAll und TWEEN.removeAll]

Diese beiden Methoden werden verwendet, um einen Verweis auf das aktivierte Tweens-Array abzurufen oder um alle Tweens aus dem Array zu entfernen.

[TWEEN.add(tween) und TWEEN.remove(tween)]

wird verwendet, um ein Tween zu den aktivierten Tweens hinzuzufügen oder ein Tween zu entfernen

Beschleunigungsfunktion

tween.js bietet einige verfügbare Beschleunigungsfunktionen. Verfügbare Funktionen sind: Linear, Quadratisch, Kubisch, Quartisch, Quintisch, Sinusförmig, Exponentiell, Zirkular, Elastisch, Zurück und Sprungkraft. Die Easing-Typen sind unterteilt in: In, Out und InOut

Sie können nicht nur die von tween.js bereitgestellte Easing-Funktion verwenden, sondern auch die Easing-Funktion anpassen. Die folgenden Regeln müssen jedoch befolgt werden

1. Es muss ein Parameter empfangen werden
2. Es muss ein Wert basierend auf dem Eingabeparameter zurückgegeben werden

Die Beschleunigungsfunktion wird nur verwendet Jedes Mal bei jedem Tween Wird bei der Aktualisierung aufgerufen, unabhängig davon, wie viele Eigenschaften geändert wurden. Das Ergebnis wird dann für den Anfangswert

verwendet

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele von tween.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!