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

这是个人一个关于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的值为五、十、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，就会看到路径就像是用笔慢慢画出来的。

冰淇淋描边动画效果

原理明白，下面正式开干了。

首先在Illustrator中获得相关路径的长度，能够在文档信息面板中获得路径的长度。

为了更好的来编写动画效果，须要给每个路径赋予了一个类名，这样能够针对每一条路径来更加精细控制动画效果。

而后，使用上面说的stroke-dasharray 和stroke-dashoffset两个属性来实现描边动画效果。

一个帅气的路径描边动画效果就实现了。

看起来好像不错了，可是还有优化的空间。

进一步优化

经过改变一些路径的虚线的长度，能够达到加快路径绘制的动画效果。很好理解，一样在2s内绘制一个短的虚线确定要比绘制一个长的虚线的要快，即移动小一点的偏移量要比大一点的偏移值在一样的时间内确定是要快一点。配合动画的延迟执行即animation-delay可使动画效果更有趣一点。

最终线上代码效果能够去这里看看demo。

最后要提醒一点的是：这种动画效果对于使用embedded方式来引入SVG的情形是不支持的。若是要使用这样的动画效果，最好是使用inline svg的方式来引入svg即直接把SVG文件代码写到html文件中。

友情提醒

下面来讲说一些浏览器的支持状况。

Mircosoft Edge

最新的Mircosoft Edge浏览器是支持这种描边动画效果的，不过它要求使用有明确单位的值，好比stroke-dasharray的值就必须为200px。

Internet Explorer

不幸的的是，Internet Explorer浏览器不支持在CSS中使用动画来控制stroke-dashoffset的值。

若是你必定要在IE上也实现描边动画效果，能够借助下面两种javascript方法来实现：

解决方法1。

解决方法2是使用一个javascript的库来实现，vivus。

原文地址，根据本身的理解有所删减。

推荐参考资料：

How SVG Line Animation Works

Polygon feature design: SVG animations for fun and profit