推荐8个实现SVG动画的JavaScript库

SVG 是一种分辨率无关的图形(矢量图形)。这意味着它在任何类型的屏幕都不会遭受任何质量损失。除此之外,你可以让 SVG 灵活现一些动画效果。这篇文章就给大家推荐8个实现 SVG 动画的 JavaScript 库。

1.Walkway

Walkway支持三种类型的元素,路径,线和折线用于绘制SVG lines.Here是显示在PlayStation4控制台线路动画从多边形的一个例子。

在线预览

2.Bonsai

Bonsai是一个强大的JavaScript库,它允许您绘制,变形以及动画的网页pages.It图形元素同时支持HTML5图形型帆布和SVG.With盆景,你可以建立一个简单的矩形或圆形,或如果你喜欢,一全面multiplayeranimated喜欢这个游戏one.You可以使用轨道感受到盆景是如何工作的现场操作或检查出几个这些令人印象深刻的例子,以从中汲取灵感。

在线预览

3.Velocity

Velocity是一个JavaScript库专为快速animations.Velocity的速度时,渲染动画是令人难以置信的fast.It优于jQuery的,甚至CSS,在comparison.Velocity的API的工作原理类似于jQuery的动画,除了它使用的关键字别名$.velocity(),而不是的$.animate()。除此之外,您可以使用完全相同的动漫关键字,如淡入和淡出。

在线预览

4.Raphael

RaphaelJS是一个库,可以绘制以及对网络pages.It动画矢量图形SVG支持多种浏览器一路下跌到IE6,这几乎使拉斐尔最可靠的JavaScript库在niche.With RaphaelJS,你可以建立交互式的分析图表,世界地图,以及游戏互动类似的反恐精英。

在线预览

5.Snap

SnapSVG对于SVG动画拉斐尔开发,梅德Baranovskiy从地面up.Unlike拉斐尔虽然SnapSVG意味着只有最新的browsers.That发展,伴随着从Adobe Web平台团队的另一个流行的JavaScript库允许库比显著小拉斐尔和支持SVG的功能,如裁剪和掩蔽。

在线预览

6.Lazy Line Painter

Lazy Line Painter是一个jQuery插件,SVG动画路径动画绘图程序,类似于Vivus.The坏消息是这个插件不仅可以非常具体thing.Hence,当你从像Illustrator或Inkscape的应用程序导入SVG,确保没有填充颜色留在你的SVG,只是路径。

在线预览

7.SVG.Js

SVG.js对于操纵和动画SVG.With这个库一个轻量级的库,你就可以以动画的SVG element.It内的大小,位置或颜色不仅虽然动画;您还可以申请额外的插件添加额外的functionalities.This示例使用svg.filter.js插件应用滤镜像高斯模糊,饱和度,对比度,棕褐色etc.to图像。

在线预览

8.Vivus

Vivus是一个JavaScript库,让您的SVG的是外观drawn.Vivus开箱,而不需要任何依赖关系(e.g.jQuery).Simply包括在HTML的.js文件,并指定要进行动画处理的SVG元素,以及一些预设选项来启动动画的时候了。

具有在该SVG200 millisecond.Each元素SVG-元件ID上面将动画我的SVG元素将被吸引1之后的时限内的其他。

在线预览

未经允许不得转载:爱前端网 » 推荐8个实现SVG动画的JavaScript库

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