svg 線條動畫淺嘗

看了別人網站的svg動畫以爲很是舒服,本身嘗試實現一下 效果以下:

實現須要明白2個關於svg的css屬性

1. stroke-dasharray

stroke-dasharray: <percentage> | <length> | inherit 數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。如stroke-dasharray:30 20;,效果以下:

注:可視區域模擬svg的大小方便接下來理解動畫

stroke-dasharray:50;若是爲一個值那麼短劃線和缺口同樣長

2. stroke-dashoffset

stroke-dashoffset: <percentage> | <length> | inherit 指定了dash模式到路徑開始的距離,也就是偏移量 若是不寫stroke-dasharray屬性,stroke-dashoffset屬性就算寫出花也看不到效果的。 stroke-dasharray:50;stroke-dashoffset:25px效果以下

這條線向左移動了25px

再試一下 stroke-dasharray:200; stroke-dashoffset:0px

而後動畫讓stroke-dashoffset的值由0變爲200動畫就出來了

具體效果點擊這裏

3.demo地址

最後附上開篇放大鏡的地址 放大鏡

總結

動畫實際上是由stroke-dashoffset的值變化實現的,每一個線條動畫實際上是無限個缺口其中的一個，只不過其餘的都在svg外面被隱藏起來了。得到每條path或者其餘線條的長度(能夠找設計要(捂臉))，把stroke-dasharray和stroke-dashoffset的值都設置爲線條長度,這時候線條會消失,再用動畫把stroke-dashoffset設置爲0就ok了。

本篇如能對您有所幫助，實在是感到榮幸。若有不合理之處也請你們多多指點