10 个非常有用的 SVG 动画的 JavaScript 库 已翻译 100%

oschina 投递于 2015/02/12 07:58 (共 6 段, 翻译完成于 02-13)
阅读 13416
收藏 304
4
加载中

SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级。

Vivus

Vivus 是一个动画js类库,它能够给SVG图像显示出被画出来的过程。Vivus是没有其他类库依赖的(比如jQuery)。你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的SVG部分就行。同时通过指定一些配置,它能够在页面加载后直接显示动画效果。

Virus-svg

21paradox-
21paradox-
翻译于 2015/02/12 09:41
1

Bonsai

Bonsai 是一个功能丰富的 JS 类库,你能够用它来画和 animate 动态内容在网站上。这些内容包括了 HTML5 video、变化的 Canvas 和 SVG。通过 Bonsai 框架,你能画一个简单的矩形、甚至一段矩形,如果你喜欢甚至可以画一个丰富的多人卡通游戏进去。

Bonsai

Velocity

Velocity 是一个 JS 类库,它是用来做频繁动画用的。Velocity 的 js 动画“速度”是非常快的。它比JQuery 快,甚至比 CSS 动画还要快。Velocity 的 API 和 $.fn.animate 很像,都是通过$()来操作。velocity()是另一种方法,相比 $().animate()。总而言之,你应该使用一致的animate效果,包括 fadeIn 和 fadeOut 方法(译者:Velocity 提供了 fadeIn 和 fadeOut 方法)。

Velocity

21paradox-
21paradox-
翻译于 2015/02/12 11:14
1

Raphael

RaphaelJS 也通常是用来在网页上画SVG图和动画的。它兼容各种windows浏览器一直到IE6,因为如此,Raphael成为了市面上最受信赖的js(svg)类库。有了它,你可以制作分析图表、地图、游戏就像在厨房做饭一样。

Raphael

Snap

SnapSVG 是另一个知名 JS 类库,它是由 Dmitry Baranovskiy 开发的(Raphael 同样也是)。同样它也是 Adobe Web Software Group 来维护。和 Raphael 不同的是,它只提供了 ie 最新版支持。这使得 SnapSVG 在体积上小了许多(相比 Raphel)以实现相同的功能(比如 trim)和支持最新的功能。

Snap

21paradox-
21paradox-
翻译于 2015/02/12 15:30
1

Lazy Line Painter

Laid back Range Painter 是一个 jQuery 插件,通常被用来作绘制图集,有点像 Vivus。通常你会吐槽的是它的也就只有这么一个特殊的功能。让我来解释下,如果你是用Illustrator 或者Inkscape制作的SVG图像,而且SVG图像没有任何颜色上的变化,仅仅是轨迹的变化,可以用它。

Lazy Line Painter

SVG.js

SVG.js 是一个轻量级的操作和动画 SVG 类库。你能够操作变化方向、位置和颜色。这还没完,你甚至可以自己实现插件等一些其他功能。这个实例可以attach一些插件,比如svg.filter.js,他可以为你的图片实现 Gaussian blur, desaturase, compare, sepia 等等功能。

SVG

21paradox-
21paradox-
翻译于 2015/02/12 17:48
1

Walkway

Walkway 支持3种方式, pathline 和 polyline来画的svg线。它提供了一个很好的例子,绘制了一个PlayStation 的集合动画。

Walkway

Progressbar.js

ProgressBar.js 是一个可爱的和易于接受的增长曲线图用来绘制卡通SVG线条。有了它,各种形状都可以用作增长曲线。它集成了一些实用的形状如Range,Circle和Block,你甚至可以自行开发一个增长图通过Illustrator或者其他的矢量图绘制工具。 ProgressBar.js 是轻量级,MIT许可的而且支持IE9+。你可以通过它修改大型柱状增长图。你还可以改变属性生成动画,比如stroke breadthload opacity, load coloring等等。

Progressbar.js

21paradox-
21paradox-
翻译于 2015/02/13 00:08
1

Chartlist.js

Chartist.js 是一个简单的容易被接受的图标库,它是通过SVG绘制的。Chartist的宗旨是提供一个简单的,轻量级的,非侵入式的图表库。你需要提供一些javascript配置对象做一些自定义配置,要不然它会使用默认的配置,即已经默认是排序过后的。

Chartist是通过 inline-SVG绘制的,所以它对DOM操作影响很小,相对于它提供的功能来说。而且意味着Chartist不会提供个人控制、水印、行为等等一些你能够通过简单的HTML, JavaScript and CSS实现的。

21paradox-
21paradox-
翻译于 2015/02/13 09:20
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(12)

alazyer
alazyer

引用来自“Raphael_goh”的评论

竟然没d3
严重同意
s
seeit
see it www.xuetub.com
窝牛4396
窝牛4396
'data:image/gif;base64,' + 'R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC