TweenJS motionguide draw a curved line

26 Views Asked by At

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.

0

There are 0 best solutions below