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

一般咱们说的 Web 动画，包含了三大类。

• 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的分枝语言之一，用于标记可缩放的矢量图形。（摘自MDN）

上面代码中，先谈谈 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 和 stroke-linecap 属性，在线段链接处建立圆滑过渡角。

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

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

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

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

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

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

@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奇思妙想，Demo能够戳这里。

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

 

（12.28更新，下篇文章已出：【Web动画】SVG 实现复杂线条动画） 

到此本文结束，若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。