今天在codepen看到一个效果如下：

觉得十分有趣，作者是SVG结合canvas完成的，里面所有的路径部分是SVG完成的，但动画效果是canvas完成的。canvas能看懂一丢丢，能改一丢丢，但不会写（硬伤~），那就用最熟悉的SVG+CSS3看看能不能完成咯。

1.路径变形动画

先来个拆分，动画是两部分的结合，流动的描边和变形动画。为了和原作者有点区别，我准备做四个形状的动画，哦吼吼，升级版！在绘制时恍恍惚惚有种儿童简笔画的感觉……

基础图形变形过程

如果没有任何的变形动画基础，请先移步这三篇文章，了解一下变形动画的实现原理和实操方法（自己推自己的文章，我是该有多脸皮厚呀）：

https://juejin.im/post/591272f6da2f6000536f1aec
https://juejin.im/post/591514b2570c3500692d7235
https://juejin.im/post/59195c22a0bb9f005ff711b2

在AI中如何处理只在这里简单概括：
圆形：闭合路径剪开（顶点），转成开放路径，轻微拖动除起始锚点外的三个锚点，消除导出路径<path>中小s的存在，使路径变成标准的小c开头的路径。
三角形：闭合路径剪开（顶点），转成开放路径，轻微拖动除起始锚点外的两个锚点，使路径变成标准的小c开头的路径。（没错，我就是传说中的复读机君，我有什么办法，处理方法满满的都是套路啊）
矩形：闭合路径剪开（左下角），转成开放路径，轻微拖动除起始锚点外的两个锚点，使路径变成标准的小c开头的路径。（关于剪开路径的位置？这个嘛？没有为什么，我就想看看有什么不同效果啦）
五边形：闭合路径剪开（左下角）……（此处省略重复步骤，巴拉巴拉……）

2.多边形<polygon>转成<path>小c标准路径

突然插入这么一段小直播，是我发现在这个动画效果中，因为除了圆形，剩下的都是多边形，其实<polygon points="X1,Y1 X2,Y2 …… "/>这个绘制方法是很容易理解的，都是多边形顶点对应的绝对坐标，但因为有圆形存在，我们不得已才要把很简单的事情复杂化，然后在AI里手柄拖来拖去的真的好烦的好嘛，而且有可能导出的SVG还有大C开头的，反反复复，不胜其烦，那么有没有一种简单的方法可以把这种多边形路径直接转成小c绘制的标准路径的方法呢？有！
我以五边形为例，图示一下：

多边形与路径的转换

当然了，如果你懒得看原理，觉得很烦的话，就可以直接看解决方法，即c0,0 0,0 X(终点-起点),Y(终点-起点)。坐标点可以在AI里面直接获得，但计算公式还是少不了的。
所以，最终我的五边形成功的转换成了<path d="MX1,Y1 c0,0 0,0 X2-X1,Y2-Y1 c0,0 0,0 X3-X2,Y3-Y2 c0,0 0,0 X4-X3,Y4-Y3 c0,0 0,0 X5-X4,Y5-Y4 c0,0 0,0 X5-X1,Y5-Y1">路径表示方法，这里说明一下，如果剪开路径时不错开，最后一段路径是大C对应的绝对路径绘制方法，也就是CX5,Y5 X1,Y1 X1,Y1。

3.添加虚拟曲线

做完上面的工作仍然没有算完，对于变形动画而言，曲线的数量要相等才能完成，而我们的这四个图形，曲线数量分别是：圆→4，三角形→3，矩形→4，五边形→5，还好，没有选择太复杂的图形，那就给圆和矩形加1个虚拟曲线，给三角形加两个虚拟曲线，大家全部补齐成5个咯。（什么？你问我什么是虚拟曲线？打滚……上面的文章链接你没看，没看）
好啦，加过虚拟曲线，处理过的四个图形的<path>路径已经统一起来了，这样就可以套用我们的变形动画了。
来看一下变形动画的定义部分:

@keyframes deform{
0% {d:path('');} /*圆形路径*/
25% {d:path('');}/*三角形路径*/
50% {d:path('');}/*矩形路径*/
75% {d:path('');}/*五边形路径*/
100%
}
#deform {animation:deform 3s ease infinite};

然后我们的<path>引用这个动画就好了。就得到了变形动画：

单纯的变形动画

嗯，只是动了，但起来看上去不是很炫，没事，go on。

4.流光溢彩动效

关于这种不同颜色沿着描边路径流动的效果，我起了个名字叫“流光溢彩”。先拿五边形为例，看一下单色流动动画的设置，之所以没有拿圆形举例，是怕你想用旋转来实现啊：

<style>
@keyframes animate {
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:1356} /*五边形的周长*/
}

#animate{
animation:animate 2s linear infinite;
stroke-dasharray:678;  /*五边形1/2周长*/
}
</style>

得到效果如下：

单色描边动画

原理我简单解释一下，dashoffset为虚线偏移位置，dasharray定义了虚线的样式，只有一个值的话，则表示线长和间距等长，如下图示：

dasharray和dashoffset

好了，逐步推进，实现了单色流动，那双色怎么办？要再定义一个动态单色流动动画，然后进行叠加么，哎，我们这种懒人总是想方设法偷懒，因为我只要给这个单色流动的动效的底层加一个相同路径实色描边，就得到了这种效果:

