Tween.js 没有调用 onUpdate 函数
Tween.js Not Calling onUpdate Function
我正在使用 tweenjs 和 Typescript 来更改 three.js 立方体的 x 和 y 坐标。我创建了以下补间来更改 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 - 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.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();
});
当 TWEEN
没有调用我的 onUpdate
函数时,我遇到了类似的情况。发现我必须调用 window.requestAnimationFrame()
才能告诉浏览器我,即 TWEEN
、"want to perform an animation and requests that the browser call a specified function to update an animation before the next repaint."
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.
另一个潜在原因(我知道在这种特殊情况下可能不是)是代码中的其他地方调用了 TWEEN.removeAll()
。发生这种情况的一个迹象是其他补间工作得很好,但有些则不然。
我正在使用 tweenjs 和 Typescript 来更改 three.js 立方体的 x 和 y 坐标。我创建了以下补间来更改 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 - 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.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();
});
当 TWEEN
没有调用我的 onUpdate
函数时,我遇到了类似的情况。发现我必须调用 window.requestAnimationFrame()
才能告诉浏览器我,即 TWEEN
、"want to perform an animation and requests that the browser call a specified function to update an animation before the next repaint."
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.
另一个潜在原因(我知道在这种特殊情况下可能不是)是代码中的其他地方调用了 TWEEN.removeAll()
。发生这种情况的一个迹象是其他补间工作得很好,但有些则不然。