夹吃灰，推荐：实现 SVG 动画的 5 个 JavaScript 库~

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

本篇译自：blog.bitsrc.io/top-5-javas…

现如今，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 安装；

// 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 就是：对于好资源的收藏从不手软！！

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