1、css+js
思路：
1、将环形的圆看成两个半圆；
2、0-50的时候，视觉上是右半圆开始展示进度条，但是在实现上是左半圆开始以右顺时针旋转；
3、50-100的时候，视觉上是左半圆开始展示进度条，但是实现上是右半圆开始向左旋转
4、开始时，右半圆肯定是不显示的，只有在50-100时才显示出来
5、开始时，左半圆肯定要展示的，不然旋转也看不出效果，但是这样左边的旋转就能看出来，所以要一个遮罩将左边遮挡住
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.circle{
height: 200px;
width: 200px;
position: relative;
}
.circle .left ,
.circle .right,
.circle .mask{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
/*将整个矩形切成半矩形*/
clip: rect(0,100px,200px,0);
background-color: #fff;
}
.circle .left ,
.circle .right{
border:10px solid RED;
border-radius: 50%;
}
.circle .right{
/*将应该在右侧的半圆旋转到右边，并且将其隐藏*/
opacity: 0;
transform: rotate(180deg);
}
.trans-rotate{
-webkit-transition: transform .1s ease-in-out;
-moz-transition: transform .1s ease-in-out;
-ms-transition: transform .1s ease-in-out;
-o-transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out;
}
</style>
</head>
<body>
<button id="start"></button>
<div class="circle">
<!--左半圆-->
<div id="left" class="left trans-rotate"></div>
<!--右半圆-->
<div id="right" class="right trans-rotate"></div>
<!--在前面半部分时，左半圆会开始向右边旋转，需要用这个遮挡住左边效果-->
<div id="mask" class="mask"></div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var left = document.getElementById("left");
var right = document.getElementById("right");
var mask = document.getElementById("mask");
var circleInter;
var rangeValue=0;
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue=rangeValue+5;//数字越大进度进展的越快
if(rangeValue<=50){
//左半圆开始向右旋转，有进度条开始的视觉效果
left.style.webkitTransform="rotate("+3.6*rangeValue+"deg)";
//遮罩展示，将左边遮挡住，不让用户看到左边旋转的效果
mask.style.opacity="1";
}else if(rangeValue<=100){
right.style.opacity="1";
//左右半圆开始向左旋转，进度条后半部分
right.style.webkitTransform="rotate("+3.6*rangeValue+"deg)";
//将遮罩去掉，不去掉圆旋转到右边也被遮挡了，会看不到效果；
mask.style.opacity="0";
}else{
clearInterval(circleInter);
}
},100);
})
});
</script>
</body>
</html>
效果展示：（gif出来的有点停顿，真实的还是挺流畅的，哈哈）
IMG_0751.GIF
- svg
使用svg来绘制这种二维图形真的很方便；
思路很简单：使用svg的circle，然后动态修改circle的stroke-dashoffset；进度条就看成circle的stroke；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#circleSvg{
width: 200px;
height: 200px;
stroke-dasharray: 255%;
stroke-dashoffset: 255%;
stroke: red;
fill: none;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<button id="start">svg</button>
<svg id="circleSvg">
<!--cx=圆心横坐标 cy=圆心纵坐标 r=半径 stroke-width=边框的宽度-->
<circle id="circle" cx="50%" cy="50%" r="40%" stroke-width="10%"></circle>
</svg>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var circle = document.getElementById("circle");
var circleInter;
var rangeValue=0;
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue=rangeValue+5;//数字越大进度进展的越快
if(rangeValue<=255){
circle.setAttribute("stroke-dashoffset",255-rangeValue+"%");
}else{
clearInterval(circleInter);
}
},100);
})
});
</script>
</body>
</html>
展示效果和上面css+js完成的基本一样，就不再去弄gif了，偷个懒
3.canvas
canvas画图很方便啦，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<button id="start">svg</button>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var rangeValue=0;
var w = canvas.width;
var h = canvas.height;
var con = canvas.getContext("2d");
var val = {
x:w/2,
y:w/2,
r:w/2-10,
beginAngle:-Math.PI/2,
endAngle:0
};
con.lineWidth = 10;
con.strokeStyle = "red";
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue = rangeValue+5;
if(rangeValue<=360){
draw();
}else{
clearInterval(circleInter);
}
},100);
})
});
function draw(){
con.restore();
con.clearRect(0,0,w,h);
var rangValue = Number(rangeValue);
val.endAngle = val.beginAngle+(rangValue/360)*2*Math.PI;
con.beginPath();
con.arc(val.x,val.y,val.r,val.beginAngle,val.endAngle,false);
con.stroke();
con.save();
}
</script>
</body>
</html>
其实这个是很多动图的原型，比如长按录音时外围的进度条，比如时钟等等的基础都是这个，理解了这个原理很多东西做起来都很顺手了。
网友评论