跳过主要内容

计算沿路径的锚点的进度值

计算路径上锚点的所有进度值,以便例如您可以使用 DrawSVG 逐点动画化(需要MotionPathPlugin):

// returns an array with the progress value (between 0 and 1) for each anchor along the path
function anchorsToProgress(rawPath, resolution) {
resolution = ~~resolution || 12;
if (!Array.isArray(rawPath)) {
rawPath = MotionPathPlugin.getRawPath(rawPath);
}
MotionPathPlugin.cacheRawPathMeasurements(rawPath, resolution);
let progress = [0],
length,
s,
i,
e,
segment,
samples;
for (s = 0; s < rawPath.length; s++) {
segment = rawPath[s];
samples = segment.samples;
e = segment.length - 6;
for (i = 0; i < e; i += 6) {
length = samples[(i / 6 + 1) * resolution - 1];
progress.push(length / rawPath.totalLength);
}
}
return progress;
}

演示

加载中...

目录

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