css 动画与路径绘制_利用 stroke-dasharray 实现路径动画

stroke-dasharray 是 svg 路径的虚线控制属性，需配合 stroke-dashoffset 和 @keyframes 实现“绘制”动画；必须用 getTotallength() 获取真实路径长度并设为 “L L”，初始 offset 为 L、终点为 0 才能正确逐段显现。

stroke-dasharray 是什么，为什么能做路径动画

stroke-dasharray 不是动画属性，而是 SVG 路径的“虚线控制开关”。它本身不驱动动画，但配合 stroke-dashoffset 和 css @keyframes，就能让路径像被“画出来”一样逐段显现。核心原理是：把整条路径的长度设为一个实线段（dasharray = [totalLength, totalLength]），再用 dashoffset 从末尾往回“推”，视觉上就是从起点开始绘制。

常见错误是直接写 stroke-dasharray: 10 就想动起来——没用。必须先算出路径真实长度，否则动画会错位、截断或不动。

• 必须用 javaScript 调用 getTotalLength() 获取精确值，CSS 里无法直接读取
• stroke-dasharray 值推荐写成 "L L" 形式（如 "240 240"），避免浏览器对单值解析不一致
• stroke-dashoffset 初始值应设为 L，结束值设为 0，才能实现“从无到有”的绘制效果

如何正确获取 path 的总长度并绑定到 CSS

不能靠目测或设计稿标注的“大概 200px”，SVG 路径受 transform、viewBox、缩放影响，只有运行时调用 getTotalLength() 才可靠。而且该方法在元素未挂载或未渲染完成时会返回 0。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 确保 已插入 dom 且样式已生效（比如放在 window.addEventListener('load', ...) 或 useEffect(() => {...}, []) 中）
• 用 pathEl.getTotalLength() 获取长度后，立刻写入内联 style：pathEl.style.strokeDasharray = `${len} ${len}`
• 别用 CSS 自定义属性（--dash-len）间接传值——多数浏览器不支持在 stroke-dasharray 中引用 CSS 变量

const path = document.querySelector('path'); const len = path.getTotalLength(); path.style.strokeDasharray = `${len} ${len}`; path.style.strokeDashoffset = len; // 然后触发动画类 path.classlist.add('draw');

@keyframes 动画中 stroke-dashoffset 怎么写才不跳变

跳变（start 时闪一下、中间卡顿、结束多留一截）基本都源于起止值不匹配或 timing-function 误用。关键不是“加个 ease-in-out”，而是数值必须严格对应。

• 动画起始状态：CSS 中显式设 stroke-dashoffset: L（不能只靠 keyframes 里的 0%）
• 动画终点必须是 stroke-dashoffset: 0，哪怕路径含 fill，也要确保描边完全覆盖
• 避免用 cubic-bezier(.2,1.5,.8,1) 这类超出 y 范围的贝塞尔曲线——部分 safari 会截断为 1，导致 offset 在动画中突变为 0
• 如果路径含多个不连续子路径（M x y L ... M x y L ...），getTotalLength() 仍返回总和，但视觉绘制可能断开；此时需拆成多个 单独控制

@keyframes draw {   to {     stroke-dashoffset: 0;   } } .draw {   animation: draw 1.2s ease-out forwards; }

兼容性与性能要注意的几个硬伤

IE 完全不支持 stroke-dasharray 动画；ios Safari 13.3–14.2 在 will-change: transform 下偶发 offset 渲染异常；更隐蔽的问题是：路径太复杂（上千个点）、或页面重排频繁时，动画帧率会骤降。

• 用 transform: translateZ(0) 或 will-change: stroke-dashoffset 提升图层，但仅对较新 chrome/edge 有效；Safari 反而可能更卡
• 避免在 scroll 事件里反复调用 getTotalLength()——它触发 layout，高频执行等于自造卡顿
• 若需支持 IE，只能降级为 SMIL（），但 Chrome 100+ 已弃用 SMIL，不可混用
• 路径动画本质是“描边显隐”，不是矢量重绘——所以没法做出“笔锋粗细变化”或“墨水晕染”这类效果，别强求

最常被忽略的一点：动画结束后，stroke-dashoffset 停在 0 是 OK 的，但如果你后续 js 想重新播放，必须手动重置 offset 为 L，否则第二次 animation 不会触发——CSS 动画不会重复应用相同值。