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