使用SVG實現圓環loading進度效果
阿新 • • 發佈:2019-02-05
效果
當我們想實現這樣一個loading效果,有這麼幾種選擇,第一種是使用canvas,第二種是藉助css3的transform屬性。這兩種方法有一個問題,在webkit核心的瀏覽器上存在毛邊。那麼如果只相容IE9+的瀏覽器,可以考慮使用SVG
具體程式碼
SVG的實現效果非常簡單
<svg 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 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>
實現這個效果的關鍵因素在於stroke-dasharray="0 1069"
第一個引數代表藍色進度條的長度,第二個引數代表灰色背景的長度。這裡兩個引數的和必須是1069,也就是圓的周長
如果我們想拖動下面的進度條自動更新進度,只需要通過js改變這個屬性值就可以。js程式碼如下所示
if(window.addEvenetListener){
var range = document.getElementById('range');
if(!range) return;
//獲得第二個圓的引用
var circle = range.getElementsByTagName('circle')[1];
range.addEvenetListener('change', function(){
var percent = this.value / 100;
//圓的周長
var perimeter = Math.PI * 2 * 170;
//stroke-dasharray屬性的兩個引數和必須為周長
circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter. * (1 - percent));
})
}
css程式碼如下所示
circle {
-webkit-transition: stroke-dasharray .25s;
transition: stroke-dasharray .25s;
}
stroke-dasharray在SVG中描邊是代表虛線,第一個引數是虛線的寬度,第二個引數是虛線之間的間距。預設stroke-dasharray的起始位置在右側,而不是上方,因此,我們需要使用transform逆時針旋轉90°, 這就是第二個circle元素上面transform=”matrix(0,-1,1,0,0,440)”的由來。(iOS 手機上,transform逆時針旋轉90°只會改變圖形外觀,但是其座標起始位置還是右側。因此,更改起始座標可能還需要通過外部容器旋轉控制。)