如何在threejs/tween.js中让对象一步一步移动

Question

我想让我的圆柱体（代码中的π介子）逐个移动到我创建的板上的对象上。 我有这个代码：

a : 开始
index : 对象

attachEvent(_this, index,a) {
if(index>=a){

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
for ( var i = a; i <= index; i++) {
  _this.stepByStep(_this,i)
}
}, false)
}else{

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
//nothing now
}, false)
}

}

stepByStep(_this,i)
{
_this.tween = new TWEEN.Tween(this.pions.position)
        .to({
        x:  _this.cases[i].position.x,
        y: _this.cases[i].position.y,
        z: 5},1000)
        .start();
}

当我运行我的代码时，我不知道为什么，但是 pions 直接进入了对象。

Answer 1

我不是 Tween.js 用户（TweenJS 在这里！），但我怀疑它的用法相同。

每次迭代都在 for 循环中创建新的补间，而不是追加新的位置。它基本上是创建一堆同时开始并同时运行的独立补间，但都影响同一个对象。应用最后一个补间的机会很大。

编辑 显然这是how Tween.js works？只有一个 to() 调用可以用于补间。我的原始解决方案适用于 TweenJS，但不适用于您的示例使用的 Tween.js：

原始解决方案仅适用于 CREATEJS/TWEENJS：

一次创建 Tween，并在循环中附加 to() 调用：

var tween = new createjs.Tween(this.pions.position);
for ( var i = a; i <= index; i++) {
  _this.stepByStep(tween, _this.cases[i].position); // Arguments changed!
}

function stepByStep(tween, position)
{
    tween.to({
        x: position.x,
        y: position.y,
        z: 5
    }, 1000);
}

这会产生一个补间，并为每个位置添加to() 调用。我还稍微简化了参数以使函数更简洁（传递整个范围有点混乱）。你可以随心所欲地清理它。

---

更新的解决方案

使用 Tween.js，似乎有必要为每个新动画创建一个新的补间，但不是一次性创建它们，您必须chain 他们，并且只启动第一个补间。

这是一些伪代码：

var firstTween = new Tween.Tween(obj)
var earlierTween = firstTween;
(loop) {
  var tween = new TWEEN.Tween(obj);
  tween.to({params});
  earlierTween.chain(tween);
  earlierTween = tween;
}
firstTween.start();

这是我拼凑起来的一个快速小提琴。绘图层使用 EaselJS，但补间使用的是 Tween.js。 https://jsfiddle.net/0mh6kj5y/8/

我还注意到您在函数中引用了this.pions，而其他所有内容都使用_this 作为范围。

希望有帮助！