I'm having a trouble on drawing animation of curve line using createJs, TweenJs, EasleJs.
https://codepen.io/Plax1TechJustin/pen/vYVXaQG
const cnvsElem = document.getElementById('cnvs')
const stage = new createjs.Stage('cnvs');
const cnvsWidth = cnvsElem.clientWidth
const cnvsHeight = cnvsElem.clientHeight
createjs.MotionGuidePlugin.install();
const initialX = 20
const initialY = cnvsHeight - 110
let lineXPointCurve = initialY/3
let lineYPointCurve = initialY
let lineXPointEnd = (cnvsWidth-(cnvsWidth/3))
let lineYPointEnd = ((initialY/2)/2)
const pathLine = new createjs.Shape()
stage.addChild(pathLine);
const drawPathLine = pathLine.graphics.setStrokeStyle(4).beginStroke(createjs.Graphics.getRGB(239, 7, 62))
.moveTo(initialX, initialY)
.curveTo(lineXPointCurve,lineYPointCurve, lineXPointEnd, lineYPointEnd);
var line = stage.addChild(new createjs.Shape());
line.graphics.beginStroke("#333").setStrokeStyle(2).moveTo(initialX,initialY);
var cmd = line.graphics.curveTo(0, 0, 0, 0).command;
stage.update()
function getMotionPathFromPoints (points) {
var i, motionPath;
for (i = 0, motionPath = []; i < points.length - 1; i++) {
if (i === 0) {
motionPath.push(points[i].x, points[i].y);
}
else if(i === 1){
motionPath.push(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
} else {
i++;
motionPath.push(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
}
}
return motionPath;
}
var points = [
new createjs.Point(initialX, initialY),
new createjs.Point(lineXPointCurve, lineXPointCurve),
new createjs.Point(lineXPointEnd, lineYPointEnd),
];
console.log(getMotionPathFromPoints(points))
createjs.Tween.get(cmd).to({guide:{ path: getMotionPathFromPoints(points), orient: "fixed" }}, 2000);
createjs.Ticker.framerate = 120;
createjs.Ticker.addEventListener("tick", stage);
In this example the red line is the path or the output, and the black line should move at the path of red line.
Please help me, I can't find example like this.