制作svg動態圖形效果

原文鏈接：http://www.webhek.com/post/how-svg-line-animation-works.html

相信大家都見到過這樣神奇的技術：一副線條構成的畫能自動畫出自己。非常的酷。Jake Archibald是這種SVG技術的首創者，並且寫了一篇非常好的文章來描述它是如何實現的。Brian Suda也在24 Ways網站上討論過它。 Polygon使用它在一篇設計方面的文章里創造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。

其實我沒有什么好增補的，只是想把這種技術說的更明白些，所以，在這里我要用我的方式把這種技術再講解一遍。

1. 你有一個SVG圖形

2. 這個圖形必須要有一個線條(stroke)屬性

3. 線條可以是虛線

我們可以用Illustrator制作，也可以用編程實現。我們用CSS來設置這些路徑的樣式(假定我們這里是inline SVG，或通過一個<object>)，把它們變成虛線形式。

<svg ...> <path class="path" stroke="#000000" ... > </svg>

.path { stroke-dasharray: 20; }

這是讓虛線里的每個小線段長度為20px。

4. 可以讓虛線小段的長度變得更長….

.path { stroke-dasharray: 100; }

5. 我們還可以給我們的線條設置”offset”偏移量，這樣會導致虛線里的小線段的位置發生移動。

當我們動態設置圖形中線條的“offset”值時，可以看到這個效果：

可以這樣簡單的實現：

.path { stroke-dasharray: 100; animation: dash 5s linear; } @keyframes dash { to { stroke-dashoffset: 1000; } }

6. 想象，當虛線的小線條足夠長，超過圖形的整個線條長度時

沒有什么變化，整個圖像看起來完全不是虛線。你只需要將stroke-dasharray屬性設置的足夠長，超過整個線條的長度。

7. 現在給線條設置偏移量，讓它不再覆蓋整個圖形。

這樣你就看不見圖形了。

8. 現在動態的慢慢將線條的偏移量設置回歸到0

如果通過CSS，你需要將animation屬性設置成forwards，這樣整個動畫就會停止在它的最終狀態。

.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }

Tada!

 

為什么要用JavaScript?

大部分你看到的SVG線條動畫都使用了JavaScript。這是因為在現實情況中你很難知道線條有多長。我們這里設置的是1000，是因為它碰巧是1000。

用JavaScript獲取長度值的寫法是這樣的：

var path = document.querySelector('.path'); var length = path.getTotalLength();

然后你就可以隨便使用這個值了。文本頂部鏈接的那些文章講的都比本文透徹，你最好還是參考一下那些文章。我只想簡單的講一下這種技術方法，希望它能給你一些啟示。

 

個人實例：

css:

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear forwards;
    animation-delay: 1s;
    -webkit-animation: dash 5s linear forwards;
}
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

html:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <path class="path" id="lineAB" d="M 330 260 l 280 0 l -30 -90 l -2 8 l 7 -1 l -5 -8" stroke="red"
                stroke-width="3" fill="none" />
  </svg>

　　再svg中，d屬性中是一系列坐標點，而且后一個坐標點是相對於前一個坐標點的相對位置。