1. 程式人生 > >使用SVG實現圓環loading進度效果

使用SVG實現圓環loading進度效果

效果

這裡寫圖片描述

當我們想實現這樣一個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°只會改變圖形外觀,但是其座標起始位置還是右側。因此,更改起始座標可能還需要通過外部容器旋轉控制。)