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：標識的是整個路徑的偏移值；