Tween.js 不调用 onUpdate 函数

Question

我正在使用 tweenjs 和 Typescript 来更改 Three.js 立方体的 x 和 y 坐标。我创建了以下补间来更改“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 - 项目的原始位置

• moveTime - 完成移动所需的时间，2000 毫秒

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

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

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

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

updateXPos 或 horzTweenComplete 回调都不会被触发。

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

TWEEN.update(dt);

由于补间的 onComplete 事件从不触发，因此会不断调用 TWEEN.update。我错过了什么导致补间无法正常工作？

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。