SVG 的动画：入门指南

前端

2023-11-17 09:26:33

在现代 Web 开发中，动画已成为提升用户体验和页面吸引力的关键元素。而对于 SVG，这种强大的可扩展矢量图形格式，我们同样可以通过动画赋予它鲜活的生命力。

本文将为你提供一个全面易懂的 SVG 动画入门指南，助你掌握这项强大的技术。

SVG 动画的魅力

SVG 动画的魅力在于它提供了多种动画方式，让你可以创建从简单变换到复杂交互的任何效果。这不仅增强了用户体验，还能让你的页面脱颖而出。

探索 SVG 动画方法

要为 SVG 添加动画，有以下三种主要方法：

CSS 动画： 使用 CSS 样式控制元素的外观和行为，实现流畅的动画效果。
JavaScript 动画： 利用 JavaScript 的动态特性，操纵 SVG 元素，实现更高级的动画控制。
SMIL 动画： 使用 SMIL（同步多媒体集成语言）指定动画时间线，在 SVG 中创建复杂的多媒体呈现。

实践指南

让我们深入了解每种方法的实际应用：

CSS 动画

@keyframes scale-up {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

svg path {
  animation: scale-up 1s ease-in-out infinite alternate;
}

JavaScript 动画

const path = document.querySelector("svg path");

path.addEventListener("mouseover", () => {
  path.style.fill = "red";
  path.style.transform = "rotate(360deg)";
});

path.addEventListener("mouseout", () => {
  path.style.fill = "black";
  path.style.transform = "rotate(0deg)";
});

SMIL 动画

<svg>
  <path id="my-path" fill="black">
    <animate id="my-animation" attributeName="fill" values="black;red;black" dur="1s" repeatCount="indefinite" />
  </path>
</svg>