如何在用 tween.js 完成插值时 运行 一个函数？

Question

我有一个名为 mesh 的数组，其中包含 10 个网格。

console.log(mesh.length) //-> 10;

我想补间它们以改变它们的比例。我为他们每个人分配了一个比例。我创建了一个 for 循环并使用了库 tween.js :

for (var i in mesh){
  new TWEEN.Tween(mesh[i].scale).to({ x: 4, y: 4 },  1000).start();
}

我需要知道如何 运行 在所有补间结束时执行一个函数。例如，我需要显示：

console.log('all interpolations are completed');

我该怎么做？

Answer 1

您要查找的函数是tween.onComplete(onCompleteCallback)。

在您的示例中，您可以这样写：

new TWEEN.Tween(mesh[i].scale)
    .to({ x: 4, y: 4 },  1000)
    .onComplete(function(){
        //your callback
        })
    .start();

编辑：在您的项目中，在所有补间具有相同持续时间的循环内，如果 onComplete 回调相同，则无需调用它 10 次。相反：

//inside the loop
var tween=new TWEEN.Tween(mesh[i].scale).to({ x: 4, y: 4 },  1000);
if( i === 0 ) tween.onComplete(onCompleteCallback});
tween.start();