最近项目涉及到一个简单的在矢量地图上附加水域流向小动画，这对于很多人前端研发人员来说并不难的，可是目前就没有条件没人会。我也只好去百度上挖呀挖就挖出了3个小工具。虽然他们目前功能还很简单，但是对于不会的人来说还是算能用。
（一）Inline SVG Drawing Animation（点击这里访问）
这个工具只有一个很简单的功能，就是路径描边动画。输出也是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：动画消失重新开始所需要的时间（根据需要设置）
这个工具动画功能更多一点，但是又没有循环控制，定制完动画效果后只会播放一遍，可能动手能力强的妖孽更喜欢这个工具，他输出的事代码，可以继续编辑的，研究一下css3动画属性就可以控制动画的循环播放了。
首先把需要添加动画的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配置文件中）
额外的属性就需要自行去代码里修改了。
这是是带JS控制的功能更强大一些（菜包完全不会用了）但是也可以仰望一下高端玩家
同样是SVG描边动画功能的工具官网上，使用说明，使用案例一应俱全动手能力强的妖孽可自行研究使用。
