【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