网上炫酷的svg动画越来越多，里面充满了复杂的path路径以及各种繁琐的运动轨迹，很多人看到这些令人咂舌的效果时会望而却步，无从下手。实际抛开那些细微调整需要花点时间，好多步骤都是有工具可以生成的。

别人的效果

这次我们要从最基础的来说起，可以当做是图文教程：

1.图片转SVG

制作svg的工具有很多，网站上很多，但是那些工具都是需要自己用钢笔工具一点一点抠路径。这类工具画个不规则路径还是可以的，但是稍微发散思维，想要更灵活是远远不够的。

在线svg生成器

工欲善其事，必先利其器。所以我们首选Adobe的Illustrator俗称AI软件。

创造欲望，需要在网上找到一张“扁平化”风格的图片。

扁平化

我们将这张图片拖拽到AI软件当中来。

第一步：图片的“属性”里面选择“图像描摹”参数寻找最合适的（实际上就是分析图像中色块的边缘）

图像描摹

第二步：点击扩展，扩展之后，整个画面有颜色区分的地方都会被生成一个路径，成为可以单独操作的色块

扩展 描摹后扩展后

可以随意操控每一个色块，然后去掉自己不想要的元素。

删除无用元素

第三步：文件——脚本——将文档存储为SVG

导出svg 导出后的文件 svg内容

到此为止，我们将一张图片转为了svg。图片像素越高，图片中色块轮廓越明显，最后生成的路径越清晰。

我们将svg的代码复制到html文档中，打开页面看效果    

复制于此

每一个元素都有了自己的svg标签

效果

2.为元素添加动画效果

生成svg之后，就是需要耐心并且富有创意的给页面中的小元素添加各种各样的动画效果了。

如果是path标签添加动画，我们可以写成双标签并且添加动画：

单标签 改为双标签+动画

元素通过path做不规则运动的方法：

通过修改path路径的值，可以做出各种不规则的曲线运动

<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />

元素旋转缩放等方法：

将这个方法放到一个<g>标签或者<path>标签中，然后这组动画就可以随着动起来了。

<animateTransform 

                attributeType="XML" 

                attributeName="transform" 

                begin="0s" 

                dur="5s" 

                type="rotate" 

                from="0 1222.228 410" 

                to="360 1222.228 410" 

                repeatCount="indefinite" 

                />

旋转

最终效果如图：

为了出图文教程，所以只加了简单的两个动效。
有欲望才会有驱动力，发挥想象力，动起手来吧。

效果图（规则）

只需要修改animateMotion标签的path值就可以改为不规则运动

效果图（不规则）