跳过主要内容

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 上。

返回值:对象

包含xy属性(坐标点),如果传入了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
});
```
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