前端SVG开发插件：8个用于SVG动画的JavaScript库 - Web前端

SVG 是与分辨率无关的图形。这意味着它在任何类型的屏幕上看起来都不错，而不会损失任何质量。除此之外，您还可以通过一些动画效果使 SVG 栩栩如生。

在我们之前 SVG 系列的一篇文章中，我们已经向您展示了SVG 动画如何与 <Animate> 元素一起工作，尽管是在低级别。这一次，我们将分享几个有助于将 svg 动画扩展到下一个级别的 JavaScript库。

1. Vivus【http://maxwellito.GitHub.io/vivus/】

Vivus是一个 JavaScript 库，它使您的 SVG 具有被绘制的外观。Vivus 开箱即用，无需任何依赖项（例如 JQuery）。只需将.JS文件包含在您的 HTML 中，并指定您想要动画的 SVG 元素，以及一些预设选项以立即开始动画。

例如：

new Vivus( 'SVG-element', { type: 'oneByOne', duration: 200 });

以上将svg-element在 200 毫秒内为我的 SVG 元素设置动画。此 SVG 的每个元素都将在该时间范围内一个接一个地绘制。

2.BonsAI【https://bonsaijs.org/】

Bonsai是一个强大的 javascript 库，允许您在网页上绘制、变形和动画图形元素。

它支持 html5 图形类型Canvas和SVG。Bonsai，你可以建立一个简单的矩形或圆形或者如果你喜欢，一个完全成熟的多人动画游戏像这样【https://vimeo.com/53452607】的。

您可以使用 Orbit 来感受Bonsai如何在实景拍摄中发挥作用，或者查看这些令人印象深刻的示例以从中汲取灵感。

3. Velocity【HTTP://velocityjs.org/】

Velocity是一个为快速动画而构建的 JavaScript 库。Velocity 渲染动画时的速度非常快。相比之下，它优于 jQuery，甚至优于 CSS。

Velocity 的 API 的工作原理类似于 jquery 中的动画，只是它使用关键字别名$.velocity()而不是$.animate(). 除此之外，您可以使用完全相同的动画关键字，例如fadeIn和fadeOut。

4. RaphaelJS【HTTPS://dmitrybaranovskiy.github.io/raphael/】

RaphaelJS是一个库，它允许您在网页上绘制矢量图形 SVG 以及动画。它支持广泛的浏览器，这几乎使 Raphael 成为利基市场中最可靠的 Javascript 库。

使用 RaphaelJS，您可以构建类似于反恐精英的交互式分析图表、世界地图和游戏交互。

5. SnapSVG【http://snapsvg.io/】

SnapSVG是另一个流行的 SVG 动画 javascript 库，由 Raphael 开发人员 Dmitry Baranovskiy 与 adobe WEB 平台团队从头开始开发。

不过与 Raphael 不同，SnapSVG 仅适用于最新的浏览器。这使得库比 Raphael 小得多，并支持 SVG 功能，如剪辑和遮罩。

6.Lazy Line Painter【http://lazylinepainter.info/】

Lazy Line Painter是一个 jquery 插件，用于动画 SVG 路径以动画绘制序列，类似于 Vivus。

坏消息是这个插件只做这个非常具体的事情。因此，当您从 Illustrator 或 Inkscape 等应用程序导入 SVG 时，请确保您的 SVG 上没有留下填充颜色，只有路径。

7. SVG.js【https://svgjs.com/docs/3.0/】

SVG.js是一个用于操作和动画 SVG 的轻量级库。使用此库，您将能够为 SVG 元素中的大小、位置或颜色设置动画。

它不仅动画；您还可以应用额外的插件来添加额外的功能。此示例使用 svg.filter.js插件将高斯模糊、去饱和、对比度、棕褐色等过滤器应用于图像。

8.Walkway

Walkway支持三种类型的元素，path，line，和polyline用于绘制SVG线。这是Polygon 的一个示例，显示了 PlayStation 4 控制台线动画。

标签：插件动画WebJavaScriptSVG