推荐：实现 SVG 动画的 5 个 JavaScript 库~

现如今，SVG 已经广泛应用于 Web 开发当中，可缩放而不失真（矢量图形），就是它的最大优势！

但是，你知道 SVG 除了可以被用作于静态图片，还可以应用于 SVG 动画吗？

本篇带来实现 SVG 动画的 5 个 JavaScript 库！

点赞 + 收藏 === 学会，一气呵成！👍👍👍

1. BonsaiJS

具有直观的图形 API，是一个基于 SVG 渲染的轻量级图形库；

BonsaiJS 是创建通用图形（从简单图标到复杂图表）的绝佳选择。它使用关键帧完全控制 SVG 中的路径和动画效果；

除此之外，BonsaiJS 有良好的文档维护，并且还有一些其它惊人的特性。

特性

• 支持 HTML5 canvas 和 SVG；

• 运行和渲染在结构上，是分开的；

• 支持关键帧和传统动画；

• 在 Node 环境下运行上下文；

• 适配所有主流浏览器；

安装及使用

npm 安装

npm install bonsai

然后，就可以使用 BonsaiJS API 了，嵌入 SVG 图像并设置其动画，如下所示：

bonsai.run(document.body, {  width: 600,  height: 600,  code: function() {    var url = 'example.svg';    new Bitmap(url).on('load', function() {      this.attr('width', 200);      this.addTo(stage);      this.animate('3s', {        x: 200      });    });  }});

这里有一个可供在线编辑的例子 online editor，以及文档和更多细节在 documentation。

2. VivusJS

VivusJS 是一个设置 SVG 动画的轻量级 JavaScript 库。

它提供了多种动画选择，还可以根据需要编写脚本来绘制 SVG。此外，VivusJS 没有任何依赖，还有一些其它吸引人的特性。

特性

• 提供 3 种主要动画类型：delayed、sync 和 one by one；

• 为 path 和动画提供 5 种计时选项；

• 高性能；

• 允许自定义 SVG.

• 安装之前就能测试 Vivus instant；

安装及使用

VivusJS 每周 NPM 下载量超过 4500 次，GitHub stars 的下载量达到 135 万次。

您可以使用 NPM、Bower 或 CDN 安装；

// NPMnpm install vivus
// Bowerbower install vivus
// jsDelivr CDNcdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

使用方式：

// Inline<svg id="my-svg">  <path...></svg>
<script>  new Vivus('example.svg', {duration: 200}, myCallback);</script>
----------------------------------------------------------
// Dynamic<div id="svg-div"></div><script>  new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);</script>

3. SVG.js

SVG.js 是一个操纵 SVG 并设置 SVG 动画的 JS 库。

它允许从 3 个不同方面设置 SVG 动画：大小、位置和颜色。与其他动画库相比，SVG.js 简单且轻量，并且具有一些令人兴奋的特性。

特性

• The syntax is simple to read and understand.

• 16KB when gzipped and 62KB when minified.

• Size, position, transformations, color, and other animations.

• There are several plugins available for additional customization.

• Clipping paths and opacity masks are fully supported.

安装及使用

可以 NPM、Yarn 或 CDN 安装 SVG.js。

// NPMnpm install @svgdotjs/svg.js
// Yarnyarn add @svgdotjs/svg.js
// CDNshttps://cdnjs.com/libraries/svg.jshttps://cdn.jsdelivr.net/npm/@svgdotjs/svg.jshttps://unpkg.com/@svgdotjs/svg.js

安装后，根据 API 开始绘制 SVG 和设置 SVG 动画:

import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).animate({  duration: 2000,  delay: 1000,  when: 'now',  swing: true,  times: 5,  wait: 200}).attr({ fill: '#f06' })

4. Snap.svg

Snap.svg 是一个让 SVG 焕然一新的 JS 库。

它支持所有最新的 SVG 功能，如遮罩、剪裁、模式设置和全渐变等；

特性

• 支持最新的 SVG 功能；

• 可以在 Illustrator、Inkscape 或 Sketch 中创建 SVG 内容，然后使用 Snap 设置动画；

• 良好的浏览器支持；

• 百分百开源免费；

安装及使用

// NPMnpm i snapsvg
// Bowerbower install snap.svg

5. Lazy Line Painter

用于创建 SVG 路径动画；

Lazy Line Painter 与上述库稍有不同，它专门用于路径动画。此外，它还提供了一个名为 Lazy Line Composer 的在线工具，允许您在几秒钟内创建 SVG 动画。

安装及使用

// NPMnpm i lazy-line-painter
// CDN<script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@1.9.4/lib/lazy-line-painter-1.9.4.min.js"></script>

使用：

import LazyLinePainter from 'lazy-line-painter'
let el = document.querySelector('#example-svg')let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })myAnimation.paint()

<hr>

OK，以上就是本篇要推荐的 5 种不同的 JavaScript SVG 动画库。

我们的 slogan 就是：对于好资源的收藏从不手软！！

我是掘金安东尼，公众号同名，日拱一卒、日掘一金，再会~