SVG动画配合requestAnimationFrame是实现高性能流畅矢量动画的核心方案，因其精准控帧、避免丢帧，并支持动态响应交互与复杂数值计算。
SVG动画配合 requestAnimationFrame（简称 rAF）是实现高性能、流畅矢量动画的核心方案。它比 CSS 动画或 setInterval 更精准控制帧率，避免丢帧，同时保留 SVG 的缩放无损、语义清晰和脚本可操作优势。
为什么 SVG + rAF 比 CSS 动画更适合复杂交互
CSS 动画对 SVG 元素支持有限：部分属性（如 path 的 d、clipPath 内部坐标）无法直接用 CSS 过渡或动画；且 CSS 无法动态响应鼠标位置、滚动偏移等实时数据。而通过 JavaScript 操作 SVG 属性，再用 rAF 驱动，可完全掌控每一帧的渲染逻辑。
- rAF 自动与屏幕刷新率同步（通常 60fps），不浪费 CPU，也不受主线程阻塞影响太大
- 可逐帧计算路径点、贝塞尔控制柄、渐变偏移等复杂数值，适合数据可视化、手绘效果、物理模拟
- 便于结合 IntersectionObserver、PointerEvent 或 Web Animations API 做条件触发
基础实现：用 rAF 驱动 SVG 属性更新
关键不是“一帧改一次”，而是“只在需要时改，并确保改完立刻渲染”。避免在 rAF 回调中做耗时计算或 DOM 查询。
- 把 SVG 元素（如
<circle>、<path>）缓存为 JS 变量，而非每次用document.getElementById - 动画状态（如当前角度、位移、进度值）用局部变量或对象字段维护，不依赖 getAttribute
- 在 rAF 回调中仅执行数值计算 +
setAttribute，不触发 layout 或 paint 以外的操作
示例：平滑旋转一个 <g> 组
立即学习“前端免费学习笔记（深入）”；
const group = document.getElementById('rotating-group');
let rotation = 0;
const animate = () => {
rotation += 0.5; // 每帧转0.5度
group.setAttribute('transform', `rotate(${rotation})`);
requestAnimationFrame(animate);
};
animate();
性能优化要点
即使用了 rAF，不当写法仍会导致卡顿。重点在于减少重排（reflow）、重绘（repaint）和 JS 执行开销。
- 优先用
transform（如translate、rotate、scale）代替修改x/y或cx/cy—— 它们能触发 GPU 加速，且不触发 layout - 对大量 SVG 元素（如 100+ 圆点），避免逐个 setAttribute；改用
<g>包裹后统一 transform，或使用<use>引用符号（symbol）复用 - 启用
will-change: transform（CSS 中）提示浏览器提前优化该元素图层，但别滥用，仅用于持续动画的元素 - 动画暂停时务必调用
cancelAnimationFrame清理，尤其在组件卸载或 tab 切换时
进阶技巧：结合 Path 动画与插值
要让 <path> 沿曲线运动或形变，需解析路径命令（如 M, L, C），用 getPointAtLength 或第三方库（如 svg-path-properties）获取坐标。rAF 在这里负责按时间/进度采样并更新 transform 或 d 属性。
- 不要每帧都调用
getTotalLength()—— 它触发 layout，应缓存结果 - 若需频繁更新
d（比如 morphing），考虑用<animate>元素或 Web Animations API 替代 JS 拼接字符串，更高效 - 对高频率路径动画（如粒子流），可预生成关键帧数组，rAF 仅做线性插值，避免实时解析
