CODEWITHSUNDEEP
javascriptcanvascreatejseaseljs
eirikrl
eirikrl

Reputation: 438

Createjs and easlejs - animate a line with multiple points

I would like to tween a line that has more than two points. An example of two points can be found here - https://jsfiddle.net/gskinner/17Lk8a9s/1/

However, I have an array of paths

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

How can I tween this line according to the array with createJS / tweenJS?

Upvotes: 1

Views: 332

Answers (1)

Lanny
Lanny

Reputation: 11294

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.

Upvotes: 3

Related Questions