推荐10 款 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外，你甚至可以让SVG动起来，通过使用一些javascript类库。下面，我们分享一些javascript类库，这些类库会帮助我们将SVG动画提高一个等级。
Vivus 是一个能动画js类库，它能够给SVG图像显示出被画出来的过程。Vivus是没有其他类库依赖的（比如jQuery)。你仅仅需要在页面中加入这个.js文件，然后传入需要被用来动画的SVG部分就行。同时通过指定一些配置，它能够在页面加载后直接显示动画效果。
Bonsai 是一个功能丰富的 JS 类库，你能够用它来画和 animate 动态内容在网站上。这些内容包括了 HTML5 video、变化的 Canvas 和 SVG。通过 Bonsai 框架，你能画一个简单的矩形、甚至一段矩形，如果你喜欢甚至可以画一个丰富的多人卡通游戏进去。
Velocity 是一个 JS 类库，它是用来做频繁动画用的。Velocity 的 js 动画“速度”是非常快的。它比JQuery 快，甚至比 CSS 动画还要快。Velocity 的 API 和 $.fn.animate 很像，都是通过$()来操作。velocity()是另一种方法，相比 $().animate()。总而言之，你应该使用一致的animate效果，包括 fadeIn 和 fadeOut 方法（译者：Velocity 提供了 fadeIn 和 fadeOut 方法）。
RaphaelJS 也通常是用来在网页上画SVG图和动画的。它兼容各种windows浏览器一直到IE6，因为如此，Raphael成为了市面上最受信赖的js（svg）类库。有了它，你可以制作分析图表、地图、游戏就像在厨房做饭一样。
SnapSVG 是另一个知名 JS 类库，它是由 Dmitry Baranovskiy 开发的（Raphael 同样也是）。同样它也是 Adobe Web Software Group 来维护。和 Raphael 不同的是，它只提供了 ie 最新版支持。这使得 SnapSVG 在体积上小了许多（相比 Raphel）以实现相同的功能（比如 trim）和支持最新的功能。
Laid back Range Painter 是一个 jQuery 插件，通常被用来作绘制图集，有点像 Vivus。通常你会吐槽的是它的也就只有这么一个特殊的功能。让我来解释下，如果你是用Illustrator 或者Inkscape制作的SVG图像，而且SVG图像没有任何颜色上的变化，仅仅是轨迹的变化，可以用它。
SVG.js 是一个轻量级的操作和动画 SVG 类库。你能够操作变化方向、位置和颜色。这还没完，你甚至可以自己实现插件等一些其他功能。这个实例可以attach一些插件，比如svg.filter.js，他可以为你的图片实现 Gaussian blur, desaturase, compare, sepia 等等功能。
Walkway 支持3种方式,path,line和用polyline来画的svg线。它提供了一个很好的例子，绘制了一个PlayStation 的集合动画。
ProgressBar.js 是一个可爱的和易于接受的增长曲线图用来绘制卡通SVG线条。有了它，各种形状都可以用作增长曲线。它集成了一些实用的形状如Range,Circle和Block，你甚至可以自行开发一个增长图通过Illustrator或者其他的矢量图绘制工具。ProgressBar.js 是轻量级，MIT许可的而且支持IE9+。你可以通过它修改大型柱状增长图。你还可以改变属性生成动画，比如stroke breadth,load opacity, load coloring等等。
Chartist.js 是一个简单的容易被接受的图标库，它是通过SVG绘制的。Chartist的宗旨是提供一个简单的，轻量级的，非侵入式的图表库。你需要提供一些javascript配置对象做一些自定义配置，要不然它会使用默认的配置，即已经默认是排序过后的。
Chartist是通过 inline-SVG绘制的，所以它对DOM操作影响很小，相对于它提供的功能来说。而且意味着Chartist不会提供个人控制、水印、行为等等一些你能够通过简单的HTML, JavaScript and CSS实现的。
以上所述就是本文给大家推荐的SVG动画的javascript库了，希望能够对大家学习javascript有所帮助。
相关文章
在我们学习或者工作中，或多或少会遇到过隐式类型转换，但是为什么会有这种现象？这种现象背后的原理是什么？可能是大多数人没有思考过的，本文就来和大家一起浅析一下2023-03-03
当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click2012-07-07
基于JS实现将JSON数据转换为TypeScript类型声明的工具
在TypeScript 项目中，我们经常需要使用声明一系列的ts类型。然而，手动写的效率实在太低，本文就实现一个工具将 JSON 数据转换为 TypeScript 类型定义，需要的可以参考一下2023-04-04
这篇文章主要为大家整理了关于Bootstrap列表组的慕课笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
下面小编就为大家带来一篇js中遍历对象的属性和值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
JavaScript原生对象之String对象的属性和方法详解
这篇文章主要介绍了JavaScript原生对象之String对象的属性和方法详解,本文讲解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法属性,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了Javascript实现元素选择器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
由于WEBIM处在独立页面,所以如果多次点击就会出现多个页面,本文将介绍详细的解决方法，需要了解的朋友可以参考下2012-12-12
动态生成的IFRAME，设置SRC时的，不同位置带来的影响。 以下所说的是在IE7下运行的。IE6下也是同样。 在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。 先看例子：2008-04-04
近期需要使用echarts关系图,这里给大家总结下,这篇文章主要给大家介绍了关于Echarts graph关系图使用的相关资料,文中给出了详细的代码介绍,需要的朋友可以参考下2024-01-01
最新评论