在Tween.js中为多个对象链接补间

时间:2016-09-09 16:01:10

标签: javascript animation createjs chaining tweenjs

所以我有大量的easel.js对象,我保留在一个数组中。

我希望为每个对象链接一组补间,然后,当每个补间链完成时,重置补间的属性并再次运行。这是我到目前为止所得到的:

function setObjectTween(tgt){
        createjs.Tween.get(tgt, { loop: false })
          .to({ x: randomOnStage("x", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .to({ y: randomOnStage("y", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .call(resetTween);

    }

    function resetTween(e){
        createjs.Tween.removeAllTweens(e.target);
        setObjectTween(e.target);
    } 

问题是resetTween似乎同时停止了所有剪辑的补间。我认为使用补间设置每个对象是这样的:

for(i=0;i<objpool1.length;i++){setObjectTween(objpool[i]);}

会使每个对象的补间保持独立。当它到达结束时,它将调用reset函数,该函数将仅为该对象移除补间,然后再次运行设置,再次仅针对该对象,再次使用新的随机值启动补间。

任何想法为什么重置似乎只影响数组中的最后一个对象而不是为每个对象独立工作(nb,所有数组对象第一次工作,但重置似乎重置所有这些,然后随后只能处理数组中的最后一个对象。)

欢呼,A。:

e2a:排序。文档读取失败。感谢下面的答案! :O)

1 个答案:

答案 0 :(得分:1)

removeAllTweens方法不接受任何参数。发生的事情是您正在杀死每个补间(阻止其他补间对resetTween的后续调用),并且只有完成的第一个补间才会重新启动。

改为将其更改为removeTweens

function resetTween(e){
    createjs.Tween.removeTweens(e.target);
    setObjectTween(e.target);
} 

这是一个小提琴:http://jsfiddle.net/6d9bckb4/