tween.js chinesischer Nutzungsleitfaden

In diesem Artikel wird hauptsächlich der detaillierte chinesische Verwendungsleitfaden von tween.js vorgestellt. Der Herausgeber findet ihn recht gut. Jetzt werde ich ihn als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Tweening (Animation) ist ein Konzept, mit dem Sie die Eigenschaften eines Objekts reibungslos ändern können. Sie sagen ihm einfach, welche Eigenschaften Sie ändern möchten, welche Endwerte sie haben sollen, wenn die Ausführung des Tweens beendet ist, und wie lange dies dauern soll, und die Tween-Engine kümmert sich dann um die Berechnung der Werte vom Startpunkt bis der Endpunkt.

Zum Beispiel hat das Positionsobjekt zwei Koordinaten: Sie sollten dies tun:

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

Im Allgemeinen reicht das nicht aus erstellt, aber noch nicht aktiviert (verwendet) Sie müssen es wie folgt starten:

// 首先为位置创建一个补间(tween)
var tween = new TWEEN.Tween(position);

// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
tween.to({ x: 200 }, 1000);

Um diesen Effekt erfolgreich abzuschließen, benötigen Sie schließlich um TWEEN.update in der Hauptfunktion wie folgt aufzurufen:

// 启动
tween.start();

Auf diese Weise wird die Tween-Animation ausgeführt, wenn jedes Bild nach 1 Sekunde aktualisiert wird; 1000 Millisekunden) wird position.x zu 200.

Sie werden die Änderung in x nicht sehen, es sei denn, Sie drucken den Wert von x in der Konsole aus. Möglicherweise möchten Sie den onUpdate-Rückruf verwenden:

animate();

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

Tipps: Möglicherweise können Sie object.x hier nicht abrufen. Weitere Informationen finden Sie in dem von mir erwähnten Problem.

Diese Funktion wird jedes Mal aufgerufen, wenn die Animation aktualisiert wird. Wie oft dies geschieht, hängt von vielen Faktoren ab – zum Beispiel davon, wie schnell (und wie ausgelastet) der Computer oder das Gerät ist.

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

Bisher haben wir nur Tween-Animationen verwendet, um Werte an die Konsole auszugeben, aber Sie können es mit drei.js-Objekten kombinieren:

In diesem Fall ist es nicht erforderlich, einen expliziten onUpdate-Rückruf zu verwenden, da der Three.js-Renderer vor dem Rendern die Position des Objekts prüft.

Vielleicht bemerken Sie auch etwas anderes: tween.js kann in einer Kette aufgerufen werden! Jede Tween-Funktion gibt eine Tween-Instanz zurück, sodass Sie den folgenden Code umschreiben können:

var tween = new TWEEN.Tween(cube.position)
 .to({ x: 100, y: 100, z: 100 }, 10000)
 .start();

animate();

function animate() {
 requestAnimationFrame(animate);
 TWEEN.update();
 threeRenderer.render(scene, camera);
}

in diesen Code:

var tween = new TWEEN.Tween(position);
tween.to({ x: 200 }, 1000);
tween.start();

Hier werden Sie viele Beispiele sehen, es ist also gut, sich damit vertraut zu machen! Beispielsweise ist 04-simplest ein Beispiel.

Animationen von tween.js

var tween = new TWEEN.Tween(position)
 .to({ x: 200 }, 1000)
 .start();

Tween.js wird nicht alleine ausgeführt. Sie müssen die Update-Methode explizit aufrufen, um ihr mitzuteilen, wann sie ausgeführt werden soll. Der empfohlene Ansatz besteht darin, diesen Vorgang innerhalb der Hauptanimationsschleife auszuführen. Rufen Sie diese Schleife mit requestAnimationFrame auf, um eine optimale Grafikleistung zu erzielen.

Zum Beispiel im vorherigen Beispiel:

Wenn beim Aufruf keine Parameter übergeben werden, ermittelt Update den aktuellen Zeitpunkt die Zeit seit dem letzten Wie lange ist es seitdem gelaufen?

Natürlich können Sie auch einen expliziten Zeitparameter an die Aktualisierung

animate();

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

übergeben, was „Aktualisierungszeit = 100 Millisekunden“ bedeutet. Damit können Sie sicherstellen, dass alle zeitbezogenen Funktionen in Ihrem Code denselben Zeitwert verwenden. Angenommen, Sie haben einen Player und möchten Tweens synchron ausführen. Ihre Animationsfunktion könnte so aussehen:

TWEEN.update(100);

