css3實作圓環進度條方法

剛開始寫這個圓環的時候是參考帖子上給出的css代碼代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy現成的想法，該動動腦子還是有必要的。

實作原理

css實作圓環的方法很多，我看大部分都是採用邊框（border）+ 裁切（clip：rect（））來實現的，所以我也準備採用這種方式。

主要是佈局問題，我看大部分圓環進度條都大同小異，就是佈局和轉動方式不同

// html 

<p id="loading" class="loading">
    <p class="circle">
        <p class="percent left"></p>
        <p class="percent right wth0"></p>
    </p>
    <p class="per"></p>
</p>

// css 

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 9999;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.circle{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  border:10px solid #fff;
  clip:rect(0,100px,100px,50px);
}
.clip-auto{
  clip:rect(auto, auto, auto, auto);
}
.percent{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  top:-10px;
  left:-10px;
}
.left{
  -webkit-transition:-webkit-transform ease;
  transition:-webkit-transform ease;
  transition:transform ease;
  border:10px solid #E54B00;
  clip: rect(0,50px,100px,0);
}
.right{
  border:10px solid #E54B00;
  clip: rect(0,100px,100px,50px);
}
.wth0{
  width:0;
}

// js


$('.left').animate({
    deg: per*3.6
}, {
    step: function(n, fx) {
        if(per>180){
            $('.circle').addClass('clip-auto');
            $('.right').removeClass('wth0');
        }
        $(this).css({
            "-webkit-transform":"rotate("+n+"deg)",
            "-moz-transform":"rotate("+n+"deg)",
            "transform":"rotate("+n+"deg)"
        });
    },
    duration:500
})

透過對.circle(左右兩側圓環的父元素) 的裁切只顯示左側的圓環，右側的圓環的寬度直接為0 ，當進度條進行到50%的時候，即左側圓環轉動角度為transform: rotate (180deg) ，將.circle 的裁切去掉(.clip-auto)，右邊圓環的寬度恢復。基本就是這個套路。

jQuery的動畫方法animate() 的step屬性

如果只用

$(this).css({
    "-webkit-transform":"rotate("+n+"deg)",
    "-moz-transform":"rotate("+n+"deg)",
    "transform":"rotate("+n+"deg)"
});

來控制角度的轉動，沒有絲毫動畫顯得比較生硬，這時候就要考慮給它加個動畫了，而jq提供的animate 對只有數字值可創建動畫，而字串類型的值無法創建動畫。

這時候需要用到 animate的step屬性了。

step介紹

animate的progress屬性是我們常用的，對數字值的屬性進行操作，但是字串值的屬性卻並不能用它來操作，這時候就需要step屬性了。

step 顧名思義就是對一段動畫進行步驟分解，在animate方法中，每一步具體是怎麼分解的，不是由我們設定的CSS屬性值和動畫時長來決定的，是由系統來決定的。

$(".left").animate({left:50},{
    duration:100,
    step:function(now,fx){
        console.log(now) //控制台输出，看看这个动画被分解成了几个片段
    }
});

這個地方主要是解釋為什麼在這裡給角度賦值，順便說明一下它到底將該值分成多少個片段並不是由我們人為控制的。

step方法的第二個參數－fx

$(".demo").animate({
    first:2,
    second:10
}, {
    step:function(n,fx){
        // 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）；第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。
        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
        // 执行动画的元素：elem;
        // 动画正在改变的属性：prop;
        // 正在改变属性的当前值：now;
        // 正在改变属性的结束值：end;
        // 正在改变属性的单位：unit;等
        
        // 可在这里改变animate第1个参数中设置的属性second在动画结束时的值
        if(fx.prop=="second"){fx.end=5}
        console.log(fx.prop+": "+n);
    },
    duration:2000
})

相關推薦：

詳解canvas實作圓弧、圓環進度條的實例方法

利用CSS clip 實作音訊播放圓環進度條教學實例

#使用css3來製作圓環進度條的實例

#

以上是css3實作圓環進度條方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！