SVG 动画有哪些实现方式，它们之间有什么区别 - 面试题

SVG 动画可以通过多种方式实现，每种方式都有其特点和适用场景：

1. SMIL 动画（原生 SVG 动画） SMIL（Synchronized Multimedia Integration Language）是 SVG 原生支持的动画语法。

常用元素：

<animate>：基本属性动画
<animateTransform>：变换动画（旋转、缩放、平移、倾斜）
<animateMotion>：沿路径运动

示例：

svg
<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
    <animate attributeName="fill" values="red;blue;red" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

优点：

原生支持，无需 JavaScript
声明式语法，易于理解
性能良好

缺点：

Chrome 已宣布弃用 SMIL
灵活性有限
调试困难

2. CSS 动画 使用 CSS 的 @keyframes 和 transition 属性。

示例：

svg
<svg width="200" height="200">
  <style>
    .circle {
      animation: move 2s infinite alternate;
      transition: fill 0.3s;
    }
    .circle:hover {
      fill: blue;
    }
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
    }
  </style>
  <circle class="circle" cx="50" cy="50" r="20" fill="red" />
</svg>

优点：

广泛支持，标准技术
性能优秀（GPU 加速）
易于维护和调试
支持 hover 等交互状态

缺点：

无法直接操作 SVG 内部属性
复杂动画需要大量 CSS

3. JavaScript 动画 使用 JavaScript 操作 SVG DOM 或使用动画库。

原生 JavaScript 示例：

javascript
const circle = document.querySelector('circle');
let position = 50;

function animate() {
  position += 1;
  circle.setAttribute('cx', position);
  if (position < 150) {
    requestAnimationFrame(animate);
  }
}
animate();

使用 GSAP 库示例：

javascript
gsap.to('circle', {
  attr: { cx: 150 },
  duration: 2,
  repeat: -1,
  yoyo: true
});

优点：

最大灵活性
可以实现复杂逻辑
丰富的动画库支持（GSAP、Anime.js 等）
可以与其他 JavaScript 交互

缺点：

需要编写更多代码
性能需要优化
依赖 JavaScript

选择建议：

简单动画：优先使用 CSS 动画
复杂交互：使用 JavaScript + 动画库
向后兼容：避免使用 SMIL
性能关键：优先 CSS 和 requestAnimationFrame