MotionPath插件的基础用途就是指定一个对象沿着一条预设的路径移动 。
gsap.to('.target',{
motionPath: {
path: "#path";
align: "#path";
alignOrigin: [0.5, 0.5],
autoRotate: true
},
transformOrigin: "50% 50%",
duration: 5,
ease: "power1.inOut"
});MotionPath对象的属性
path
- 直接指定一个SVG
<path>元素。可以设置为一个字符串“#pathID”，也可直接设置为一个预先赋值过的js变量。 - 直接指定一个SVG路径数据字符串。比如 path: "M9,100c0,0,18-41,49-65"。
- 指定一个由一组x/y坐标对象构成的数组：参考下方示例
- 指定一个由一组非x/y坐标对象构成的数组：参考下方示例
//生成一条经过如下坐标点的曲线(对象所在坐标点将默认添加为此路径的起点):
//可以额外指定一个参数curviness，用来指定曲度的大小，默认为1，数值越大曲度越大。
motionPath: {
path: [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]，
curviness：2
}
//如果额外指定type为cubic，则将依据坐标点生成贝塞尔曲线
//贝塞尔曲线格式：一个位置点,两个控制点,一个位置点,两个控制点,etc.
motionPath: {
path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
type: "cubic"
}
//指定动画属性变化的节点(当前属性状态将默认被添加到初始位置)
motionPath: {
path: [{scale:0.5, rotation:10}, {scale:1, rotation:-10}, {scale:0.8, rotation:3}]
curviness：2
}align
默认情况下，被指定路径的对象运动时并不是沿着指定的路径，其实际路径是指定路径+对象初始坐标。所以一般情况会有一个位移。通过指定align，可以修正这个位移：
- 设置为沿路径运动：“#pathID”，或者引用一个DOM元素js变量。
- 设置为“self”，as if the path was drawn from their current position。
alignOrigin
设置过align后，默认对象的左上角与路径对齐。如果想改变对齐位置，可以设置这个属性，例如：[0.5, 0.5]可以将中点与路径对齐。两个值分别代表x/y方向，取值范围均是0～1。
offsetX、offsetY
用来修正上面align章节中提到的对象与路径之间的位移。
autoRotate
当此属性设置为true时，运动对象在沿着路径运动时，会自动调整自身角度，而不是一直挺着一个姿势。
autoRotate除了设置为布尔值之外，还可以指定为数值，比如设置为90，意思是保持与路径的90°角度。
设置运动对象transformOrigin: "50% 50%"，确保旋转轴在对象中心而不是左上角。
start、end
设置对象沿路径运动的起始点，不设置的时候默认从头至尾。
0代表路径起点，1代表路径终点。若终点设置为1.5，则当对象运动到路径终点后会再从头跑半程。类似的，可以设置为负值。当end小于start时，对象会倒着跑。
relative
这个属性仅当path为一组对象数组时才有可能会用到，表示指定的各个数据均是相对于前一个数值。
例如path: [{x:5}, {x:10}, {x:-2}]，if the target's x starts at 100, it would first move to 105, then 115, and finally end at 113.
resolution
这个属性仅当path为一组对象数组时才有用。用于调整整段路径速率“分辨率”。默认值12。一般不用动。但如果您注意到路径上的步速发生轻微变化，您可以增加分辨率值。 或者，如果您想优先考虑速度，您可以减少数量。
fromCurrent
当设置为false时，运动对象会直接跳转到指定路径上，而不是以当前位置为起点开始运动。当前位置的坐标也不会添加到运动路径的起点上。
useRadians
如果为true，则指定在设置旋转时使用弧度单位，而不是角度单位。这对一些默认使用弧度单位的动画库非常有用，比如Pixi.js。