简单的实现画任意长度圆弧的DEMO

最近一直在自己瞎捣鼓，也不知怎么思绪就跑到了画图表的上面来了（估计是思绪总是希望能飞一会），然后简单实现了加载进度条的demo

当然这个非常简单就没必要贴源码了

然后又看着360体检那个小球做了个这个

当然这个实现起来也非常简单，做起动画也没什么阻碍

然后障碍就来了，其实就是想做个这个玩意

就是个圈儿，当然是任意长度的圆弧，可以不闭合那种，看起来非常简单，确实也实现了

html代码

<div class="circle_area">
	<div class="circle_empty"></div>
</div>

CSS样式

.circle_area{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin: 30px auto;
	display: flex;
	align-items: center;
	background-color: #00BB99;
}
.circle_empty{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #fff;
	margin: auto;
}
.circle_empty:before,.circle_empty:after{
	content: "";
	display: inline-block;
	background-color: #fff;
	width: 35px;
	height: 70px;
	margin-top: -10px;
}
.circle_empty:before{
	margin-left: -10px;
	transform-origin:right ;
}
.circle_empty:after{
	margin-right: -10px;
	transform-origin: left;
	transform: rotate(70deg);
}

当然这也是非常容易做的，只需要改变各个元素的背景色以及伪元素的旋转角度就可以做出任意圆环

这个时候我就想，作为一个正在研习前端动画的人来说，做个好看的动画多好，然后......

就坑惨我了

当然我在网上确实找到了相关例子，使用canvas也能做，对大神来说似乎也不是个事（但是我不是啊...）

这是网上那个例子：CSS3圆形进度条动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库（想起来了，我就是看这个例子带乱了我的思绪）

所以呢就开始自己瞎捣鼓，两个小时的时间差不多就完成了一个简单DEMO，还没怎么测，也没用什么复杂的东西，只不过是要表达一种思路而已

HTML代码：

<div class="demo">
	<div class="demo_left"></div>
	<div class="demo_center"></div>
	<div class="demo_right"></div>
</div>

名字还没怎么认真取，当然没必要拘泥我这种形式，demo_left和demo_right用伪类也可以

css代码：

	        .demo{
	        	width: 300px;
	        	height: 300px;
	        	display: flex;
	        	position: relative;
	        	background-color: #1E347B;
	        	border-radius: 50%;
	        	overflow: hidden;
	        }
	        .demo_left{
	        	width: 150px;
	        	height: 300px;
	        	position: absolute;
	        	background-color: #fff;
	        	transform-origin: right;
	        	z-index: 9;
	        }
	        .demo_center{
	        	width: 270px;
	        	height: 270px;
	        	position: absolute;
	        	background-color: #fff;
	        	margin: 15px;
	        	border-radius: 50%;
	        	z-index: 12;
	        }
	        .demo_right{
	        	width: 150px;
	        	height: 300px;
	        	position: absolute;
	        	background-color: #fff;
	        	margin-left: 150px;
	        	transform-origin: left;
	        	transform: rotate(35deg);
	        	z-index: 8;
	        }

基本沿袭了静态的思路

最主要的自然是动画控制的方法了，写的比较粗糙，大家凑活着看：

//方法的使用
let demoAnime = (value) => {
 	const angle= value*3.6 > 360 ? 360 : value*3.6;
 	rotateDemo(angle, 0);
}
//实际控制动画效果
let rotateDemo = (angle,deg) => {
	if(deg<=angle){
 		if(deg<180){
 			$(".demo_right").css("transform","rotate(" + deg +"deg)");
 		} else {
 			$(".demo_right").css({
                                    "transform": "rotate(0)",
                                    "z-index": "11",
                                    "background-color": "#1E347B" });
 			$(".demo_left").css("transform","rotate(" + (deg - 180) +"deg)");
 		}
 		deg++;
 		setTimeout(function(){
 			rotateDemo(angle,deg);
 		},10)
 	}
 }

value就是你传入的数值，我这是以百分比显示的，所以value最大是100

下面说一下简单思路

1、先创建一个圆，也就是class="demo"那个圆作为主体

2、再创建一个比刚才小的圆，也就是class="demo_center"使用页面背景色形成圆环，当然这可以不要，你就能画个扇形出来

3、创建一左一右两个块，大小一致，正好挡住demo这个圆，但是center在它俩上面，也就是center的z-index的值最大，初始阶段left的z-index要大于right，left以右侧中心为圆点旋转，right以左侧中心为圆点旋转

4、在这个时候只要设置left与right的旋转角度就可以创建一个圆弧，但是角度不会超过180，毕竟即使left和right叠在一起也占了180度

5、所以当需要显示的角度小于等于180时，只需要转动right就可以

6、但是当你需要显示的角度大于180时，简单转动right肯定是不可行的了，所以此时的处理是将right再转回初始位置，背景颜色与主体那个圆一致，并且要将它放置在left之上了（如果不这么做left再怎么旋转也不会减少角度），然后转动left就能继续增加圆环长度，至此demo完成

当然写这个不是教技术，只是简单记录分享一下我的思路，如果有人正好需要这个东西也很高兴能帮你忙