【网页动画】SVG线条动画简介

平时我们说的网页动画，包括三大类。

CSS3动画
javascript动画（画布）
html动画 (SVG)

个人认为，三部动画各有各的优点和缺点。实际应用中，大家根据自己的掌握来进行选择。这篇文章讨论的是SVG线条动画，我认为在实际项目中非常有价值。

举个栗子

SVG线条动画可以解决某些特定情况下使用CSS无法完成的动画。特别是进度条方面，看一下最近项目中的一个小需求，这样形状的进度条：

单独取出里面的进度条，即需要实现如下效果：

发挥你的想象力，如何使用CSS3实现这样的进度条。

CSS3可以做到，但是很麻烦。但如果使用SVG，就很容易解决。

阅读本文时我们假设您有一定的 SVG 基础。看上面的代码你就明白了。好了，这篇文章到这里就结束了。

好啦，我们一步一步来解释吧。上面进度条的主要SVG代码如下：

SVG 为什么

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

上面的代码中，我们来说说svg 标签：

版本：表示的版本。目前只有两种：1.0和1.1
xmlns：http://www.sxzhongrui.com/2000/svg固定值
xmlns:xlink：http://www.sxzhongrui.com/1999/xlink固定值

保留

SVG

班级：就是我们熟悉的班级
宽度 | 高度：定义svg画布尺寸

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

SVG 基本形状

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

其实，折线是一种比较少见的形状。比较常用的形状有path、rect、circle等。我使用的原因折线这是我需要使用的Stroke-lineJoin 和 Stroke-lineCap 属性可在线段连接处创建平滑过渡角度。

SVG 定义了一些基本形状。在继续之前，建议先点进去了解一下一些基本形状的标注和书写方法：

SVG线条动画

好了，终于进入本文的正题了。

上面，我们为折线 设置了类。 SVG图形的优点之一是一些属性样式可以用CSS编写，更重要的是它们可以与CSS动画一起使用。

以上，主要CSS代码：

.g-矩形路径{
    填充：无；
    笔画宽度：10；
    行程：#d3dce6；
    笔划线连接：圆形；
    笔划线帽：圆形；
}

.g-矩形填充{
    填充：无；
    笔画宽度：10；
    行程：#ff7700；笔划线连接：圆形；
    笔划线帽：圆形；
    笔画破折号数组：0、1370；
    笔划-dashoffset：0；
    动画：lineMove 2s 无限缓出；
}

@keyframes lineMove {
    0%{
        笔画破折号数组：0、1350；
    }
    100%{
        笔画破折号数组：1350、1350；
    }
}

这个CSS到底是什么？为什么除了动画之外谁都不认识？

不要惊慌。事实上，与 CSS 相比，其中许多内容都非常容易理解。他们只是改了名字：

fill：类似于css中的background-color，为svg提供图形填充颜色；
lines-width：类似于CSS中的border-width，设置svg图形的边框宽度；？
描边线连接 | Stroke-linecap：同上，设置线段连接的样式；
Stroke-dasharray：该值是一个没有上限的数组。每个数字交替代表笔画的宽度和间距；
lines-dashoffset：虚线

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

属性Stroke-dasharray可以控制用于笔画的虚线的图案样式。

它是和的序列。数字由逗号或空格分隔，指定破折号和间隙的长度。如果提供奇数个值，则值序列重复一次，得到偶数个值。因此，5,3,2相当于5,3,2,5,3,2。

解释得很模糊，看例子吧：

上面，进度条被填充，使用以下动画：

@keyframes lineMove {
    0%{
        笔画破折号数组：0、1350；
    }
    100%{
        笔画破折号数组：1350、1350；
    }
}

lines-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的奇妙创意，你可以点击这里查看演示。

下一篇文章将详细介绍不规则图形，如何使用PS + AI生成path路径，实现SVG动画，并放一个demo，敬请期待。

（12.28更新，已发布下一篇：【网页动画】SVG实现复杂线条动画）

本文到此结束。如果还有什么问题或者建议，可以多交流。这是一篇原创文章。文笔有限，才华浅薄。如果文章有什么错误的地方，请告诉我。