最近重構(gòu)博客垂涯，瀏覽了許多很酷炫的網(wǎng)站鸵赫，發(fā)現(xiàn)他們的logo很多用到了描邊動(dòng)畫。
仔細(xì)研究一番宵蕉，發(fā)現(xiàn)其實(shí)還蠻簡(jiǎn)單的。主要用到了svg的stroke屬性节榜。
stroke屬性簡(jiǎn)介
stroke就是元素的一個(gè)輪廓屬性羡玛，可應(yīng)用于任何種類的線條，文字和元素宗苍。即給現(xiàn)有圖形增加輪廓用
一些會(huì)用到的stroke屬性
stroke
表示的是輪廓的顏色稼稿。值和color一樣，支持rgba透明通道（為啥不是stroke-color讳窟？）
stroke-width
表示輪廓的寬度让歼，可選值<length> | <percentage> | inherit
比較重要的屬性：
stroke-dasharray
可控制用來輪廓描邊的點(diǎn)劃線的圖案范式，就和名字一樣丽啡，它的值是一組值谋右，用來控制虛線中每段虛線的長(zhǎng)度和虛線間的距離，類似[長(zhǎng)度,距離,長(zhǎng)度,距離]的表示
<svg >
<g fill="none" stroke="black" stroke-width="4">
<!-- 長(zhǎng)度5补箍，間隔5-->
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<!-- 長(zhǎng)度10改执，間隔5-->
<path stroke-dasharray="10,5" d="M5 40 l215 0" />
<!-- 長(zhǎng)度10啸蜜，間隔10-->
<path stroke-dasharray="10,10" d="M5 60 l215 0" />
<!-- 長(zhǎng)度20，間隔10辈挂，長(zhǎng)度5衬横，間隔5，長(zhǎng)度5终蒂，間隔10-->
<path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
</g>
</svg>
stroke-dashoffset
表示虛線的起始偏移蜂林，可選值<percentage> |<length> | inherit
實(shí)踐一：簡(jiǎn)單進(jìn)度條
搭配css animation 幾行代碼就可以實(shí)現(xiàn)一些簡(jiǎn)單的進(jìn)度條動(dòng)畫
簡(jiǎn)單原理：使用SVG構(gòu)建兩個(gè)元素:直線和圓形，通過css animation 去控制stroke-dasharray屬性拇泣，改變虛線點(diǎn)的長(zhǎng)度噪叙，同時(shí)要保證間距足夠長(zhǎng)，以免看到虛線的第二段挫酿，這里我用了2000构眯，一般情況下是通過計(jì)算得到這個(gè)值，我這里圖省事就直接設(shè)置一個(gè)足夠大的值就了事了早龟。
#svgForStroke line {
animation:dasharray 2s ease infinite alternate backwards running;
stroke-dasharray: 100 1000;
transition: all 4s ease;
}
.circle {
animation:circleLoading 2s ease infinite alternate backwards running;
}
@keyframes circleLoading {
from { stroke-dasharray: 0 2000 }
to { stroke-dasharray: 1100 2000 }
}
@keyframes dasharray {
from { stroke-dasharray: 100 1000 }
to { stroke-dasharray: 20 1000 }
}
<!-- 直線進(jìn)度條 -->
<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<line stroke="green" stroke-width="10" stroke-linejoin="miter" stroke-linecap="butt" x1="20" y1="90" x2="120" y2="90"></line>
</g>
</svg>
<!-- 圓弧進(jìn)度條 -->
<svg id="svgCircle" width="440" height="440" viewbox="0 0 440 440">
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
<circle class="circle" cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
實(shí)踐二：加載失敗動(dòng)畫
演示:
實(shí)踐一中的線段進(jìn)度條惫霸，和圓弧進(jìn)度條稍微拼接改進(jìn)一下就可以做很有意思的組合動(dòng)畫
- 借助
stroke-dashoffset，通過改變起始偏移讓線段有位移效果 - 外層用圓形進(jìn)度條葱弟，里面放2個(gè)路徑壹店。
基本的結(jié)構(gòu)非常簡(jiǎn)單
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none"></circle>
<path class="line1" d="M30 30 L70 70" fill="none"></path>
<path class="line2" d="M70 30 L30 70" fill="none"></path>
</svg>
//用于獲取圓的周長(zhǎng)，待會(huì)會(huì)用到芝加，當(dāng)然你也可以自己算硅卢。2πr
const node = document.querySelector('circle');
console.log(node.getTotalLength())//250.9
//TODO : 不知道為啥小于2πr計(jì)算得到的值，改天看看
動(dòng)畫實(shí)現(xiàn) 點(diǎn)擊查看
先介紹那么多藏杖。等玩出花來再寫個(gè)進(jìn)階玩法
