1. 程式人生 > >svg 描線動畫淺嘗

svg 描線動畫淺嘗

看了別人網站的svg動畫覺得非常舒服,自己嘗試實現一下效果如下:

圖片描述

需要明白2個關於svg的css屬性

1. stroke-dasharray: <percentage> | <length> | inherit

數與數之間用逗號或者空白隔開,指定短劃線和缺口的長度。stroke-dasharray:30 20;

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

stroke-dasharray:50;如果為一個值那麼短劃線和缺口一樣長

clipboard.png

2. stroke-dashoffset: <percentage> | <length> | inherit

指定了dash模式到路徑開始的距離,也就是偏移量如果不寫stroke-dasharray

屬性,stroke-dashoffset屬性就算寫出花也看不到效果的。stroke-dasharray:50;stroke-dashoffset:25px效果如下

clipboard.png

這條線向左移動了25px

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

clipboard.png

然後動畫讓stroke-dashoffset的值變為200動畫就出來了

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

總結

我們只需要知道每條path或者其他線條的長度(可以找設計要(捂臉)),吧stroke-dasharraystroke-dashoffset的值都設定為其長度,再動畫吧stroke-dashoffset設定為0就ok了。

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