Question

我想使cylindre（代码中的介子）逐个移动到我创建的板上的对象上。我有以下代码：

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

运行代码时，我不知道为什么，但是介子直接指向对象。

Answer 1

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

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

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

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

一次创建补间，并在循环中附加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用于范围。

希望有帮助！

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

1 个答案: