相信大家都見到過這樣神奇的技術：一副線條構成的畫能自動畫出自己。非常的酷。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();

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

(英文：How SVG Line Animation Works.)

轉載于:https://www.cnblogs.com/w3cdream/p/4995131.html

總結

以上是生活随笔為你收集整理的SVG技术入门：线条动画实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。