【Web动画】SVG 线条动画

JfiABvn.png!mobile

通常我们说的 Web 动画，包含了三大类。

CSS3 动画
javascript 动画(canvas)
html 动画(SVG)

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

举个栗子

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

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

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

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

See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

我们假定你在阅读本文的时候有了一定的 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的分枝语言之一，用于标记可缩放的矢量图形。(摘自 MDN[1] )

上面代码中，先谈谈 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 的原因是需要使用 `stroke-linejoin`[2] 和 ` stroke-linecap`[3] 属性，在线段连接处创建圆滑过渡角。

SVG 中定义了一些 基本形状[4] ：

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 2s 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：上文稍微提到过， 设定线段连接处的样式[5];
stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度;
stroke-dashoffset：则是虚线的偏移量

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

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

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

stroke-dasharray: 0, 1350;，表示线框短划线和缺口的长度分别为 0 和 1350，所以一开始整个图形都是被缺口占据，所以是在视觉效果上长度为 0。

然后过渡到 stroke-dasharray: 1350, 1350，表示线框短划线和缺口的长度分别为 1350 和 1350，因为整个图形的长度就是 1350，所以整个进度条会被慢慢填充满。

掌握了这个技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景：

SVG 线条动画实现按钮交互

SVG 线条动画实现圆形进度条

各类按钮效果

多 SVG 图形线条动画配合

之前我司一个 h5 里面应用过的，多SVG 图形线条动画配合，可以制作一些比较酷炫的动画，很有科技感。

本文到此结束，我在我的 Github 上，使用 SVG 实现了一些图形 -- SVG奇思妙想[6] ， Demo可以戳这里[7] 。

下篇文章将会详述非规则图形，如何使用 PS + AI 生成 path 路径，实现 SVG 动画，放个 Demo，敬请期待。

参考资料

[1]MDN:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

[2]stroke-linejoin:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linejoin

[3]stroke-linecap:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linecap

[4]基本形状:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes

[5]设定线段连接处的样式:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-linejoin

[6]SVG奇思妙想:

https://github.com/chokcoco/SVG

[7]Demo可以戳这里:

http://sbco.cc/demo/svg/html/index.html

2IfUnim.png!mobile

举个栗子

SVG 为何

SVG 基本形状

SVG 线条动画

SVG 线条动画实现按钮交互

SVG 线条动画实现圆形进度条

各类按钮效果

多 SVG 图形线条动画配合

Recommend

这小腿线条，流口水啊ԅ(¯﹃¯ԅ)

超级强大的SVG SMIL animation动画详解

建筑师将灵感做成婚戒了！线条流动、贵金属3D打印，她说：我只是所做之事皆所爱

十分钟教你用svg做出精美的动画！

【Web动画】SVG 实现复杂线条动画

贝塞尔曲线与CSS3动画、SVG和canvas的基情

算法赏析——寻找线条的转折点

SVG基础及其动画应用浅析

巧用 CSS 实现动态线条 Loading 动画

SVG动画实践

About Joyk