帅气的 SVG 路径描边动画 (path animation) 实战应用

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2670 天前的主题，其中的信息可能已经有所发展或是发生改变。

这是我的一个关于 SVG 的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于 SVG 技术应用可以去网站看看。

要是觉得文章还不错的话，可以多多推荐哦。

今天这篇文章来聊聊 SVG 路径描边动画。

关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了 SVG 中的路径（ path ）来实现的描边动画效果。

上面图所示的效果就是我们要实现的效果。

准备矢量文件

在实际编写动画效果前，最重要的是要准备矢量文件。第一步是要使用 Illustrator 来创建你需要描边效果的矢量文件，需要使用钢笔工具来创建描边效果的矢量文件。当然如果你仅仅是对怎么实现描边的动画效果感兴趣，可以跳过这一步。

命名图层

在设计图形的时候，要养成良好的图层命名习惯，尤其是要导出 SVG 文件的时候更应如此。如果不对图层命好命，那么导出来的 SVG 文件会异常复杂难以辨认，所以为了后面开发方便，还是好好的对图层命好命吧。图层的名字保持简洁容易理解就可以了。对于嵌套的子图层也要命好名，如下图所示：

导出

设计好图形后，就可以使用 Illustrator 来导出为 SVG 文件了，在导出文件前需要对图形进行一些设置，相关的设置可以去看看我以前写一篇文章，这里就不再阐述了。

输出 SVG 文件

再一次提醒在输出 SVG 文件前，记得把图层命好名。上面的图像导出 SVG 后，使用代码编辑器工具打开 SVG 文件：

看到代码里的 ID 了么？通过 ID 我们就可以清楚的知道每条路径（ patn ）所对应的图形，这就是图层命名带来的好处。想象一下，如果你在导出前没有命好名，为了找到每条路径（ path ）所对应的图形那是怎样的一种痛苦。

优化

当然导出 SVG 后，还需要进一步优化和压缩 SVG 文件，一般使用像SVGO类似的工具就可以很好的对 SVG 文件进行优化。不过，像我们现在这样要直接来操纵 SVG 文件来编写动画效果，最好是不要以开始就对 SVG 文件进行优化。我们可以在边写完动画效果后再对它进行优化。

至于 SVG 文件的优化可以去看看这篇文章。

动起来

在开始实现路径（ path ）描边动画前，先要明白stroke-dasharray 和stroke-dashoffset这两个概念。

Stroke Dash Array

在 SVG 中也可以像 CSS 中那样指定边框为虚线要用到属性stroke-dasharray。 stroke-dasharray 属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。

如果只有一个数字 5 ，则表示会先画 5px 实线，紧接着是 5px 空白，然后又是 5px 实线，从而形成虚线。

比如我有一条 200px 的线，我把stroke-dasharray的指定为 200 ，它就表示先画 200px 实线，紧接着是 200px 空白，然后又是 200px 实线，从而形成虚线。

Stroke Dash Offset

stroke-dashoffset属性表示路径从开始位置的偏移量。比如在下面我定义了stroke-dasharray的值为 5 、 10 、 30 、 10 表示 5px 的虚线、 10px 的空白、 30px 的虚线、 10px 的空白，如此循环。然后，通过改变它的stroke-dashoffset的值来看看会发生什么：

从图片中可以看到，通过调整stroke-dashoffset的值，可以重新设置路径开始的位置。在上面的实例中，我设置stroke-dashoffset的值为 15px ，可以看到路径移动了 15px 的距离。

动态改变偏移值

我们把路径的stroke-dasharray和stroke-dashoffset都设置为 200px 的值，会发现什么也看不到了，因为路径的虚线和空白距离都是一样的，而stroke-dashoffset的值也是 200px ，即表示路径从开始的位置偏移了 200px 的值（记住路径的偏移是从左边的原点开始的），所以就看到一片空白。

如果使用 CSS3 的来动态改变路径的偏移值即从 200px 到 0 ，就会看到路径就像是用笔慢慢画出来的。