svg动画

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

 

• css动画；利用css3的样式效果可以将dom元素做出动画的效果来。

• canvas动画；利用canvas提供的API，然后利用清除-渲染这样一帧一帧的做出动画效果。

• svg动画；同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。 

 

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

 

<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

 

如何让这个线条动起来呢？这里就要明白到SVG里的path的一些主要属性：

 

1. stroke：标识路径的颜色；

2. d：标识路径命令的集合，这个属性主要决定了线条的形状。

3. stroke-width：标识路径的宽度，单位是px；

4. stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2；

5. stroke-dashoffset：标识的是整个路径的偏移值；