理论上如何实现沿路径动画？CSS offset-path底层运行原理是什么

1. SVG路径（d属性）的解析与底层数据结构 #

浏览器拿到offset-path中path()函数传入的d属性字符串后，不会直接转换为离散点数组，首先会完成语法校验和结构化解析，最终生成路径段数组作为底层存储结构：

• 数组中每个元素对应d字符串里的一条路径指令，明确标记段类型（移动、直线、贝塞尔曲线、圆弧、闭合等）
• 每个段存储自身所有必要参数：比如三次贝塞尔段会存储起点、两个控制点、终点坐标；圆弧段会存储半径、旋转角度、大弧标记、扫向标记、终点坐标
• 解析阶段会同步预计算每个路径段的长度，以及整个路径的总长度，和路径段数组共同缓存，避免后续重复计算

2. 动画每帧（tick）的位置计算逻辑 #

动画时钟每次触发时，按以下步骤计算元素当前在路径上的坐标：

1. 结合当前动画进度、缓动函数计算出offset-distance的实际值：如果是百分比值，就乘以路径总长度得到需要移动的绝对距离current_len
2. 遍历预计算好长度的路径段数组，累加段长度直到累加值超过current_len，找到目标位置所在的路径段，计算出该段内的相对进度t = (current_len - 前面所有段的长度和) / 当前段长度，t的取值范围为0~1
3. 根据路径段的类型，代入对应的标准参数方程计算坐标：
   • 直线段：线性插值计算 x = x0 + t*(x1-x0)，y = y0 + t*(y1-y0)
   • 三次贝塞尔曲线：代入三次贝塞尔公式 B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3，其中P0为段起点、P1/P2为控制点、P3为段终点
   • 二次贝塞尔、圆弧等段类型，也各自对应标准参数方程计算坐标
4. 如果开启了offset-rotate: auto，还会额外计算该坐标点的路径切线方向，得到元素的旋转角度

3. CSS path功能的整体运行流程 #

• 样式解析阶段：识别offset-path属性为path()类型后，调用SVG路径解析逻辑生成路径缓存对象，和元素的样式数据绑定
• 动画预处理阶段：如果元素绑定了修改offset-distance的动画，提前完成路径总长度、各段长度的预计算，缓存所有固定参数
• 帧渲染阶段：每tick按上述逻辑计算出元素的位置、旋转角度，将结果合并到元素的变换矩阵中，和其他transform属性叠加后提交给渲染线程完成绘制

内容的提问来源于stack exchange，提问作者Alien