3个svg格式图形动画工具推荐

水域图

最近项目涉及到一个简单的在矢量地图上附加水域流向小动画，这对于很多人前端研发人员来说并不难的，可是目前就没有条件没人会。我也只好去百度上挖呀挖就挖出了3个小工具。虽然他们目前功能还很简单，但是对于不会的人来说还是算能用。

（一）Inline SVG Drawing Animation（点击这里访问）

https://maxwellito.github.io/vivus-instant/

这个工具只有一个很简单的功能，就是路径描边动画。输出也是SVG格式文件菜包的最爱。

操作非常简单从浏览器选中一个SVG文件拖入浏览器即可，动画都是自动执行的。

默认模式

1、顶部选项卡基本忽略切换也没有任何实际意义；

2、Animation type：动画类型（有3种类型，感觉差异很小或许是与我发的图有关用默认就好）

3、Delayin ms：动画开始的时间（默认是0立即开始，需要延迟开始就设置需要的秒数）

4、Durationin ms：动画完成时长（就是从开始到结束的时间跨度单位毫秒）

5、Path timing function：路径运行方式（感觉没啥区别）

6、Loop：循环（默认是关闭的，打才有循环功能）

循环参数

7、Start delayin ms：重新开始间隔时间（单位毫秒）

8、End pausein ms：结束停止时间（根据需要设置）

9、Fade durationin ms：动画消失重新开始所需要的时间（根据需要设置）

最后下载下来就好了

（二）svgartista（点击这里访问）

https://svgartista.net/

这个工具动画功能更多一点，但是又没有循环控制，定制完动画效果后只会播放一遍，可能动手能力强的妖孽更喜欢这个工具，他输出的事代码，可以继续编辑的，研究一下css3动画属性就可以控制动画的循环播放了。

添加SVG文件

首先把需要添加动画的svg从左上角按钮传入工具。

设置动画属性

Elements class：定义CSS动画类名称

Background color：场景背景颜色设置（方便查看动画效果）

Animation type：动画类型（不用理解2种都可以用默认的就好）

动画设置面板

他可以分别给描边与填充元素做不同的动画，属性也就差不多。

描边元素

Animation duration：动画时长

Stagger step：每一个动画元素间隔时长

Animation delay：下一个动画元素开始时间

Animation easing：动画执行的顺序（正向或反向）

填充元素

前三个都相同

Animation easing：动画的类型有好多种可以都试试看哪种最合适选哪种。

动画输出按钮

DRAW（忽略）

PLAY（执行动画）

GET CODE（输出动画代码）

输出代码

SVG CODE （copy到body部分需要显示的位置）

TRANSITION CODE（copy到CSS配置文件中）

额外的属性就需要自行去代码里修改了。

（三）Progress bar.js（点击这里访问）

http://kimmobrunfeldt.github.io/progressbar.js/

这是是带JS控制的功能更强大一些（菜包完全不会用了）但是也可以仰望一下高端玩家

同样是SVG描边动画功能的工具官网上，使用说明，使用案例一应俱全动手能力强的妖孽可自行研究使用。

github里边有整套源码可以下载到本地慢慢研究。