年终盘点:SVG动画开发工具大全清单

8,033 阅读3分钟
原文链接: svgtrick.com

最近,我们一直在搜寻一些SVG动画开发的工具来提高SVG动画开发的效率。在web中,动画无疑是提高用户体验的一个重要的手段,而SVG动画正式诸多动画技术中一颗璀璨明珠。

特别是在移动端上,SVG变得越来越流行,SVG可以适配任何分辨率的屏幕高清显示,SVG动画在移动端上比其它的动画技术也有着一定的优势,还可以还可以完美的适配任何尺寸的屏幕。不过,SVG动画开发也需要编码来实现,碰到一些复杂动画的时候,也还是要花点时间的。不过,现在又很多的开源SVG动画工具可以大大的帮我们提高我们的SVG动画开发效率。

下面就来推荐一些SVG动画开发方面的工具和JavaScript的库,可以使SVG动画开发更加简单和高效。

Svgator

这是一个在线的SVG动画开发工具,它可以直接倒入SVG文件,进行动画开发,然后导出动画代码。它是一个可视化的动画工具,不需要编写代码,只需要把元素添加到时间轴上,然后改变元素的相关属性就可以做动画了,要是你有flash或者是AE的开发经验,那更加熟悉了。

下载地址

Shape Shifter SVG Animation Tool

Shape Shifter SVG Animation Tool是一个用来创建icon动画的工具。

工具地址

Anigen

Anigen是一个在线的动画工具。

地址

SVG Circus

SVG Circus主要是一个用来做SVG加载动画用的。

Snap SVG

Snap SVG就相当于JavaScript中的jQuery,把SVG的属性和方法封装起来,使SVG使用起来更加方便高效,这感觉就像当初jQuery刚出来的那样,一切就是如此的简单。

地址

Parallax SVG Animation Tools

这是一个使用python来创建视差滚动SVG动画的工具。

地址

SVG.js

地址

Vivus

Vivus是一个轻量级的专门用来做SVG动画的库,主要是做描边动画的库。

Bonsai JS

地址

Walkway JS

这也是一个专注做SVG描边动画的库

Snap SVG Animator

这是一个基于Animate CC的插件,用来导出SVG动画,使用的就是上面介绍的Snap.svg这个JavaScript库。

地址

Lazy Line Painter

基于Jquery的SVG描边动画库。

地址

Velocity JS

Velocity是一个动画引擎,类似jQuery的$.animate()方法。不过,它不依赖jQuery。它的主打的就是高性能动画库,当然也支持SVG动画。

地址

jQuery Draw SVG

地址

segment

地址

SVG Path Painter

地址

macSVG

Mac上专门用来设计矢量做SVG动画的软件。

地址

Adobe Edge Animate

Adobe出品的一个专门用来做web动画的工具,不过现在好像是主推Animate CC这个工具了。

地址

本文主要是从Amazing SVG Animation Tools And Libraries翻译而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!