线条之美，玩转 SVG 线条动画

2017-03-03 17:41:00

通常来说web前端实现动画效果主要通过下面几种方案：

css动画；利用css3的样式效果可以将dom元素做出动画的效果来。
canvas动画；利用canvas提供的API，然后利用清除-渲染这样一帧一帧的做出动画效果。
svg动画；同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。

先来看几个效果：

以上这些效果都是利用SVG线条动画实现的，只用了css3和svg，没有使用一行javascript代码，这一点和canvas比起来要容易一些，下面就说明一下实现这些效果的原理。

关于SVG的基础知识，我这里就不再叙述了，大家可以直接在文档中查看相关的API，这里只说一下实现线条动画主要用到的：path （路径）

 标签命令

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

利用path的这些命令我们可以实现我们想要的任何线条组合，以一段简单的线条为例：

效果：

呵呵，看起来很简单，但是，如何让这个线条动起来呢？这里就要明白到SVG里的path的一些主要属性：

stroke：标识路径的颜色；
d：标识路径命令的集合，这个属性主要决定了线条的形状。
stroke-width：标识路径的宽度，单位是px；
stroke-dasharray：它是一个和数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2；
stroke-dashoffset：标识的是整个路径的偏移值；

以一张图来解释stroke-dasharray和stroke-dashoffset更容易理解一些：

因此，我们之前的路径就会变成这个样子：

# path  {        stroke-dasharray:  3px,  1px;        stroke-dasharray:  0;}

效果：

理解了stroke-dasharray的作用之后，下面我们就可以使用css3的animation来让这个路径动起来。

# path  {    animation:  move  3s  linear forwards;}@keyframes  move  {      0%{          stroke-dasharray:  0,  511px;      }      100%{          stroke-dasharray:  511px,  511px;      }}

效果：

511这个值是整个路径的长度，可以用js的document.getElementById(‘path’).getTotalLength()得到

stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和 511，所以一开始整个路径都是空隙，所以是空的。
然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是 511，而实线的长度也慢慢变成511，所以整个线条就出现了。

同样利用stroke-dashoffset也可以实现这个效果，原理就是最初线条分为511实线，和511空隙，但是由于设置了offset使线条偏移不可见了，当不断修改offset后，线条慢慢出现。

# path  {    animation:  move  3s  linear forwards;    stroke-dasharray:  511px,511px;}@keyframes  move  {  0%{      stroke-dashoffset:  511px;  }  100%{      stroke-dashoffset:  0;  }}

效果：

当我们掌握了上述的方法后，整个利用SVG实现线条动画的原理就已经清楚了，我们需要的就是一个SVG路径了，但是总画一些简单的线条还是不美啊，那我们如何才能得到复杂的svg路径呢？

找UI设计师要一个。
自己利用PS和AI做一个，只需要简单的2步。

以部落LOGO为例：

1，得到部落LOGO的png图片。

2，右键图层，然后点击从选区生成工作路径，我们就可以得到：

3，文件–导出–路径到AI，将路径导出在AI里面打开。

4，在AI里面选择保存成svg格式的文件，然后用sublime打开svg文件，将path的d拷贝出来即可。

5，利用上文介绍的实现动画的方法，我们就可以轻松的得到了下面这个效果。

线条动画进阶：

可以看到上面的动画效果和文章最初显示的动画效果还是有区别的，要想实现文章最初的动画效果，需要用到SVG的和来实现，读者可以在网上查一下这两个标签的用法。

# path1  {    stroke-dashoffset:  7%  7%;    stroke-dasharray:  0  35%;    animation:  animation  3s  linear forwards;  }  @keyframes  animation  {      100%  {        stroke-dasharray:  7%  7%;        stroke-dashoffset:  7%;      }  }  # path2  {    stroke-dashoffset:  7%  7%;    stroke-dasharray:  0  35%;    animation:  animation2  3s  linear forwards;  }  @keyframes  animation2  {      100%  {          stroke-dasharray:  7%  7%;          stroke-dashoffset:  14%;      }}

思路就是：

1，将原来只有一条path的路径替换成两条，并且这两条的路径是完全重合的。

2，分别设置两条路径的stroke-dasharray和stroke-dashoffset的css3的animation动画，注意两条路径的动画不能完全一样要有差值。

3，设置成功之后就可以利用animation动画触发的时机和改变程度来实现多条动画效果。

效果：

那么如何实现alloyteam的文字动画呢，其实原理也是利用了stroke-dasharray和stroke-dashoffset，这两个属性不仅可以作用在上，同样可以作用在上。

QQ

 .use-text:nth-child(1) {      stroke: # 360745;      animation: animation1 8s infinite ease-in-out forwards;}.use-text:nth-child(2) {      stroke: # D61C59;      animation: animation2 8s infinite ease-in-out forwards;}.use-text:nth-child(3) {       stroke: # E7D84B;       animation: animation3 8s infinite ease-in-out forwards;}.use-text:nth-child(4) {       stroke: # EFEAC5;       animation: animation4 8s infinite ease-in-out forwards;}.use-text:nth-child(5) {      stroke: # 1B8798;      animation: animation5 8s infinite ease-in-out forwards;}@keyframes animation1 {       50%{            stroke-dasharray: 7% 28%;            stroke-dashoffset: 7%;       }       70%{             stroke-dasharray: 7% 28%;             stroke-dashoffset: 7%;       }}@keyframes animation2 {       50%{           stroke-dasharray: 7% 28%;           stroke-dashoffset: 14%;       }       70%{            stroke-dasharray: 7% 28%;            stroke-dashoffset: 14%;       }}@keyframes animation3 {     50%{         stroke-dasharray: 7% 28%;         stroke-dashoffset: 21%;    }    70%{         stroke-dasharray: 7% 28%;         stroke-dashoffset: 21%;    }}@keyframes animation4 {       50%{            stroke-dasharray: 7% 28%;            stroke-dashoffset: 28%;       }       70%{            stroke-dasharray: 7% 28%;            stroke-dashoffset: 28%;       }}@keyframes animation5 {      50%{           stroke-dasharray: 7% 28%;           stroke-dashoffset: 35%;      }      70%{           stroke-dasharray: 7% 28%;           stroke-dashoffset: 35%;      }}

这里用了5条完全重合的路径，并且每个路径的颜色和动画效果都不一样。

效果：