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 动画。希望这个简单的风扇示例能给你带来灵感！

为什么值得继续读

SVG 动画制作指南 对应的是一个可直接落地的问题场景。即使页面本身很短，核心价值也不是篇幅，而是把关键结论、入口或方法先给到你，让你能快速判断这条路线是否值得继续投入时间。

读完当前页面后，最好顺着下面的相关文章再看两到三个相邻主题，把概念、工具和实践路径连成一条线，这样比单独看一页更容易形成真正可复用的理解。

如果你把它当作一个入口页而不是终点页，短页面的价值反而会更高：它负责降低理解门槛，相关页面负责补齐深度。

换句话说，先用短页面快速定向，再用长页面补足细节，通常比一开始就进入长篇材料更省时间。

相关文章

• Tailwind CSS 最佳实践：高效构建可维护的现代前端：学习 Tailwind CSS 最佳实践，掌握构建可扩展、可维护、高性能前端应用的技巧。了解实用优先CSS模式、响应式设计技巧和性能优化策略，提升开发效率和代码质量。
• 后端开发者成长路线图2025：从零基础到高级架构师完整指南：2025年最新后端开发者成长路线图，涵盖编程语言选择、框架学习、数据库设计、API开发等核心技能，助你从零基础成长为高级后端工程师。
• Electron快速构建跨平台应用快速入门：Electron快速构建跨平台应用快速入门（实战版）

下一步怎么走

• 从主线教程继续：把当前页面放回更完整的合集或阅读主线里，减少看完即走。
• Tailwind CSS 最佳实践：高效构建可维护的现代前端：学习 Tailwind CSS 最佳实践，掌握构建可扩展、可维护、高性能前端应用的技巧。了解实用优先CSS模式、响应式设计技巧和性能优化策略，提升开发效率和代码质量。
• 后端开发者成长路线图2025：从零基础到高级架构师完整指南：2025年最新后端开发者成长路线图，涵盖编程语言选择、框架学习、数据库设计、API开发等核心技能，助你从零基础成长为高级后端工程师。
• Electron快速构建跨平台应用快速入门：Electron快速构建跨平台应用快速入门（实战版）
• 收藏首页：把这个工作台放进书签，后续新增内容会先回到首页曝光。
• 订阅 RSS：如果你想持续跟进更新但不留邮箱，RSS 是当前最直接的回访入口。
• 提交工具或选题：把你希望补齐的工具、教程或合作需求直接发过来。