MotionPathPlugin.arrayToRawPath
MotionPathPlugin.arrayToRawPath( values:Array, vars:Object ) : RawPath数组
接收一个坐标数组并通过它们绘制一条曲线，返回相应的RawPath数组。如果在type: "cubic"参数对象中声明了vars，这些坐标将被解释为类似锚点、两个控制点、锚点、两个控制点、锚点等一系列的立方贝塞尔曲线点。
参数
值（values）: 数组
一个包含多个点的数组，用于绘制曲线（或者如果提供的是一个参数对象，则这些点将被解释为立方贝塞尔曲线点，如锚点、两个控制点、锚点、两个控制点等。）
type: "cubic"参数对象中声明了vars参数（vars）vars: 对象
[可选] 配置对象，可以包含诸如 "curviness"、"relative"、"type"、"x" 或 "y" 等属性。
细节
接收一个坐标数组并通过它们绘制一条曲线，返回相应的RawPath数组。如果在type: "cubic"参数对象中声明了vars，这些坐标将被解释为类似锚点、两个控制点、锚点、两个控制点、锚点等一系列的立方贝塞尔曲线点。
配置（Configuration）
这个vars参数是可选的，可以包含以下任意一项：
| 属性 | 描述 |
|---|---|
| curviness | 数值（Number）- 该数值用于设置生成路径的弯曲度。默认值为1，若设为2则会更加弯曲。默认值是1。 |
| type | 字符串（String）- 类型有两个选项："thru" 和 "cubic"。当使用 "thru" 时，所有点都会被视为锚点，并通过这些点绘制一条曲线。当使用 "cubic" 时，这些点将按照如下顺序被解释为立方贝塞尔曲线点：锚点、两个控制点、锚点、两个控制点，依此类推，你希望多少次都可以，但显然要确保开头和结尾都是锚点。 |
| relative | 布尔值（Boolean） - 如果为 true，则每个后续的值都被视为相对于前一个值的位置。例如，如果数组是[{x:5}, {x:10}, {x:-2}]，它将首先移动至105，接着到115，最终在113处结束。 |
| x | 字符串（String） - 默认情况下，"x" 被用作水平方向上的属性值，但如果你愿意，也可以将其设置为其他值，比如 "left"，例如{x: "left"}. |
| y | 字符串（String） - 默认情况下，"y" 被用作垂直方向上的属性值，但如果你愿意，也可以将其设置为其他值，比如 "top"，例如{y: "top"}. |
什么是 RawPath？
A RawPath实质上是一个数组，其中包含每个连续线段的子数组，子数组中交替存放着立方贝塞尔曲线数据的 x、y、x、y 值。这类似于 SVG 的<path>每个“M”命令对应一个线段（数组）。这个线段（数组）以交替的 x/y 格式包含所有三次贝塞尔坐标点（就像 SVG 路径数据一样），并且是以原始数值形式表示的，这样做的好处是你不需要解析长字符串并进行转换。
例如，这个 SVG<path>包含两个独立的段，因为有两个 "M" 命令：
<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" />
生成的 RawPath 将是：
[
[0, 0, 10, 20, 15, 30, 5, 18],
[0, 100, 50, 120, 80, 110, 100, 100],
];
为了简化，上面的例子在每个段中只包含了一个三次贝塞尔曲线，但事实上每个段中可以包含无限数量的贝塞尔曲线。无论原始<path>数据字符串中包含什么路径命令（三次、二次、弧线、直线等），最终生成的 RawPath始终都是三次贝塞尔曲线。
示例代码
let anchors = [
{ x: 50, y: 130 },
{ x: 300, y: 10 },
{ x: 510, y: 100 },
{ x: 700, y: 190 },
{ x: 850, y: 100 },
],
rawPath = MotionPathPlugin.arrayToRawPath(anchors, { curviness: 0.5 }),
path = document.querySelector("#path");
path.setAttribute("d", MotionPathPlugin.rawPathToString(rawPath));
