看了別人網(wǎng)站的svg動(dòng)畫(huà)覺(jué)得非常舒服,自己嘗試實(shí)現(xiàn)一下
效果如下:

實(shí)現(xiàn)需要明白2個(gè)關(guān)于svg的css屬性

1. stroke-dasharray

stroke-dasharray: <percentage> | <length> | inherit
數(shù)與數(shù)之間用逗號(hào)或者空白隔開(kāi)，指定短劃線(xiàn)和缺口的長(zhǎng)度。如stroke-dasharray:30 20;,效果如下:

注:可視區(qū)域模擬svg的大小方便接下來(lái)理解動(dòng)畫(huà)

stroke-dasharray:50;如果為一個(gè)值那么短劃線(xiàn)和缺口一樣長(zhǎng)

2. stroke-dashoffset

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

這條線(xiàn)向左移動(dòng)了25px

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

然后動(dòng)畫(huà)讓stroke-dashoffset的值由0變?yōu)?00動(dòng)畫(huà)就出來(lái)了

具體效果點(diǎn)擊這里

3.demo地址

最后附上開(kāi)篇放大鏡的地址
放大鏡

總結(jié)

動(dòng)畫(huà)其實(shí)是由stroke-dashoffset的值變化實(shí)現(xiàn)的,每個(gè)線(xiàn)條動(dòng)畫(huà)其實(shí)是無(wú)限個(gè)缺口其中的一個(gè)，只不過(guò)其他的都在svg外面被隱藏起來(lái)了。獲得每條path或者其他線(xiàn)條的長(zhǎng)度(可以找設(shè)計(jì)要(捂臉))，把stroke-dasharray和stroke-dashoffset的值都設(shè)置為線(xiàn)條長(zhǎng)度,這時(shí)候線(xiàn)條會(huì)消失,再用動(dòng)畫(huà)把stroke-dashoffset設(shè)置為0就ok了。

本篇如能對(duì)您有所幫助，實(shí)在是感到榮幸。如有不合理之處也請(qǐng)大家多多指點(diǎn)

總結(jié)

以上是生活随笔為你收集整理的svg 线条动画浅尝的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。