How do you animate a line using EaselJS and TweenJS

Question

My goal is to have a line animate from point A to point B using the Tween function.

The drawing library I am using is EaselJS and for Tweening I am using TweenJS.

Is this possible using the moveTo function to animate a straight line from point A to point B?

---

My current setup is as follows:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);

My goal is to animate this path from x100 y100 to x0 y0.

---

Animation Example:

I have tried this using the following and nothing happens:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

Nothing happens.

---

Draw Example:

However if I use this I get the line as expected but it is not animated:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);

This draws a line as expected.

---

Is there some way to use the lineTo method with the tweening method I am missing? I have checked the documentation of both Easel and TweenJS and can't find an example or any clear instructions on how to do this or if this is not possible.

Any help is appreciated.

Answer 1

The easiest approach is to use a Graphics command. The .command property returns the last created graphics command, which you can then manipulate with a tween:

var cmd = line.graphics.lineTo(100,100).command;
createjs.Tween.get(cmd).to({x:0}, 1000);

Here's a working example: https://jsfiddle.net/gskinner/17Lk8a9s/1/