【Web动画】SVG 线条动画入门-白红宇

【Web动画】SVG 线条动画入门

阅读量：6860 次

发布时间：2019-06-26

本文共 3091 字，大约阅读时间需要 10 分钟。

CSS3 动画

javascript 动画（canvas）

html 动画（SVG）

个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

举个栗子

SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条：

把里面的进度条单独拿出来，也就是需要实现这样一个效果：

脑洞大开一下，使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的，就是很麻烦。但是如果采用 SVG 的话，迎刃而解。

我们假定你在阅读本文的时候有了一定的 SVG 基础，上面代码看看就懂了，好了，本文到此结束。

好吧，还是一步一步解释，上面进度条的主要 SVG 代码如下：

                            
<
svg
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    
<
polyline
points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    
<
polyline
points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</
svg
>
         
       

SVG 为何

可缩放矢量图形，即SVG，是W3C XML的分枝语言之一，用于标记可缩放的矢量图形。（摘自）

上面代码中，先谈谈 svg 标签：

version：表示 <svg> 的版本，目前只有 1.0，1.1 两种

xmlns：http://www.w3.org/2000/svg 固定值

xmlns:xlink：http://www.w3.org/1999/xlink 固定值

xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略

class：就是我们熟悉的 class

width | height：定义 svg 画布的大小

viewbox：定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解）

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了，上面，我在 svg 中定义了两个 polyline 标签。

SVG 基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。这里我使用polyline 的原因是需要使用和属性，在线段连接处创建圆滑过渡角。

SVG 中定义了一些，在继续下文之前，建议点进去先了解一些基本图形的标签及写法：

SVG 线条动画

好，终于到本文的重点了。

上面，我们给两个 polyline 都设置了 class，SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。

上面，主要的 CSS 代码：

                            
.g-rect-path{ 
    
fill: 
none
;
    
stroke-
width
:
10
;
    
stroke:
#d3dce6
;
    
stroke-linejoin:round;
    
stroke-linecap:round;
}
.g-rect-fill{ 
    
fill: 
none
;
    
stroke-
width
:
10
;
    
stroke:
#ff7700
;
    
stroke-linejoin:round;
    
stroke-linecap:round;
    
stroke-dasharray: 
0
, 
1370
;
    
stroke-dashoffset: 
0
;
    
animation: lineMove 
2
s ease-out infinite;
}
@keyframes lineMove { 
    
0%
{ 
        
stroke-dasharray: 
0
, 
1350
;
    
}
    
100%
{ 
        
stroke-dasharray: 
1350
, 
1350
;
    
}
}
         
       

这尼玛是什么 CSS？怎么除了 animation 全都不认识？

莫慌，其实很多和 CSS 对比一下非常好理解，只是换了个名字：

fill：类比 css 中的 background-color，给 svg 图形填充颜色；

stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；

stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；

stroke-linejoin | stroke-linecap：上文稍微提到过，；

stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；

stroke-dashoffset：则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个和数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。

解释很苍白，直接看例子：

上面，填充进度条，使用了下面这个动画：

                            
@keyframes lineMove { 
    
0%
{ 
        
stroke-dasharray: 
0
, 
1350
;
    
}
    
100%
{ 
        
stroke-dasharray: 
1350
, 
1350
;
    
}
}
         
       