双色描边动画

多色拼接原理

当然了，针对我们四个颜色，如果把相同的五边形路径重复四遍是惨绝人寰的，这里我们可以用<defs>元素或者<symbol>元素来定义需要重复的路径，然后用<use>元素来引用，推荐<symbol>，是由于<symbol>支持的属性更多，虽然在这个案例中无法体现出来，但养成好习惯，需要用<defs>的都可以用<symbol>来代替。这里因为dasharray的定义相同，所以统一到了路径内联属性里。
来看看代码部分：

<svg>
<style>
@keyframes animate1 {
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:1356}/*1356是路径的长度*/
}
@keyframes animate2 {
0%{stroke-dashoffset:339}/*定义了四个颜色，所以339是1/4周长*/
100%{stroke-dashoffset:1695}/*需要dashoffset变化值是一个周长来实现首尾相接*/
}
@keyframes animate3 {
0%{stroke-dashoffset:678}
100%{stroke-dashoffset:2034}
}
@keyframes animate4 {
0%{stroke-dashoffset:1017}
100%{stroke-dashoffset:2373}
}
#animate1 {
animation:animate1 2s linear infinite;
stroke:#ffb850;
}
#animate2 {
animation:animate2 2s linear infinite;
stroke:#ff7e5d;
}
#animate3 {
animation:animate3 2s linear infinite;
stroke:#8cd2a4;
}
#animate4 {
animation:animate4 2s linear infinite;
stroke:#62adea;
} 
</style>
<symbol><!--用symbol来定义需要重复引用的相同路径-->
<path id="pentagon" d="" stroke-width="10" stroke-dasharray="339 1017" fill="none"/></symbol>
<use xlink:href="#pentagon" id="animate1"/>
<use xlink:href="#pentagon" id="animate2"/>  
<use xlink:href="#pentagon" id="animate3"/>
<use xlink:href="#pentagon" id="animate4"/>  
</svg>

还算是很清晰的，而且如果用五个颜色，那就初始的dashoffset递增1/5周长，然后改一下dasharray为线长1/5 间距4/5 就可以了。

得到的效果如下：

四种颜色流动

5.双效合一

独立设计形状之间的变形动画和同一形状的不同颜色描边的动画都已经实现了，现在要做的就是把这两个效果合在一起了。在我们上面实现“流光溢彩”动效时把需要重复定义的路径用<symbol>进行了定义，定义的<path>的id值不是被赋予用了某个属性，而是作为标签存在，便于被<use xlink:href="#">反复引用，但当这个效果运用到变形动画中时，会发现<path>路径的id对应的是绘制路径的变形动画，那我们来换个思路，把这四个路径当做独立的存在，每个路径在进行变形动画的同时也在进行描边动画，此时我们的SVG定义的变形动画deform的关键帧不变，四个不同颜色的描边动画的定义animate1-4的关键帧也不变，需要变化的是动画属性：

#animate1 {
animation:deform  4s ease  infinite, animate1 2s linear infinite;
stroke:#ffb850;
}
#animate2 {
animation:deform  4s ease  infinite, animate2 2s linear infinite;
stroke:#ff7e5d;
}
#animate3 {
animation:deform  4s ease  infinite, animate3 2s linear infinite;
stroke:#8cd2a4;
}
#animate4 {
animation:deform  4s ease  infinite, animate4 2s linear infinite;
stroke:#62adea;
} 

即每个路径的动画属性同时赋予了两种动效，一个是变形的deform动画，一个是对应的描边动画。
为了尽可能的优化代码，我把相同定义的<path>属性统一定义到了CSS里面，如下：

path{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke-dasharray:339 1017;fill:none}

这样，我们的对应的四条路径的代码就简化成了如下：

<path id="animate1" />
<path id="animate2" />
<path id="animate3"/>
<path id="animate4"/>

这里如果有好奇的小伙伴可能会提出疑问，我们的描边动画在定义时用的周长是五边形的周长，但这个动画里的几个形状并不是等长，肿么办？
其实不要理会，只要选一个最长的路径进行定义就可以了。因为我们的路径是一层层叠加的，如果图形的周长比定义时选择的短，出现的结果就是最顶层的路径会略长一些，但对于这类动画而言，很难看出差别。

双效合一动画

重新定义虚线样式后的效果

即使得到了相要的动画效果，但积极努力追求上进的我却依然不满意啊，因为我想让变形动画在完成一个变形之后略作停留之后再进行下一个变换。而不是像现在这种唰唰唰一气呵成，于是乎，我改进了一下，得到了下面这种效果：

修改关键帧之后动画效果

我是用了偷懒的效果，把变形动画的关键帧改成了下面这种：

@keyframes deform{
0% {d:path('')} /*圆形路径*/
15% {d:path('')} /*三角形路径*/
25% {d:path('')} /*三角形路径*/
40% {d:path('')} /*矩形形路径*/
50% {d:path('')} /*矩形形路径*/
65% {d:path('')} /*五边形路径*/
75%{d:path('')} /*五边形路径*/
90% {d:path('')} /*圆形路径*/
100% {d:path('')} /*圆形路径*/
}

嗯，满意。
直接附上codepen的地址，
https://codepen.io/yangyangbeiqiu/pen/ayNGdW
小伙伴们自行查看咯。