有时候为了制作一些不规则曲线动画，使用原生js或gsap都很难完成，这时候可以使用gsap的路径插件MotionPathPlugin。奈何网上的资料太少，只能自己整一篇梳理出来（毕竟看官网密密麻麻的英文太折磨了！！）
安装：
npm install gsap
导入:
按需导入吧
import { gsap } from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin.js";
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
gsap.registerPlugin( PixiPlugin, MotionPathPlugin, MorphSVGPlugin )
使用
使用 motionPath 可以规定任何对象沿路径运动，motionPath可以为：
- 一个 SVG <path> 元素：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="path" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"/>
</svg>
gsap.to( "div",
{
motionPath: "#path",
duration: 2
}
)
- 一个SVG 路径数据:
moionPath: " M9,100c0,0,18-41,49-65 "
- 具有x,y 坐标的对象数组，将根据坐标绘制曲线：
motionPath: [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]
- 贝塞尔曲线
motionPath: {
path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50},{x: 50, y: 50}],
type: "cubic"
}
一些参数：
- align 对齐到路径
motionPath: {
align: "#lineAB",
path: "#lineAB"
}
此时运动路径会贴合path路径
image.png
还可以使用offsetX和offsetY来微调
autoRotate 自动选择（在沿路径运动时旋转）
start / end 开始和结束，控制进度
curviness 弯曲的程度
offsetX / offsetY 偏移
resolution 贝塞尔曲线的路径实际由一条条直线段组成， 每条路径段的长度不同，
使动画会看起来像加速或减速，MontionPath 使用一种技术将路径切片，分解成为
一定数量的片段，增加 resolution 的值会增加分解的精度，动画也会更加流畅，
代价就是会增加计算量，默认值为 12。type 仅用于具有x/y 对象的坐标属性的path，type: "cubic" 将解析为按以下顺序
的三次贝塞尔曲线： 锚点、两点控制点、锚点、两点控制点、锚点。可进行多次迭代，
但要保证以锚点开始和结束。
那么什么是三次贝塞尔曲线呢?
贝塞尔曲线分为 二次贝塞尔曲线和 三次贝塞尔曲线，
-
绘制二次贝塞尔曲线，需要给出结束锚点和控制点，起始点由上一个锚点决定（不论
三次贝塞尔还是二次贝塞尔 前面都必须有一个锚点！）
image.png -
绘制三次贝塞尔曲线，需要给出起始锚点控制点、结束锚点、结束锚点控制点。
image.png
总结暂时就这么多了，欢迎大家查漏补缺，也希望能帮到大家。
