如何为CreateJS MotionGuidePlugin创建适配的二次贝塞尔路径？

方法一：手动解析三次贝塞尔路径，用CreateJS Tween控制位置 #

CreateJS的MotionGuidePlugin仅支持二次贝塞尔曲线，你可以手动解析路径的三次贝塞尔节点，通过计算曲线上的点来更新纸飞机位置：

• 提取CreateJS路径的commands数组，获取三次贝塞尔的起点、两个控制点、终点
• 使用三次贝塞尔参数方程计算任意进度t（0到1）对应的坐标：

  function cubicBezier(t, p0, p1, p2, p3) {
    const x = Math.pow(1-t,3)*p0.x + 3*Math.pow(1-t,2)*t*p1.x + 3*(1-t)*Math.pow(t,2)*p2.x + Math.pow(t,3)*p3.x;
    const y = Math.pow(1-t,3)*p0.y + 3*Math.pow(1-t,2)*t*p1.y + 3*(1-t)*Math.pow(t,2)*p2.y + Math.pow(t,3)*p3.y;
    return {x, y};
  }
  

• 用CreateJS的Tween补间t值，在onChange事件中更新纸飞机坐标：

  let t = 0;
  createjs.Tween.get(this, {onChange: updatePosition})
    .to({t:1}, 2000);
  
  function updatePosition() {
    const pathCommands = yourPath.commands;
    const p0 = {x: pathCommands[0].x, y: pathCommands[0].y};
    const p1 = {x: pathCommands[1].cp1x, y: pathCommands[1].cp1y};
    const p2 = {x: pathCommands[1].cp2x, y: pathCommands[1].cp2y};
    const p3 = {x: pathCommands[1].x, y: pathCommands[1].y};
    const pos = cubicBezier(this.t, p0, p1, p2, p3);
    paperPlane.x = pos.x;
    paperPlane.y = pos.y;
  }
  

方法二：在Illustrator中将三次贝塞尔转成二次贝塞尔 #

如果要继续使用MotionGuidePlugin，可以在Illustrator里转换路径：

• 选中三次贝塞尔路径，执行对象 > 路径 > 简化
• 在对话框中调整曲线精度参数，勾选显示原路径对比效果，直到二次贝塞尔路径与原路径形状接近
• 注意：转换为近似效果，精度越高生成的二次贝塞尔段数越多，需平衡精度与性能

方法三：结合GSAP MotionPathPlugin（兼容CreateJS） #

若允许结合外部工具，GSAP的MotionPathPlugin支持三次贝塞尔路径，可直接控制CreateJS元素：

gsap.to(paperPlane, {
  motionPath: {
    path: yourSvgPathData, // 从Illustrator导出的SVG路径数据
    align: "self",
    autoRotate: true
  },
  duration: 2,
  onUpdate: () => {
    stage.update(); // 更新CreateJS舞台
  }
});

该方法无需手动解析曲线，还支持自动旋转适配路径方向，实现效率更高。

内容的提问来源于stack exchange，提问作者GeorgePorge