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

Vivus

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

Bonsai

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

Velocity

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

Raphael

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

Snap

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

Lazy Line Painter

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

SVG.js

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

Walkway

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

Progressbar.js

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

Chartlist.js

Chartist.js is often a simple receptive charting library constructed with SVG. The Chartist’s aim would be to offer a simple, lightweight and non-intrusive library to help receptive create charts on the internet site. It’s vital that you recognize that several objectives regarding Chartist.js would be to depend upon standards instead of supplying any personal treatment for the condition and that is has already been sorted by the typical.

Chartist works with inline-SVG and as a consequence harnesses the power with the DOM to provide areas of its features. This also means that Chartist seriously isn’t supplying its personal function controlling, brands, behaviors and everything else that may you have to be completed with simple HTML, JavaScript and CSS.

最新文章

  1. 9Spring进阶----青软S2SH(笔记)
  2. cookie小析
  3. Netty系列之Netty高性能之道
  4. log4net一些配置说明
  5. Java迭代 : Iterator和Iterable接口
  6. iOS开发XCODE5 SVN配置 使用办法
  7. namenode无法启动(namenode格式化失败)
  8. 自定义按照index和key访问的List
  9. java中方法的参数传递机制
  10. NPOI 2.0 教程
  11. RxJava操作符(04-过滤操作)
  12. jQuery学习之旅 Item8 DOM事件操作
  13. sql server 任务调度与CPU
  14. jmeter-PC注册遇到的问题与解决
  15. 十四、使用framebuffer填充纯色
  16. for 循环增强
  17. Nginx 决策浏览器缓存是否有效
  18. Oracle分析函数-nulls first/nulls last
  19. ASP.NET MVC + EF 更新的几种方式
  20. 使用x11vnc作为vncserver端

热门文章

  1. 框架源码系列九:依赖注入DI、三种Bean配置方式的注册和实例化过程
  2. Linux JDK Tomcat Nginx MariaDB 安装,Nginx 多域名转发配置
  3. 高并发分布式系统中生成全局唯一(订单号)Id
  4. [Cassandra] Mutation of <x> bytes is too large for the maxiumum size of <y>
  5. 企业SaaS模式的优缺点
  6. [git] 能在关键时刻救命的git指令
  7. 严重: A child container failed during start的问题解决方法
  8. 微信小程序开发笔记01
  9. Python学习之旅(三十六)
  10. 如何使用onclick方式添加多个事件回调函数