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

?

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

?

1. 你有一個(gè)SVG圖形

?

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

?

3. 線條可以是虛線

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

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

.path {
  stroke-dasharray: 20;
}
    

?

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

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

      .path {
  stroke-dasharray: 100;
}
    

?

5. 我們還可以給我們的線條設(shè)置”offset”偏移量，這樣會(huì)導(dǎo)致虛線里的小線段的位置發(fā)生移動(dòng)。

當(dāng)我們動(dòng)態(tài)設(shè)置圖形中線條的“offset”值時(shí)，可以看到這個(gè)效果：

可以這樣簡單的實(shí)現(xiàn)：

      .path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
    

?

?

6. 想象，當(dāng)虛線的小線條足夠長，超過圖形的整個(gè)線條長度時(shí)

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

?

7. 現(xiàn)在給線條設(shè)置偏移量，讓它不再覆蓋整個(gè)圖形。

這樣你就看不見圖形了。

?

8. 現(xiàn)在動(dòng)態(tài)的慢慢將線條的偏移量設(shè)置回歸到0

如果通過CSS，你需要將 animation 屬性設(shè)置成 forwards ，這樣整個(gè)動(dòng)畫就會(huì)停止在它的最終狀態(tài)。

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

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
    

?

?

Tada!

為什么要用JavaScript?

大部分你看到的SVG線條動(dòng)畫都使用了JavaScript。這是因?yàn)樵诂F(xiàn)實(shí)情況中你很難知道線條有多長。我們這里設(shè)置的是 1000 ，是因?yàn)樗銮墒?000。

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

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

?

?

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

(英文： How SVG Line Animation Works .)

?

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

本文： SVG技術(shù)入門：線條動(dòng)畫實(shí)現(xiàn)原理