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

SVG 这是一个与分辨率无关的图形。这意味着它在任何类型的屏幕上看起来都很好，而不会失去任何质量。此外，你还可以使用一些动画效果 SVG 栩栩如生。

在我们之前 SVG 在一系列文章中，我们向您展示了SVG 动画如何与 <animate> 虽然元素在低水平上一起工作。这一次，我们将分享一些帮助 SVG 动画扩展到下一个级别 JavaScript库。

Vivus是一个 JavaScript 库，它使你的 SVG 它有被绘制的外观。Vivus 开箱即用，不需要任何依赖项(比如 jQuery）。只需将.js您的文件中包含了文件 HTML 指定你想要的动画 SVG 立即开始动画的元素，以及一些预设选项。

例如：

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

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

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

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

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

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

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

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

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

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

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

Lazy Line Painter jQuery 用于动画的插件 SVG 路径用动画绘制序列，类似 Vivus。

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

SVG.js是用来操作和动画的 SVG 轻量级图书馆。使用这个图书馆，你将能够做到 SVG 动画设置了元素中的大小、位置或颜色。

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

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