推荐：实现 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](<http://orbit.bonsaijs.org/#new Rect(100%2C 100%2C 100%2C 100).fill(%22red%22).addTo(stage)%3B>)，以及文档和更多细节在 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 安装；

// NPM
npm install vivus

// Bower
bower install vivus

// jsDelivr CDN
cdn.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。

// NPM
npm install @svgdotjs/svg.js

// Yarn
yarn add @svgdotjs/svg.js

// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://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设置动画；
• 良好的浏览器支持；
• 百分百开源免费；

安装及使用

// NPM
npm i snapsvg

// Bower
bower install snap.svg

5. Lazy Line Painter

用于创建 SVG 路径动画；

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

安装及使用

// NPM
npm 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()

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

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

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