使用 SVG 的 Stroke 系列属性制作描边动画

Question

看到某些网站的动画效果很棒，特别是有一种动画，像是一点一点画出来的那种，经过仔细查看源代码和自己实验，发现其实是利用SVG制作的描边动画，感觉非常的神奇，现在分享给大家制作方法，希望您也能通过本文的介绍，制作出绚丽的SVG描边动画。

好了直奔主题，这里主要涉及到 SVG 的stroke系列的属性，所有 SVG 的属性可在mozilla的开发者社区查到：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

stroke 系列属性主要与边有关比如：

• stroke 边的颜色
• stroke-width 边的粗细
• stroke-linecap 边起始与终点的形状
• stroke-linejoin 边折角时的形状

而 SVG 的描边动画重点与两个属性有关， stroke-dasharray 和 stroke-dashoffset

stroke-dasharray
该属性控制路径中虚线的长度以及虚线间的距离

我们知道虚线由一些间隔的实线组成，而该属性接受一串数字，可以理解为是数组，然后下标为 0、2、4… 的数字表示这段路径实线的长度，下标 1、3、5… 的数字表示间隔空白的长度。

举个例子

如果我想实现类似 CSS border 中 dotted 这样的点线该怎么办呢？

可以这么写 stroke-dasharray:1,1  或者省略的写法 stroke-dasharray:1 ，第一个数字表示实线长度 1，第二个表示间隔长度 1，后面则循环；如果要加大间隔而不加长实线，则 stroke-dasharray:1,5

注：如果传入的是奇数个数字，比如 stroke-dasharray:1,2,3 ，那么应该等于这样的写法 stroke-dasharray:1,2,3,1,2,3

stroke-dasharray:1

stroke-dasharray:1, 5

stroke-dashoffset
该属性指定了虚线开始时的偏移长度

正数从路径起始点向前偏移，负数则向后

stroke-dasharray:15, 10, 5, 10;stroke-dashoffset:0;

stroke-dasharray:15, 10, 5, 10;stroke-dashoffset:15;

描边动画化

0、我们做个假设，下面这条路径的总长度为180；

1、我们设置这条路径的 storke-dasharray:180 ，于是这条路径就变成了由长度180的实线与长度180间隔组成；但是，它的总长度只有180，因此看上去，还是这样，但在实线的后面，跟着一段长度180的间隔；

2、于是，当我们设置 stroke-dashoffset:100 , 我们将该虚线向前偏移了100：

那我们设置 stroke-dashoffset:180 ， 好吧该路径就变成了空白。

3、于是，我们设置该路径为这样

stroke-dasharray: 180;
stroke-dashoffset:180;

然后将 stroke-dashoffset 逐渐变成 0；

点击这里查看示例：svg-animate

4、将 stroke-dashoffset 逐渐变成 0 的过程，可以通过 CSS3 来实现，也可以通过 JavaScript 来实现，这两种实现方式的优缺点嘛：

• 通过 JavaScript，可以精确的得到每条路径的总长度，从而动画时长可以精确控制，缺点就是需要写一连串动画控制函数；
• 通过 CSS3，上述的优缺点正好相反，特别是当页面中有多条路径进行一致的描边动画，它们会同步开始，但不能同步结束。

所以通过 JavaScript 计算出所有页面中路径的长度，并设置 stroke-dasharray , stroke-dashoffset ，然后通过 CSS3 来进行执行动画，这应该是最好的解决方法。