用SVG实现复杂的动画

关于html动画，一般来说我们有这么几种实现方式：
1，用css的transform结合transition来实现位移、旋转、缩放等；
2，用css的animation，通过@keyframe来实现更个性化的分帧动画；
3，用js操作dom来实现更加复杂的或特殊的动画；
4，用canvas标签然后通过js来绘制动画，功能强大但操作可能会很复杂；

今天，我想介绍另一种动画实现方式，svg。通过svg，我们可以以非常简单的方式实现复杂的动画。下面是一个简单的示例：

例：让一个圆沿着特定路径移动

1，内联路径

如上所示，我们在svg标签中，添加了一个circle标签，在页面绘制了一个半径为41的圆，在circle标签中嵌套了一个<animateMotion>标签，animateMotion标签包含两个属性path 和 dur。下面我分别来解释一下这些标签和属性的作用：
.  animateMotion标签：这就是svg动画的必要因素，它通过定义一组路径及动作时间等属性来实现元素的动画；
.  path属性：在animateMotion标签的path属性规定了动画的动作路径；上例通过path规定了一条直线路径；
.  dur属性：在animateMotion标签的dur属性规定了动画的动作时间；  上例规定了动画执行时间为5秒；

2，指向特定外部对象路径

如此，我们便让circle在页面动了起来，我们会看到页面刷新后哦一个圆圈在页面向左移动一定距离后，回到了原来的位置；
但有时候我们有这样的需求，我们希望元素的动画路径是可见的，比如元素沿着一个可见的不规则线条运动；

例：小红球沿着不规则图形线路运动 例：上图示例的实现代码

我们可以看到，我们新增了一个path标签，此时的path标签绘制了一个不规则图形；而animateMotion标签中的path属性移除了，多了一个<mpath>子标签。这里mpath标签将circle的animate路径通过xlink:href属性指向了id＝“path”的path标签，也就规定了circle的运动路径是path标签绘制的路径；由此，我们便实现了小球沿着不规则路线运动了！是不是很简单？

如果你够细心，会发现animateMotion标签中新增了一个属性-->repeatCount；我们前面说过，动画结束后，运动的元素会停止运动并回到最初的位置。聪明的你肯定会想到我们新增的这个属性repeatCount便是让元素的动画一直循环的吧！（animateMotion还有其他一些属性也很有用处，我就不一一列举了）

想想如果用js去现实这样一个动画，还是很复杂的，需要通过坐标计算得出运动轨迹点然后循环去改变红色球的位置；但是svg几行html代码就搞定了，有没有很方便？
附上我自己的一个案例网址：圆圈在页面不规则漂浮动画。页面底部的圆圈不规则漂浮动画便是利用svg的路径动画实现的，相对于js去实现这类型动画，在表现上会平滑柔和许多，真正实现了不规则的漂浮，而且代码也简单的多！

3，如何得到复杂的path路径

聪明如你我，在最初看到path路径的参数时，肯定都是一脸懵逼的，心中默念着‘这他妈是什么鬼……’；今天我也不打算跟大家去讲解path路径到底怎么写，怎么理解，因为我至今还是不明白（笑cry）。大家感兴趣可以自行去找资料学习这些高等函数……

那么，我们如何才能得到我们想要的路径呢？很简单。
1，通过可以导出svg图的绘图工具制作路径图并导出，例如AI，sketch等等……然后将导出的svg通过浏览器打开，打开控制台便可以找到图形的path信息，复制便好；
2，推荐一个在线生成svg图形的利器：在线生成svg图形。使用非常简单，各种图形模版也有，也可以手动绘制；然后导出为svg就好，使用方法同上；