时间戳

首页 > 解决方案 > 如何在threejs/tween.js中让对象一步一步移动

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

问题描述

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

a：起始
索引：对象

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 直接进入了对象。

标签： javascriptthree.jstween

解决方案

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

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

编辑 显然这就是Tween.js 的工作原理？只有一个 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用于范围。

希望有帮助！

推荐阅读