跳过主要内容

MotionPathPlugin.sliceRawPath

MotionPathPlugin.sliceRawPath( rawPath:Array, start:Number, end:Number ) : RawPath

在指定的起始和结束位置切分所提供的 RawPath 数组,并返回新的切分后的 RawPath

参数

  • 原始路径(rawPath): 数组

    需要切片的原始路径数组(RawPath Array)

  • start: 数值

    路径上开始的位置,0 是起点,1 是终点,0.5 是中点。可以是任意正或负的小数值。例如,0.3 表示元素从曲线 30% 的位置开始。默认值为 0。

  • end: 数值

    路径上结束的位置,0 是起点,1 是终点,0.5 是中点。可以是任意正或负的小数值,包括小于起始位置的值(这会使对象反向移动)。例如,0.6 表示元素在曲线 60% 的位置结束。1.5 表示它会循环回到起点并在中间点停止。默认值为 1。

细节

在指定的起始和结束位置切分所提供的 RawPath 数组,并返回新的切分后的 RawPath

什么是 RawPath?

RawPath 实质上是一个数组,其中包含一个用于每个连续线段的数组,并且该数组具有交替的 x、y、x、y 的三次贝塞尔曲线数据。它类似于 SVG。<path>每个“M”命令对应一个线段(数组)。这个线段(数组)以交替的 x/y 格式包含所有三次贝塞尔坐标点(就像 SVG 路径数据一样),并且是以原始数值形式表示的,这样做的好处是你不需要解析长字符串并进行转换。

例如,这个 SVG<path>具有两个独立的线段,因为存在两个“M”命令,下面是对应的 RawPath 数组:

// original path (notice there are two "M" commands):
(<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" /)[
// resulting RawPath Array:
([0, 0, 10, 20, 15, 30, 5, 18], [0, 100, 50, 120, 80, 110, 100, 100])
];

为了简化,上面的例子在每个段中只包含了一个三次贝塞尔曲线,但事实上每个段中可以包含无限数量的贝塞尔曲线。无论原始<path>数据字符串中包含什么路径命令(三次、二次、弧线、直线等),最终生成的 RawPath始终都是三次贝塞尔曲线。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