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:标识的是整个路径的偏移值;

posted @ 2017-06-14 17:51  杨上进  阅读(183)  评论(0编辑  收藏  举报