SVG动画序列控制的关键是用requestAnimationFrame实现帧级精准控制，避免setInterval/setTimeout导致的掉帧卡顿；需区分可插值属性（如opacity、x/y）与不可插值属性（如d、clip-path），并封装可复用动画单元，结合CSS过渡协同工作。
SVG动画序列控制用JS驱动属性平滑过渡，关键不在写多少代码，而在于选对时机、控好节奏、避开浏览器限制。纯CSS虽简洁，但复杂时序、条件分支、用户交互响应等场景，JS才是可靠主力。
用 requestAnimationFrame 实现帧级精准控制
避免 setInterval 或 setTimeout，它们无法与屏幕刷新率同步，容易掉帧或卡顿。requestAnimationFrame 是浏览器原生提供的“下一帧执行”机制，天然适配 60fps：
- 每次回调中只做一次状态更新（如修改 fill、stroke、transform）
- 通过插值函数（如线性、ease-in-out）计算当前帧的中间值
- 递归调用自身，直到目标状态达成，或用 cancelAnimationFrame 主动终止
属性选择：哪些能平滑过渡，哪些必须绕路
不是所有 SVG 属性都支持 JS 插值动画。需分清两类：
- 可直接数值插值的属性：opacity、stroke-width、x/y、cx/cy、r、transform（translate/scale）、stroke-dashoffset —— 这些是数字，JS 可安全计算中间值
- 不可直接插值的属性：d（路径数据）、clip-path、filter —— 它们是字符串或复杂结构，必须借助专用库（如 Pasition、svg-path-morph）先解析再逐点插值
封装可复用的动画单元
重复写 requestAnimationFrame 循环易出错。建议封装成轻量函数，接受目标元素、属性名、起始值、结束值、持续时间（ms）和缓动函数：
- 内部自动计算帧数（duration / 16.67 ≈ 总帧数），每帧推进进度百分比
- 支持同时驱动多个属性（如 fill + transform），避免多次重排
- 返回一个控制对象，含 .pause()、.resume()、.cancel() 方法，便于交互中断
与 CSS 协同而非替代
JS 不必包揽一切。推荐“CSS 做基础过渡，JS 做逻辑调度”：
- 给 SVG 元素预设 class，定义 transition: fill 0.4s cubic-bezier(.25,.46,.45,.94)
- JS 只负责切换 class 或设置 style.fill，让浏览器接管插值渲染
- 当需要暂停、反向、动态变速时，再用 JS 操作 element.style.animationPlayState 或直接改内联样式
