SVG动画库的核心原理是用JavaScript主动控制SVG属性变化，并通过requestAnimationFrame（rAF）精准调度每帧更新，实现高性能、可交互、可编程的矢量动画；rAF不是定时器，而是与浏览器渲染管线协作的接口，自动对齐屏幕刷新节奏、后台暂停、重绘前执行、适配高刷屏且天然节流。
SVG动画库的核心原理，是用 JavaScript 主动控制 SVG 元素的属性变化，并通过 requestAnimationFrame（rAF）精准调度每一帧的更新时机，从而实现高性能、可交互、可编程的矢量动画。
为什么必须用 requestAnimationFrame？
rAF 不是“另一个定时器”，而是浏览器渲染管线的协作接口。它让动画逻辑自动对齐屏幕刷新节奏（通常是 60Hz），避免 setInterval 带来的帧错位、丢帧和后台耗电问题。当页面切到后台或元素不可见时，rAF 会暂停执行；动画回到前台后自动恢复——这些都不用开发者手动判断。
- 每帧执行时机由浏览器决定，在重绘前完成 DOM 更新，不打断渲染流程
- 不依赖固定毫秒数（如 16ms），能适配高刷屏（90Hz/120Hz）或性能受限设备
- 天然支持节流，比手动 throttle + setTimeout 组合更轻量、更可靠
SVG 动画库如何驱动图形变化？
底层不靠 CSS 或 SMIL，而是直接操作 SVG 元素的 DOM 属性（如 cx、cy、d、transform），配合插值算法计算中间状态。一个典型循环长这样：
- 启动时记录起始时间（
performance.now()）和目标状态 - 在 rAF 回调中：算出当前进度（t ∈ [0,1]）、调用缓动函数得到插值系数、更新 SVG 属性
- 若未完成，递归调用
requestAnimationFrame(nextFrame) - 支持暂停、反向、动态修改目标值等交互能力
关键优化点在哪里？
真正影响流畅度的不是“有没有用 rAF”，而是怎么用。高效 SVG 动画库普遍遵循：
- 只修改
transform和opacity属性，避免触发 layout（重排） - 对
<path>动画采用路径插值（如基于贝塞尔曲线的点采样），而非逐帧重写d属性 - 批量更新多个元素时，复用同一 rAF 回调，减少重复调用开销
- 为复杂动画启用分层渲染（例如将运动元素包裹在
<g transform>中统一变换）
和原生 SVG 动画方式对比
SMIL 已被主流浏览器弃用；CSS 动画虽轻量，但无法响应运行时数据或自定义路径。而基于 rAF 的 JS 库（如 anime.js、GSAP 的 SVG 插件、或轻量方案如 svg.js + raf-loop）能自由组合数值计算、物理模拟、用户事件响应——这是构建交互动效、数据可视化、Lottie 替代方案的基础。
