简介
animate-svg 是一个专门用于 SVG 动画制作的 npm 包。它基于 Web Animations API 和 CSS Animations 实现了一系列 SVG 动画效果，可以帮助前端开发者轻松创建各种有趣的动态 SVG 图形。
本文将介绍 animate-svg 的基本使用方法，从安装到实际应用，帮助读者轻松上手使用这个npm包。
安装
安装 animate-svg 最简便的方法是通过 npm 包管理器。在命令行中输入以下命令即可：
npm install animate-svg --save
若是在浏览器中使用，可以将 animate-svg 的 JavaScript 文件下载到本地，或者使用 CDN 直接引入。
基本用法
使用 animate-svg，首先需要将 SVG 图形添加到 DOM 中，并赋予其 ID，例如：
<svg id="mysvg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="blue"/> </svg>
然后在 JavaScript 中引入 animate-svg，并调用相关动画方法，例如：
import { animation } from 'animate-svg';
animation('mysvg circle', {
duration: 1000,
delay: 500,
from: { cx: '100', cy: '100' },
to: { cx: '300', cy: '300' },
});这个示例代码将在 0.5 秒后开始，将圆形移动到 (300, 300) 的位置，时长为 1 秒。其中，第一个参数是选择器，表示对哪个图形进行动画；第二个参数则是动画选项，包括时长、延迟、起始状态、结束状态等等。animate-svg 同时支持针对多个图形的复合动画，例如：
-- -------------------- ---- -------
------ - ----- - ---- --------------
-------------- -
--------- -----
------ -----
------- -----------
----------- -
- --------- --------- ----- - --- ----- -- --- - --- ----- - --
- --------- ------- ----- - -- ----- -- --- - -- ----- - --
- --------- ---------- ----- - --- ----- -- --- - --- ----- - --
--
---这个代码将在 1 秒后开始，将圆、矩形、椭圆三个图形都移动到 x 坐标为 300 的位置，时长为 2 秒，缓动效果为 ease-out。其中，animations 是一个数组，包含多个动画对象，每个对象包含图形选择器以及起始、终止状态等。
动画效果
animate-svg 提供了众多的动画效果，包括平移、旋转、缩放、淡入淡出等等。每个动画效果都可以通过配置不同的参数，实现各种有趣的效果。下面简单介绍几个常用的动画效果：
平移动画
import { animation } from 'animate-svg';
animation('mysvg rect', {
duration: 1000,
from: { x: '0', y: '0' },
to: { x: '100', y: '100' },
});这个代码将会在 0s 后开始，将矩形向右下方移动 100px，时长为 1s。
旋转动画
import { animation } from 'animate-svg';
animation('mysvg rect', {
duration: 1000,
from: { transform: 'rotate(0)' },
to: { transform: 'rotate(360deg)' },
});这个代码将会在 0s 后开始，将矩形顺时针旋转 360 度，时长为 1s。
缩放动画
import { animation } from 'animate-svg';
animation('mysvg circle', {
duration: 1000,
from: { r: '50' },
to: { r: '100' },
});这个代码将会在 0s 后开始，将圆形从半径为 50px 缩放至半径为 100px，时长为 1s。
淡入淡出动画
import { animation } from 'animate-svg';
animation('mysvg rect', {
duration: 1000,
from: { opacity: '0' },
to: { opacity: '1' },
});这个代码将会在 0s 后开始，将矩形从透明度为 0 淡入至完全不透明，时长为 1s。
总结
animate-svg 是一个非常有用的工具，它能够帮助我们轻松创建各种有趣的 SVG 动画效果。本文介绍了 animate-svg 的安装方法和基本用法，同时提供了几个常用的动画效果示例代码，希望读者可以通过本文掌握 animate-svg 的使用方法，同时通过尝试各种动画效果，提升自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664081e8991b448e24a2