My objective is to animate a line from point A to point B using the Tween function.
I am utilizing the EaselJS drawing library and TweenJS for animation.
Can I achieve this by using the moveTo function to animate a straight line from point A to point B?
This is my current setup:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
The goal is to animate this path from coordinates x100 y100 to x0 y0.
Animation Example:
I attempted the following code but no animation occurs:
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);
No animation takes place.
Draw Example:
However, if I use this code snippet, the line appears as intended but without any animation:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);
The line is drawn as expected.
Is there a way to combine the lineTo method with tweening that I may be overlooking? I have referred to the documentation of both Easel and TweenJS but couldn't find an example or clear instructions on how to achieve this, or if it's even possible.
Your assistance will be highly appreciated.