一般来讲web前端实现动画效果主要经过下面几种方案:css
css动画;利用css3的样式效果能够将dom元素作出动画的效果来。前端
canvas动画;利用canvas提供的API,而后利用清除-渲染这样一帧一帧的作出动画效果。css3
svg动画;一样svg也提供了很多的API来实现动画效果,而且兼容性也不差,本文主要讲解一下如何制做svg线条动画。 web
关于SVG的基础知识,我这里就再也不叙述了,你们能够直接在文档中查看相关的API,这里只说一下实现线条动画主要用到的:path (路径)canvas
<path> 标签命令dom
M = movetosvg
L = lineto动画
H = horizontal linetoip
V = vertical lineto文档
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
如何让这个线条动起来呢?这里就要明白到SVG里的path的一些主要属性:
stroke:标识路径的颜色;
d:标识路径命令的集合,这个属性主要决定了线条的形状。
stroke-width:标识路径的宽度,单位是px;
stroke-dasharray:它是一个<length>和<percentage>数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。若是提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。所以,5,3,2等同于5,3,2,5,3,2;
stroke-dashoffset:标识的是整个路径的偏移值;