设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

10个非常有用的SVG动画的JavaScript库

2015-2-14 23:59| 发布者: joejoe0332| 查看: 4764| 评论: 0|原作者: 21paradox-, 天liang好个qiu|来自: oschina

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


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


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


Chartlist.js

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

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


酷毙

雷人
1

鲜花

鸡蛋

漂亮

刚表态过的朋友 (1 人)

  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部