SVG 描边:让线条自己画出来
最经典的 SVG 动画其实只动一个数。把一条路径的虚线段长设成它自身的总长
(getTotalLength()),整条线就成了「一段实线 + 一段等长空白」;再让虚线的偏移
stroke-dashoffset 从「总长」滑到 0,实线段便像被一只笔逐渐推出来——
签名重放、对号打勾、loading 圈都是这一招。这里描边的「进度」依旧由引擎插值驱动:
dashoffset = 总长 × (1 − 进度)。
描边进度 (实线已推出的比例) 随时间
进度 —总长 — px
dashoffset 把虚线图案沿路径平移。偏移 = 总长时,实线段恰好被
整段平移到路径起点之前,屏幕上什么都看不到;偏移归 0 时实线段回到原位、完整显现。所以进度 0→1
对应偏移 总长→0。顺序绘制则是把各子路径按长度首尾排成一条总长,用同一个全局进度依次点亮——
与交错 (stagger)同源,只是这里的「轴」是路径长度而非时间。
@vega/anim — 描边自绘
描边动的是「笔触」;若要让一个物体沿这条路径行进并朝向前进方向,见
沿路径运动。描边的进度本身就是一次普通插值,
只是把结果接到了 dashoffset 上。