Tween.js未调用更新函数

我正在使用tweenjs和Typescript来更改three.js多维数据集的x和y坐标。我创建了以下补间来更改类“FallingItem”的项目的x位置。Tween.js未调用更新函数

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 - 项的原始位置
运动时间 - 完成运动所需的时间，2000毫秒
updateXPos - 具有以下代码的FallingItem对象的成员函数：

updateXPos（）{ this.mesh.position.x = this.movementArcData.pos.x; console.log（“update x：”+ this.movementArcData.pos.x）; }

horzTweenComplete - 用下面的代码的FallingItem对象的成员funtion：

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

无论是updateXPos或horzTweenComplete回调被解雇。

我打电话TWEEN.update在我的渲染循环，像这样：

TWEEN.update(dt);

由于吐温的的onComplete事件永远不会触发时，TWEEN.update的不断呼吁。我错过了什么导致补间不能正常工作？

来源

2016-02-21 reggie3

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(); 
       });

来源

2016-02-21 12:49:15 reggie3

我已经当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。

来源

2016-02-25 02:11:56 Eye

Tween.js未调用更新函数

回答

相关问题