Tween.js没有调用onUpdate函数

Question

我正在使用Tween.js和TypeScript来改变Three.js立方体的x和y坐标。我创建了以下tween来改变"class = FallingItem"项的x位置。

this.movementArcData.horzTween = new TWEEN.Tween(this.movementArcData.pos.x)
                .to(this.movementArcData.newPos.x, this.movementArcData.movementTime * 1000)
                .onUpdate(this.updateXPos)
                .onComplete(this.horzTweenComplete);

"this.movementArcData"是一个包含以下内容的对象：

• horzTween - 缓动本身

• pos.x - 项目的原始位置

• movementTime - 完成运动需要的时间，为2000毫秒

• updateXPos - a FallingItem对象的成员函数，其代码如下：

  updateXPos(){ this.mesh.position.x = this.movementArcData.pos.x; console.log("update x: " + this.movementArcData.pos.x); }

horzTweenComplete - 一个FallingItem对象的成员函数，其代码如下：

horzTweenComplete(){
    this.movementArcData.horzTweenComplete = true;
}

updateXPos和horzTweenComplete回调函数均未被触发。

我在渲染循环中调用了TWEEN.update，如下所示：

TWEEN.update(dt);

自从tween的onComplete事件没有触发时，TWEEN.update不断被调用。我错过了什么导致tween无法正常工作？

- reggie3

Answer 1

我曾经遇到过类似的情况，当TWEEN没有调用我的onUpdate函数时。后来发现我必须调用window.requestAnimationFrame()来告诉浏览器，即我自己，也就是TWEEN，“想要执行一个动画并请求浏览器在下次重绘之前调用指定的函数来更新动画。”

function animate(time) {
    window.requestAnimationFrame(animate);
    TWEEN.update(time);
}

new TWEEN
        .Tween({ y: 0 })
        .to({y: 1000}, 700)
        .easing(TWEEN.Easing.Exponential.InOut)
        .onUpdate(function () {
            window.scrollTo(0, this.y);
        })
        .start();

animate();

上面的示例摘自https://github.com/tweenjs/tween.js/blob/master/examples/00_hello_world.html。

- esengineer

---

谢谢你的回答...它提醒我需要在我的动画循环中添加TWEEN.update()。今天编程太多了，我想。 - Michael Paccione

Answer 2

Tween.js需要传递已经流逝的时间，而不是增量时间。传递一个正在运行的已流逝时间可以解决问题。

另外，它应该传递一个包含要插值的值的对象。看起来直接传递值本身不起作用。我成功地使用了以下代码：

let tweenElement = {
                x: this.tweenInfo.pos.x,
                y: this.tweenInfo.pos.y,
                item: this
            }

this.tweenInfo.tweenUp = new TWEEN.Tween(tweenElement)
                .to({y : this.tweenInfo.newPos.y}
                    , this.tweenInfo.movementTime * 0.5 * 1000)
                .easing( TWEEN.Easing.Cubic.InOut )
                .onUpdate(function(){
                    this.item.updateYPos(tweenElement, this)
                })
                .onComplete(function(){
                    this.item.tweenUpComplete();
                });

- reggie3

---

这应该是正确的答案。我正在使用pixi，并希望在app.ticker.add(...)中调用TWEEN.update，而不是在requestAnimationFrame()中调用。 - M'λ'

Answer 3

另一个潜在的原因（我知道在这种特殊情况下可能不是）是在代码的其他地方调用了 TWEEN.removeAll()。出现这种情况的一个征兆是其他缓动效果完全正常，但某些缓动效果却不起作用。

- zzazzles