最近重构博客，浏览了许多很酷炫的网站，发现他们的logo很多用到了描边动画。
仔细研究一番，发现其实还蛮简单的。主要用到了svg的stroke属性。
stroke属性简介
stroke就是元素的一个轮廓属性，可应用于任何种类的线条，文字和元素。即给现有图形增加轮廓用
一些会用到的stroke属性
stroke
表示的是轮廓的颜色。值和color一样，支持rgba透明通道（为啥不是stroke-color？）
stroke-width
表示轮廓的宽度，可选值<length> | <percentage> | inherit
比较重要的属性：
stroke-dasharray
可控制用来轮廓描边的点划线的图案范式，就和名字一样，它的值是一组值，用来控制虚线中每段虚线的长度和虚线间的距离，类似[长度,距离,长度,距离]的表示
image.png
<svg >
<g fill="none" stroke="black" stroke-width="4">
<!-- 长度5，间隔5-->
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<!-- 长度10，间隔5-->
<path stroke-dasharray="10,5" d="M5 40 l215 0" />
<!-- 长度10，间隔10-->
<path stroke-dasharray="10,10" d="M5 60 l215 0" />
<!-- 长度20，间隔10，长度5，间隔5，长度5，间隔10-->
<path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
</g>
</svg>
stroke-dashoffset
表示虚线的起始偏移，可选值<percentage> |<length> | inherit
实践一：简单进度条
搭配css animation 几行代码就可以实现一些简单的进度条动画
简单原理：使用SVG构建两个元素:直线和圆形，通过css animation 去控制stroke-dasharray属性，改变虚线点的长度，同时要保证间距足够长，以免看到虚线的第二段，这里我用了2000，一般情况下是通过计算得到这个值，我这里图省事就直接设置一个足够大的值就了事了。
#svgForStroke line {
animation:dasharray 2s ease infinite alternate backwards running;
stroke-dasharray: 100 1000;
transition: all 4s ease;
}
.circle {
animation:circleLoading 2s ease infinite alternate backwards running;
}
@keyframes circleLoading {
from { stroke-dasharray: 0 2000 }
to { stroke-dasharray: 1100 2000 }
}
@keyframes dasharray {
from { stroke-dasharray: 100 1000 }
to { stroke-dasharray: 20 1000 }
}
<!-- 直线进度条 -->
<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<line stroke="green" stroke-width="10" stroke-linejoin="miter" stroke-linecap="butt" x1="20" y1="90" x2="120" y2="90"></line>
</g>
</svg>
<!-- 圆弧进度条 -->
<svg id="svgCircle" width="440" height="440" viewbox="0 0 440 440">
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
<circle class="circle" cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
实践二：加载失败动画
演示:
failure.gif
实践一中的线段进度条，和圆弧进度条稍微拼接改进一下就可以做很有意思的组合动画
- 借助
stroke-dashoffset，通过改变起始偏移让线段有位移效果 - 外层用圆形进度条，里面放2个路径。
基本的结构非常简单
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none"></circle>
<path class="line1" d="M30 30 L70 70" fill="none"></path>
<path class="line2" d="M70 30 L30 70" fill="none"></path>
</svg>
//用于获取圆的周长，待会会用到，当然你也可以自己算。2πr
const node = document.querySelector('circle');
console.log(node.getTotalLength())//250.9
//TODO : 不知道为啥小于2πr计算得到的值，改天看看
动画实现 点击查看
先介绍那么多。等玩出花来再写个进阶玩法