Wir verwenden explizite Zeitwerte für Unit-Tests. Sie können sich das Beispiel „tests.js“ ansehen, um zu sehen, wie wir TWEEN.update() mit unterschiedlichen Werten aufrufen, um die Zeitübertragung zu simulieren.

Einen Tween steuern

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

Start und Stopp

Bisher haben wir etwas über die Tween.start-Methode gelernt, aber Es gibt mehr Möglichkeiten, einzelne Tweens zu steuern. Das vielleicht wichtigste ist das Gegenstück von Star: Stop. Wenn Sie ein Tween abbrechen möchten, rufen Sie einfach diese Methode für ein separates Tween auf: Effekt. Es werden keine Fehler ausgegeben.

Die Startmethode akzeptiert einen Parameter Zeit. Wenn Sie dies verwenden, wird das Tweening erst zu einem bestimmten Zeitpunkt sofort gestartet, andernfalls wird es so schnell wie möglich gestartet (d. h. beim nächsten Aufruf von TWEEN.update).

Update

Tweens haben auch eine Update-Methode --- diese wird tatsächlich von TWEEN.update aufgerufen. Normalerweise müssen Sie es nicht direkt aufrufen, es sei denn, Sie sind ein verrückter Hacker.

tween.stop();

Kette

Interessant wird es, wenn Sie verschiedene Tweens aneinanderreihen, z. B. wenn Sie ein anderes Tween beginnen, sobald das vorherige endet. Wir nennen dies verkettetes Tweening und verwenden dafür die Kettenmethode. Damit also TweenB auf TewwnA startet:

Oder legen Sie für eine unendliche Kette fest, dass TweenA startet, sobald TweenB abgeschlossen ist:

Über die Anzeige unendlicher Ketten Hallo Welt.

In anderen Fällen müssen Sie möglicherweise mehrere Tweens mit einem anderen Tween verknüpfen, damit sie (die verknüpften Tweens) gleichzeitig mit der Animation beginnen:

tweenA.chain(tweenB);

Warnung: Der Aufruf von tweenA.chain(tweenB) ändert tatsächlich TweenA, sodass TweenA immer gestartet wird, wenn TweenA abgeschlossen ist. Der Rückgabewert der Kette ist nur TweenA, kein neues Tween.

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

wiederholen

如果你想让一个补间永远重复，你可以链接到自己，但更好的方法是使用 repeat 方法。 它接受一个参数，描述第一个补间完成后需要多少次重复

tween.repeat(10); // 循环10次
tween.repeat(Infinity); // 无限循环

补间的总次数将是重复参数加上一个初始补间。查看 Repeat。

yoyo

这个功能只有在独自使用 repeat 时才有效果。 活跃时，补间的行为将像 yoyo 一样，i.e 它会从起始值和结束值之间跳出，而不是从头开始重复相同的顺序。

delay

更复杂的安排可能需要在实际开始运行之前延迟补间。 你可以使用 delay 方法来做到这一点

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

将在调用启动方法后的1秒钟后开始执行。

控制所有补间

在 TWEEN 全局对象中可以找到以下方法，除了 update 之外，通常不需要使用其中的大部分对象。

TWEEN.update(time)

我们已经讨论过这种方法。 它用于更新所有活动的补间。

如果 time 不指定，它将使用当前时间。

TWEEN.getAll and TWEEN.removeAll

用于获取对活动 tweens 数组的引用，并分别仅从一个调用中将它们全部从数组中删除

TWEEN.add(tween) and TWEEN.remove(tween)

用于将补间添加到活动补间的列表，或者分别从列表中删除特定的补间。

这些方法通常只在内部使用，但是如果您想要做一些有趣的事情，则会被暴露。

控制补间组

使用 TWEEN 单例来管理补间可能会导致包含许多组件的大型应用程序出现问题。 在这些情况下，您可能希望创建自己的更小的补间组。

示例：交叉组件冲突

如果使用 TWEEN 有多个组件，并且每个组件都想管理自己的一组补间，则可能发生冲突。 如果一个组件调用 TWEEN.update（） 或 TWEEN.removeAll（），则其他组件的补间也将被更新或删除。

创建你自己的补间组

为了解决这个问题，每个组件都可以创建自己的 TWEEN.Group 实例（这是全局的 TWEEN 对象在内部使用的）。 实例化新的补间时，可以将这些组作为第二个可选参数传入：

var groupA = new TWEEN.Group();
var groupB = new TWEEN.Group();

var tweenA = new TWEEN.Tween({ x: 1 }, groupA)
 .to({ x: 10 }, 100)
 .start();

var tweenB = new TWEEN.Tween({ x: 1 }, groupB)
 .to({ x: 10 }, 100)
 .start();

