沿路径运动:取点与切线朝向
让一个物体沿任意曲线行进,不必解析这条曲线的方程。SVG 的 path 自带按弧长取点的能力:
getTotalLength() 给出总长,getPointAtLength(d) 给出距起点 d 处的坐标。
于是动画只需把进度 0→1 映射成距离 0→总长,逐帧取点即可。要让物体朝向前进方向,再取相邻一点、
用 atan2 求切线角即可。这正是 CSS offset-path 的底层,且按弧长取点
天然保证沿路匀速——而非在贝塞尔参数 t 上匀速 (那会忽快忽慢)。
进度 (已行进弧长比例) 随时间
进度 —
切线角 —°
路径长 — px
getPointAtLength 以弧长为度量,
把「进度 = 已走过的真实长度比例」,沿路速度才与缓动曲线一致。关掉朝向切线,物体不再旋转,
可见「位置正确但姿态不对」;打开后用相邻两点求差近似切线方向。
@vega/anim — 沿路径取点 + 切线朝向
这里动的是物体的「位置 + 姿态」;若要让路径本身像被笔画出来,见 SVG 描边。沿路进度同样是一次插值, 被缓动重塑形后再换算成弧长。