Createjs和easlejs - 为具有多个点的线条设置动画

时间:2016-07-11 09:34:19

标签: javascript canvas createjs easeljs

我想补间超过两点的线。可以在此处找到两点的示例 - https://jsfiddle.net/gskinner/17Lk8a9s/1/

但是,我有一系列路径

      var path = [0,0,0,100,200,200];

如何根据数组使用createJS / tweenJS补充此行?

1 个答案:

答案 0 :(得分:1)

You just have to animate each point separately.

Here is a quick sample: http://jsfiddle.net/lannymcnie/zd1amd3k/

It just has a for loop to animate each point separately:

for (var i=0, l=pathStart.length; i<l; i+=2) {
    var cmd = shape.commands[i] = (i == 0) 
    ? g.moveTo(pathStart[i], pathStart[i+1]).command 
    : g.lineTo(pathStart[i], pathStart[i+1]).command;

  var duration = Math.random() * 2000 + 1000;

  createjs.Tween.get(cmd, {loop:true})
    .to({x:pathEnd[i], y:pathEnd[i+1]}, duration, createjs.Ease.quadIn)
    .to({x:pathStart[i], y:pathStart[i+1]}, duration, createjs.Ease.quadOut);
}

Hope that helps.