svg描边动画神器stroke

最近重构博客，浏览了许多很酷炫的网站，发现他们的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

实践一中的线段进度条，和圆弧进度条稍微拼接改进一下就可以做很有意思的组合动画

1. 借助stroke-dashoffset，通过改变起始偏移让线段有位移效果
2. 外层用圆形进度条，里面放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计算得到的值，改天看看

动画实现 点击查看

先介绍那么多。等玩出花来再写个进阶玩法

参考内容

1. https://css-tricks.com/svg-line-animation-works/
2. http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/