我如何使用 tweenJS 使位图移动到某些点

Question

我遇到的问题是这样的：

我想让位图移动到一些点，这些点存储在一个数组中。我如何使用 tweenJS 来获取它？

我尝试第一种方法是这样的：

var points = [{x:0, y:0}, {x:100, y:100},{x:200, y:200}];
//The points come from the other method, and data like the points.

for( var i=0; i < points.length; i++ ) {
    createjs.Tween.get( target )
      .to( { x: points[i].x, y: points[i].y }, 600, createjs.Ease.easeIn);            
}

运行代码，我的目标只移动到第一个point.So我放弃。

那我试试第二种方法:

var str = 'createjs.Tween.get( target )';
for( var i=0; i < points.length; i++ ) {            
    str += '.to( { x: points[' + i + '].x, y: points[' + i + '].y }, 600, createjs.Ease.easeIn)'            
}

eval( str );

它工作完美，但我担心 "eval" ，不太安全。你能给我一些提示吗？大大的拥抱。

Answer 1

只需获取补间一次，然后循环添加每个 to。您的示例同时创建多个补间运行：

var points = [{x:0, y:0}, {x:100, y:100},{x:200, y:200}];    
var tween = createjs.Tween.get( target ); // Once, outside the loop
for( var i=0; i < points.length; i++ ) {
      // Add each to() call to the current tween (chains them)
      tween.to( { x: points[i].x, y: points[i].y }, 600, createjs.Ease.easeIn);
}

应该可以了。

我如何使用 tweenJS 使位图移动到某些点

How can I use tweenJS make bitmap move to some points

javascript

createjs

tween.js