推荐10 款 SVG 动画的 JavaScript 库


Posted in Javascript onMarch 24, 2015

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

Vivus

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

推荐10 款 SVG 动画的 JavaScript 库

Bonsai

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

推荐10 款 SVG 动画的 JavaScript 库

Velocity

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

推荐10 款 SVG 动画的 JavaScript 库

Raphael

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

推荐10 款 SVG 动画的 JavaScript 库

Snap

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

推荐10 款 SVG 动画的 JavaScript 库

Lazy Line Painter

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

推荐10 款 SVG 动画的 JavaScript 库

SVG.js

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

推荐10 款 SVG 动画的 JavaScript 库

Walkway

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

推荐10 款 SVG 动画的 JavaScript 库

Progressbar.js

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

推荐10 款 SVG 动画的 JavaScript 库

Chartlist.js

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

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

以上所述就是本文给大家推荐的SVG动画的javascript库了,希望能够对大家学习javascript有所帮助。

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 #Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 #Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 #Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 #Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 #Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 #Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
自动更新作用
2006/10/08 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
python+pygame简单画板实现代码实例
2017/12/13 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python基于win32api实现键盘输入
2020/12/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
入党积极分子思想汇报
2014/01/02 职场文书
童装店创业计划书
2014/01/09 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
职工运动会邀请函
2014/01/19 职场文书
银行简历自我评价
2014/02/11 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
出生证明公证书
2014/04/09 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
推荐信格式范文
2014/05/09 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
社区植树节活动总结
2015/02/06 职场文书