var tweenC = new TWEEN.Tween({ x: 1 })
 .to({ x: 10 }, 100)
 .start();

groupA.update(); // 只更新tweenA
groupB.update(); // 只更新tweenB
TWEEN.update(); // 只更新tweenC

groupA.removeAll(); // 只移除tweenA
groupB.removeAll(); // 只移除tweenB
TWEEN.removeAll(); // 只移除tweenC

通过这种方式，每个组件都可以处理创建，更新和销毁自己的一组补间。

改变缓动功能

Tween.js 将以线性方式执行值之间的插值（即缓动），所以变化将与流逝的时间成正比。 这是可以预见的，但在视觉上也是相当无趣的。 不要担心 - 使用缓动方法可以轻松更改此行为。 例如：

tween.easing(TWEEN.Easing.Quadratic.In);

这将导致缓慢地开始向最终值变化，向中间加速，然后迅速达到其最终值，相反，TWEEN.Easing.Quadratic.Out 一开始会加速，但随着值的接近最终放缓。

可用的缓动函数：TWEEN.Easing

tween.js提供了一些现有的缓动功能。它们按照它们表示的方程式进行分组：线性，二次，三次，四次，五次，正弦，指数，圆形，弹性，背部和弹跳，然后是缓动型：In，Out和InOut。

除非您已经熟悉这些概念，否则这些名称可能不会对您说什么，所以您可能需要查看 Graphs 示例，该示例将一个页面中的所有曲线进行图形化，以便比较它们如何看待一瞥。

这些功能是从 Robert Penner 慷慨地提供几年前作为自由软件提供的原始方程派生而来的，但是已经被优化以便与JavaScript很好地发挥作用。

使用自定义缓动功能

您不仅可以使用任何现有的功能，还可以提供您自己的功能，只要遵循一些约定即可：

它必须接受一个参数：

k: 缓动过程，或我们的补间所处的时间有多长。允许的值在[0，1]的范围内。

它必须根据输入参数返回一个值。

不管要修改多少个属性，easing函数在每次更新时只调用一次。 然后将结果与初始值以及这个值和最终值之间的差值（delta）一起使用，就像这个伪代码一样：

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

对于更注重性能表现的人来说：只有在补间上调用 start() 时才会计算增量值。

因此，让我们假设您想使用一个缓解值的自定义缓动函数，但是将 Math.floor 应用于输出，所以只返回整数部分，从而产生一种梯级输出:

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

你可以通过简单地调用它的缓动方法来使用它，就像我们之前看到的那样：

tween.easing(tenStepEasing);

查看 graphs for custom easing functions 示例，以查看这个动作（还有一些用于生成步进函数的元编程）。

回调函数

另一个强大的特性是能够在每个补间的生命周期的特定时间运行自己的功能。 当更改属性不够时，通常需要这样做。

例如，假设你正在试图给一些不能直接访问属性的对象设置动画，但是需要你调用setter。 您可以使用 update 回调来读取新的更新值，然后手动调用setters。 所有的回调函数都将补间对象作为唯一的参数。

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

或者想象一下，当一个补间开始时，你想播放声音。你可以使用 start 回调：

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

每个回调的范围是补间对象--在这种情况下，是 obj。

onStart

在补间开始之前执行--i.e. 在计算之前。每个补间只能执行一次，i.e. 当通过 repeat() 重复补间时，它将不会运行。

同步到其他事件或触发您要在补间启动时发生的操作是非常好的。

补间对象作为第一个参数传入。

onStop

当通过 stop() 显式停止补间时执行，但在正常完成时并且在停止任何可能的链补间之前执行补间。

补间对象作为第一个参数传入。

onUpdate

每次补间更新时执行，实际更新后的值。

补间对象作为第一个参数传入。

onComplete

当补间正常完成（即不停止）时执行。

补间对象作为第一个参数传入。

高级补间

相对值

使用 to 方法时，也可以使用相对值。 当tween启动时，Tween.js将读取当前属性值并应用相对值来找出新的最终值。

但是你需要使用引号，否则这些值将被视为绝对的。 我们来看一个例子:

// This will make the `x` property be 100, always
var absoluteTween = new TWEEN.Tween(absoluteObj).to({ x: 100 });

// Suppose absoluteObj.x is 0 now
absoluteTween.start(); // Makes x go to 100

// Suppose absoluteObj.x is -100 now
absoluteTween.start(); // Makes x go to 100

// In contrast...

// This will make the `x` property be 100 units more,
// relative to the actual value when it starts
var relativeTween = new TWEEN.Tween(relativeObj).to({ x: "+100" });

