使用 css3 實(shí)現(xiàn)圓形進(jìn)度條的示例
我要評(píng)論在開(kāi)發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩：
1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動(dòng)態(tài)的計(jì)算進(jìn)度條的大?。?/p>
2、在小程序中，canvas的畫(huà)布具有最高的層級(jí)，不易于擴(kuò)展。
但使用css3和js實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問(wèn)題。
注：這篇文章里面使用jquery實(shí)現(xiàn)，但原理是一樣的，在小程序中只要定義并改變相應(yīng)的變量就行了
一、進(jìn)度條樣式的樣式
在平時(shí)的開(kāi)發(fā)中，經(jīng)常使用元素的border來(lái)顯示圓形圖案，在使用css3實(shí)現(xiàn)圓形進(jìn)度條時(shí)，同樣也是使用這個(gè)技巧。為了實(shí)現(xiàn)上面的圓形邊框，動(dòng)態(tài)的覆蓋下面圓形邊框，總共需要一個(gè)圓形，2個(gè)長(zhǎng)方形和2個(gè)半圓形：一個(gè)圓形用來(lái)顯示底層背景，兩個(gè)半圓形用來(lái)覆蓋底層背景顯示進(jìn)度，另外兩個(gè)長(zhǎng)方形用來(lái)覆蓋不需要顯示的進(jìn)度。如下圖：
最下面的bottom圓形是進(jìn)度條的背景，在bottom上面有l(wèi)eft和right兩個(gè)長(zhǎng)方形，用來(lái)覆蓋不要顯示的進(jìn)度條。在兩個(gè)長(zhǎng)方形的里面分別有一個(gè)半圓形用來(lái)顯示進(jìn)度。正常情況下，使用正方形繪制出來(lái)的半圓，直徑和水平下都是有45度夾角的。為了能使兩個(gè)半圓剛好可以覆蓋整個(gè)圓形，就需要使用css3中的rotate使原有正方形旋轉(zhuǎn)，達(dá)到覆蓋整個(gè)背景的效果。如下圖（為了顯示清楚，這里用正方形表示）：
如圖，將長(zhǎng)方形內(nèi)部的半圓向右（順時(shí)針）旋轉(zhuǎn)45度，就可以得到進(jìn)度覆蓋整個(gè)背景的圖像。將半圓向左（逆時(shí)針）旋轉(zhuǎn)135度就能得到只有進(jìn)度條背景的圖像。為什么又要向左旋轉(zhuǎn)，而不是一直向右旋轉(zhuǎn)，當(dāng)然是因?yàn)橐獙?shí)現(xiàn)的效果是：進(jìn)度是從頂部開(kāi)始，順時(shí)走完的。到這里，思路就很清晰了，只需要再按百分比的多少來(lái)控制左邊和右邊進(jìn)度的顯示就可以了。
實(shí)現(xiàn)這部分的html和css代碼如下：
html代碼
<div class="progressbar">
<div class="left-container">
<div class="left-circle"></div>
</div>
<div class="right-container">
<div class="right-circle"></div>
</div>
</div>
css代碼:
.progressbar{
position: relative;
margin: 100px auto;
width: 100px;
height: 100px;
border: 20px solid #ccc;
border-radius: 50%;
}
.left-container,.right-container{
position: absolute;
width: 70px;
height: 140px;
top:-20px;
overflow: hidden;
z-index: 1;
}
.left-container{
left: -20px;
}
.right-container{
right: -20px;
}
.left-circle,.right-circle{
position: absolute;
top:0;
width: 100px;
height: 100px;
border:20px solid transparent;
border-radius: 50%;
transform: rotate(-135deg);
transition: all .5s linear;
z-index: 2;
}
.left-circle{
left: 0;
border-top-color: 20px solid blue;
border-left-color: 20px solid blue;
}
.right-circle{
border-right-color: 20px solid blue;
border-bottom-color: 20px solid blue;
right: 0;
}
二：控制進(jìn)度條的js
為了使進(jìn)度條的邏輯更健壯，js部分的實(shí)現(xiàn)需要考慮四中情況：
1、基礎(chǔ)值個(gè)更改后的值在同在右邊進(jìn)度，
2、基礎(chǔ)值在右邊，更改后的值在左邊，
3、基礎(chǔ)值更改后的值同在左邊，
4、基礎(chǔ)值在左邊，更改后的值在右邊。
不管在那種情況下，核心需要考慮只有兩點(diǎn)：角度的變化和使用時(shí)間的多少。
第一種情況下，比較簡(jiǎn)單，可以很簡(jiǎn)單計(jì)算出角度的變化和使用時(shí)間的多少。首先，需要設(shè)定改變整個(gè)半圓的所需的時(shí)間值。設(shè)定之后，只要根據(jù)比例計(jì)算出改變的角度所需要的時(shí)間值即刻。代碼如下：
time = (curPercent - oldPercent)/50 * baseTime;
//確定時(shí)間值為正
curPercent - oldPercent > 0 ? '' : time = - time;
deg = curPercent/50*180-135;
第二種情況，稍微麻煩一點(diǎn)。因?yàn)橹虚g有一個(gè)從右邊進(jìn)度，到左邊進(jìn)度的過(guò)渡。為了讓進(jìn)度順暢的改變，這里我們需要使用定時(shí)器，在改變完右邊的部分之后，再修改左邊的部分。代碼如下：
//設(shè)置右邊的進(jìn)度
time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
//延時(shí)設(shè)置左邊進(jìn)度條的改變
setTimeout(function(){
time = (curPercent - 50)/50;
deg = (curPercent - 50)/50*180 -135;
$leftBar.css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
}, Math.floor(time*1000));000));
第三種情況和第四種情況同前面情況類(lèi)似，這里不再討論。
完整的控制進(jìn)度條的函數(shù)的代碼如下（使用jQuery實(shí)現(xiàn)）：
/**
*設(shè)置進(jìn)度條的變化
*@param {number} oldPercent 進(jìn)度條改變之前的半分比
*@param {number} curPercent 進(jìn)度條當(dāng)前要設(shè)置的值
*@return {boolean} 設(shè)置成功返回 true，否則，返回fasle
*/
function setProgessbar(oldPercent, curPercent){
var $leftBar = $('#left-bar');
var $rightBar = $('#right-bar');
//將傳入的參數(shù)轉(zhuǎn)換，允許字符串表示的數(shù)字
oldPercent = + oldPercent;
curPercent = + curPercent;
//檢測(cè)參數(shù)，如果不是number類(lèi)型或不在0-100，則不執(zhí)行
if(typeof oldPercent ==='number' && typeof curPercent ==='number'
&& oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){
var baseTime = 1; //默認(rèn)改變半圓進(jìn)度的時(shí)間，單位秒
var time = 0; //進(jìn)度條改變的時(shí)間
var deg = 0; //進(jìn)度條改變的角度
if(oldPercent > 50){//原來(lái)進(jìn)度大于50
if(curPercent>50){
//設(shè)置左邊的進(jìn)度
time = (curPercent - oldPercent)/50 * baseTime;
//確定時(shí)間值為正
curPercent - oldPercent > 0 ? '' : time = - time;
deg = curPercent/50*180-135;
$leftBar .css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
}else{
//設(shè)置左邊的進(jìn)度
time = (oldPercent - 50)/50 * baseTime;
deg = (oldPercent - 50)/50*180-135;
$leftBar .css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
//延時(shí)設(shè)置右邊進(jìn)度條的改變
setTimeout(function(){
time = (50 - curPercent)/50;
deg = (50 - curPercent)/50*180 -135;
$rightBar.css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
}, Math.floor(time*1000));
}
}else{//原來(lái)進(jìn)度小于50時(shí)
if(curPercent>50){
//設(shè)置右邊的進(jìn)度
time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
//延時(shí)設(shè)置左邊進(jìn)度條的改變
setTimeout(function(){
time = (curPercent - 50)/50;
deg = (curPercent - 50)/50*180 -135;
$leftBar.css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
}, Math.floor(time*1000));
}else{
//設(shè)置右邊的進(jìn)度
time = (curPercent - oldPercent)/50 * baseTime;
//確定時(shí)間值為正
curPercent - oldPercent > 0 ? '' : time = - time;
deg = curPercent/50*180-135;
$rightBar .css({
transform: 'rotate('+ deg+ 'deg)',
transition : 'all '+ time + 's linear'
})
}
return true;
}
}else{
return false;
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼
這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼，介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長(zhǎng)度而變化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一2018-01-09
利用css3實(shí)現(xiàn)進(jìn)度條效果及動(dòng)態(tài)添加百分比
這篇文章主要介紹了利用css3實(shí)現(xiàn)進(jìn)度條效果及動(dòng)態(tài)添加百分比，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-06-01css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼
這篇文章主要介紹了css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼,有時(shí)候看一些不錯(cuò)的滾動(dòng)條效果不錯(cuò)，這里給大家分享一下如果用css實(shí)現(xiàn)2020-04-14利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢(shì)詳解
這篇文章主要給大家介紹了利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢(shì)，文中給出了詳細(xì)的示例代碼和圖文介紹，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-21- 很多朋友習(xí)慣使用js實(shí)現(xiàn)閱讀進(jìn)度條功能，今天小編給大家介紹不使用js使用css實(shí)現(xiàn)閱讀進(jìn)度條功能，需要的朋友參考下2017-02-27
css 實(shí)現(xiàn)圓形漸變進(jìn)度條效果的示例代碼
這篇文章主要介紹了css 實(shí)現(xiàn)圓形漸變進(jìn)度條效果的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-24
