MotionPathPlugin.getPositionOnPath
MotionPathPlugin.getPositionOnPath( rawPath:Array, progress:Number, includeAngle:Boolean ) : Object
计算与沿 RawPath 的特定进度值对应的 x/y 位置(以及可选的角度)
参数
原始路径(rawPath): 数组
你想要在其上绘制位置的 RawPath 数组
progress(进度): 数值
一个介于 0 和 1 之间的数值,表示路径上的进度,其中 0.5 表示在路径的中间位置
includeAngle(包含角度):布尔值
[可选] 如果
true
,则会同时计算出角度(以度数为单位),并将其作为 "angle" 属性附加到返回的 Object 上。
返回值:对象
包含x
和y
属性(坐标点),如果传入了includeAngle
参数并且值为true
,那么还会包含一个angle
属性(以度数为单位)
细节
计算 RawPath 上某个特定进度值(范围为 0-1,其中 0.5 表示中间)所对应的 x/y 坐标位置(以及可选的角度)。请注意,在使用此方法之前,必须先通过调用 cacheRawPathMeasurements() 方法缓存该 RawPath 的测量数据。
示例代码
// Get the RawPath associated with the`<path>`with an ID of "path"
let rawPath = MotionPathPlugin.getRawPath("#path"),
point;
// cache the measurements first (only necessary once, unless the path data changes)
MotionPathPlugin.cacheRawPathMeasurements(rawPath);
// find the coordinates and angle of the middle of the path
point = MotionPathPlugin.getPositionOnPath(rawPath, 0.5, true);
// move a #dot element there...
gsap.to("#dot", {
x: point.x,
y: point.y,
rotation: point.angle
});
```