// Suppose relativeObj.x is 0 now
relativeTween.start(); // Makes x go to 0 +100 = 100

// Suppose relativeObj.x is -100 now
relativeTween.start(); // Makes x go to -100 +100 = 0

查看09_relative_values 示例。

补间值的数组

除了补间为绝对值或相对值之外，还可以让Tween.js跨一系列值更改属性。 要做到这一点，你只需要指定一个数组的值，而不是一个属性的单个值。 例如：

var tween = new TWEEN.Tween(relativeObj).to({ x: [0, -100, 100] });

将使 x 从初始值变为0，-100和100。

这些值的计算方法如下：

1. 首先，补间进度如常计算

2. 进度（从0到1）用作插值函数的输入

3. 基于进度和值的数组，生成内插值

例如，当补间刚刚启动（进度为0）时，插值函数将返回数组中的第一个值。 当补间到一半时，插值函数将返回一个大约在数组中间的值，当补间结束时，插值函数将返回最后一个值。

您可以使用插值方法更改插值函数。 例如：

tween.interpolation( TWEEN.Interpolation.Bezier );

以下值可用：

1. TWEEN.Interpolation.Linear

2. TWEEN.Interpolation.Bezier

3. TWEEN.Interpolation.CatmullRom

默认是 Linear。

请注意，插值函数对于与同一补间中的数组进行补间的所有属性是全局的。
您不能使用数组和线性函数进行属性A的更改，也不能使用相同的补间进行数组B的属性B和Bezier函数的更改; 您应该使用运行在同一对象上的两个补间对象，但修改不同的属性并使用不同的插值函数。

查看 06_array_interpolation 示例。

获得最佳性能

虽然Tween.js试图自己执行，但是没有什么能够阻止你以一种反作用的方式使用它。 这里有一些方法可以避免在使用Tween.js时（或者在网页中进行动画制作时）减慢项目速度。

使用高性能的CSS

当您尝试在页面中设置元素的位置时，最简单的解决方案是为 top 和 left 属性设置动画，如下所示：

var element = document.getElementById('myElement');
var tween = new TWEEN.Tween({ top: 0, left: 0 })
 .to({ top: 100, left: 100 }, 1000)
 .onUpdate(function(object) {
 element.style.top = object.top + 'px';
 element.style.left = object.left + 'px';
 });

但这实际上是效率低下的，因为改变这些属性会迫使浏览器在每次更新时重新计算布局，这是非常昂贵的操作。 相反的，您应该使用 transform，这不会使布局无效，并且在可能的情况下也将被硬件加速，比如：

var element = document.getElementById('myElement');
var tween = new TWEEN.Tween({ top: 0, left: 0 })
 .to({ top: 100, left: 100 }, 1000)
 .onUpdate(function(object) {
 element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px);';
 });

但是，如果您的动画需求非常简单，那么在适用的情况下使用CSS动画或转换可能会更好，以便浏览器尽可能优化。
当您的动画需要涉及复杂的布局时，Tween.js是非常有用的，也就是说，您需要将多个补间同步到一起，在完成一些动作之后，循环多次等等。

对垃圾收集器（别名GC）

Wenn Sie die Rückruffunktion onUpdate verwenden, müssen Sie diese sehr sorgfältig verwenden. Da diese Funktion viele Male pro Sekunde aufgerufen wird und jedes Update viel kostet, kann es sein, dass Sie den Hauptthread blockieren und schreckliche Ergebnisse verursachen. Wenn Ihr Vorgang eine Speicherzuweisung erfordert, kann die Speicherbereinigung ebenfalls zu Problemen führen. Ein zu häufiges Ausführen des Servers kann ebenfalls zu Problemen führen. Also tun Sie eines dieser Dinge einfach nicht. Halten Sie Ihre onUpdate-Rückrufe sehr schlank und stellen Sie sicher, dass Sie auch während der Entwicklung einen Speicherprofiler verwenden.

Verrückte Tweens

Das ist etwas, das Sie vielleicht nicht sehr oft verwenden, aber Sie können die Tweening-Formel außerhalb von Tween.js verwenden. Schließlich handelt es sich lediglich um Funktionen. Sie können sie also zur Berechnung glatter Kurven als Eingabedaten verwenden.

Zum Beispiel wurden sie in diesem Experiment zur Generierung von Audiodaten verwendet.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendungsbeispiele von tween.js

Eine einfache Kapselung der Animationsbibliothek von tween.js Beispiel-Tutorial

Detaillierte Einführung in die Tween.js-Animation

Das obige ist der detaillierte Inhalt vontween.js chinesischer Nutzungsleitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!