【svg】svg动画
如果你之前没有接触过svg，可以看下这个简略图： https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a
最近在看svg，发现svg和css animation结合起来，能够做一些很好玩儿的动画效果。
比如看这个：
其实这个怎么做的呢？我们继续往下看
我们知道stroke为描边，可以暂且理解为border，关键的是和描边相关的有一个特殊的属性stroke-dasharray, 这个属性也可以理解为设置描边为dash模式，描边为虚线，虚线的单位长度和单位空白长度通过这个属性设置。
比如我们绘制一条直线:
<svg width="300" height="300">
<line x1="0" y1="300" x2="300" y2="300" stroke="skyblue" stroke-width="5px"></line>
</svg>然后长下面这样
然后给line增加一个属性： stroke-dasharray="40 10" 表示设置描边为的实线和空白部分为40，10 然后一直重复。会长成下面这样，40px为一个实线单位的长度，10px为一个空白单位的长度。
我们已经知道了 stroke-dasharray可以设置描边的虚线单位的长度，我们这样设置，stroke-dasharray="300" , 实际上会默认增加一个空白的长度，实际上是这样 stroke-dasharray="300, 300" 这表明描边的实线单位和空白单位的长度为300 和300， 实线单位实际上已经占据了整条线的长度。 我们增加一个属性 stroke-dashoffset, 这个属性mdn也没说清楚，实际上就是dash模式，也就是虚线描边模式的偏移量,是怎么偏移的呢，是从path的起点偏移，如果为正，就是往起点的前面，也就是我们看不到的区域。我们设置一个stroke-dashoffset= "150".现在代码是这样：
<line x1="0" y1="300" x2="300" y2="300" stroke="skyblue" stroke-width="5px" stroke-dasharray="300" stroke-dashoffset="150" id="kevin"></line>
效果是这样:
dasharray的 第一个300，也就是实线部分往左偏移了150px，起点以前的全部看不见了。我们可以利用这个stroke-dashoffset属性和css animation结合起来。 因为偏移量可以控制path的显示进度，只要偏移量>= path的长度即可。
我们为将这个偏移量和animation结合起来，代码如下：
<svg width="300" height="300">
<line x1="0" y1="300" x2="300" y2="300" stroke="skyblue" id="Line"></line>
</svg>
<style>
#Line {
stroke-dasharray: 300px;
animation: drawwww 1s linear forwards;
stroke-width: 5px;
}
@keyframes drawwww {
from{
stroke-dashoffset: 300px;
}
to {
stroke-dashoffset: 0;
}
}
</style>然后打开页面，会出现这样的效果:
看css代码，实际上最开始我们设置了dash模式下，实线单位长度为整条线的长度300，并且动画一开始的偏移量是300，所以一开始这条线是看不见的，但是动画从第一帧到最后一帧的变化是偏移量从最大到0，然后这条线就出现了动态的效果，看到这里，上看的雪糕你知道是怎么画出来的吗？ 实际上是一样的，这个雪糕 实际上有5条线，5个path, 5条路径，每一个path的都添加了一个动画，这条线当然我们直接通过点来画会很困难，我们可以借助一些工具，比如sketch 或者 AI来画，然后导出svg文件即可，最后在添加动画就好。比如我用sketch绘制了3个字母kev，然后结合动画 实现了下面简单的效果：
这个路径是通过sketch来画的，里面的颜色填充也是后续通过animation来添加的。
只要我们能够得到特定的路径，就可以通过stroke-dashoffset和stroke-dasharray来实现动态的绘制效果。
上面这个kev动画的源码在这里：https://github.com/aeolusheath/FrontExersize/blob/master/svg/stoke-dashoffset.html
-----------------------------分割线------------------------------------------
比如我们在sketch上面绘制好了路径，但是我们要知道这个路径的长度，如果你用AI来话，可以获取到长度，在sketch上我还不知道怎么获取长度，不然我们要用js方法专门获取长度，我们也可以通过第三方库直接实现绘制动画。
比如 jquery-drawSVG， 我们可以直接将svg元素获取到，然后调用一个简单的方法就实现了绘制动画，实际帮我们做的就是 获取长度，然后将stroke-offset、stroke-dasharray 与 animation结合起来，这样确实帮我们节约了很多时间，但是可能这个fill动画的填充可能需要增加额外的一点代码。
参考： 上面雪糕的链接----> https://codepen.io/edennington/pen/pNgRzz
MDN----> https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
