为CreateJS MotionGuidePlugin创建路径

Question

我正在尝试为沿路径移动的纸飞机图标设置动画。我在 Illustrator 中绘制了路径，甚至可以使用 CreateJS 将其绘制在画布上，但我无法在 MotionGuidePlugin 中使用它，因为它使用三次贝塞尔曲线而不是二次贝塞尔曲线，而且 MotionGuidePlugin 似乎只允许二次曲线。

所以我认为没问题 - 我将使用二次方程在 Illustrator 中重新绘制路径，但我不知道如何做。我认为二次方程与三次方程相同，但两个句柄位于同一位置，但这不可能是正确的，因为当我尝试在这个小提琴中重新创建路径时：https://jsfiddle.net/qEYD4/999 / 我看到了不同的形状：

我之前使用带有 SVG 路径的 GSAP 完成了此操作，我可以重新引入该方法并在 GSAP 补间的

onUpdate

事件上更新我的 CreateJS 画布，但如果可以的话，我更愿意使用 CreateJS 功能。有人可以帮忙吗？非常感谢。

Answer 1

ZIM 具有沿着路径的动画，并且基于 CreateJS 构建。

ZIM 位于 https://zimjs.com

ZIM 中的路径可以是表示直线的 Squiggle() 或表示循环的 Blob()。这些可以使用数据点或 ZIM 工具来制作，或者接收 SVG 路径。这里的工具可能是最简单的 https://zimjs.com/paths - 然后将结果数据复制到 ZIM Squiggle 点参数中。

下面的例子可以在这里找到https://zimjs.com/zapp/Z_54QQ2

在下面的代码中，我们展示了如何制作波形图 - Blob 非常相似。我们选择不使该路径交互 - 通常，用户可以编辑 ZIM Squiggle 和 Blob。如果我们确实让用户编辑，那么您需要打开 onTop:false，以便编辑时波形曲线不会出现在平面上方。

然后我们制作一个形状 - 您可以使用任何 DisplayObject，如 Pic()、Sprite()、Rectangle() 等，然后我们沿着路径对其进行 animate() 动画处理。沿着路径拖动也非常容易 - 在时间参数之后或其中的某个位置使用drag:true;-)。

注意：下面的代码片段不会运行，因为它需要 ZIM 的其余部分 - 您可以在上面的编辑器链接中看到运行的代码，或者将其添加到位于 https://zimjs.com/code 的 ZIM 模板 - 只需粘贴代码所在的位置，将代码放在这里并在浏览器中运行 html 页面。

const path = new Squiggle({
    points:[
        [43,-77,0,0,70,-81,-70,81],
        [85,81,0,0,-72,22,72,-22],
        [171,-47.7,0,0,-56,13,57,-13],
        [311,104,0,0,-120,4.9,120,-5]
    ], 
    // onTop:false,
    interactive:false
}).sca(2).center();

const plane = new Triangle(60,80,80,purple)
    .rot(90) // rotates to point along 0 or x axis
    .addTo()
    .animate({
        props:{path:path}, // animate along blob path
        ease:"linear",
        loop:true,
        loopWait:1,
        // rewind:true,
        time:4
    });