如何使用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); 
} 

应该这样做。