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了。
本篇如能對您有所幫助，實在是感到榮幸。如有不合理之處也請大家多多指點