SVG 动画制作指南

SVG (Scalable Vector Graphics) 不仅可以用来绘制矢量图形，还可以制作轻量级、高质量的动画。本文将介绍如何制作 SVG 动画，并展示一个可控制转速的风扇示例。

为什么选择 SVG 动画？

1. 矢量特性：无论放大多少倍，图像依然清晰。
2. 文件小：相比 GIF 或视频，SVG 通常更小。
3. 可交互：可以通过 CSS 和 JavaScript (Vue/React) 控制动画属性。
4. 性能好：现代浏览器对 SVG 渲染进行了优化。

SVG 动画的实现方式

1. CSS 动画 (@keyframes)

这是最简单也是最常用的方式。你可以像操作普通 DOM 元素一样，对 SVG 元素应用 CSS 动画。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fan-blade {
  animation: spin 1s linear infinite;
  transform-origin: center; /* 确保围绕中心旋转 */
}

2. SVG 原生动画 (<animate>)

SVG 内部支持 SMIL (Synchronized Multimedia Integration Language) 动画标签，如 <animate>, <animateTransform>。

<rect x="10" y="10" width="100" height="100">
  <animate attributeName="x" from="10" to="50" duration="2s" repeatCount="indefinite" />
</rect>

3. JavaScript / 库 (GSAP, Anime.js)

对于复杂的动画序列或需要精细控制的场景，使用 JavaScript 动画库是更好的选择。

实战示例：可控风扇

下面是一个使用 Vue 和 SVG 结合的示例。我们定义了一个风扇的 SVG 图形，并使用 Vue 的数据绑定来控制 CSS animation-duration 属性，从而实现转速控制。

效果演示

代码实现

Vue 组件 (SvgFan.vue):

<template>
  <div class="fan-container">
    <!-- 绑定 animationDuration 样式 -->
    <div class="fan-wrapper" :style="{ animationDuration: speed + 's' }">
      <svg viewBox="0 0 100 100" width="200" height="200">
        <!-- 风扇叶片 -->
        <g fill="#4CAF50">
          <path d="M50 50 Q30 10 50 10 Q70 10 50 50" transform="rotate(0 50 50)" />
          <path d="M50 50 Q90 30 90 50 Q90 70 50 50" transform="rotate(0 50 50)" />
          <path d="M50 50 Q70 90 50 90 Q30 90 50 50" transform="rotate(0 50 50)" />
          <path d="M50 50 Q10 70 10 50 Q10 30 50 50" transform="rotate(0 50 50)" />
        </g>
        <circle cx="50" cy="50" r="5" fill="#FFC107" />
      </svg>
    </div>
    
    <div class="controls">
      <input type="range" min="0.1" max="2" step="0.1" v-model.number="speed" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const speed = ref(0.5) // 动画持续时间，越小越快
</script>

<style scoped>
.fan-wrapper {
  animation: spin linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

总结

通过结合 SVG 的矢量优势和 Vue 的响应式数据能力，我们可以轻松创建出既美观又具有交互性的 Web 动画。希望这个简单的风扇示例能给你带来灵感！