近来的小顺序项目有个设计图请求做一个圆环，两种色彩分派，离别代表可用金额和凝结金额。如果就直接这么显现，以为彷佛挺没程度？？因而我决议做个动态！
在mdn把新特征gradients(渐变)、transitions(过渡)、 animations(动画) 都看了一遍，不禁叹息css牛逼！这三个新特征加上canvas，似乎一瞬间有了正面刚js的本事。用js很难过渡得那末圆满，而且浏览器的css衬着显著比用js机能好得多。
然后看了张鑫旭（传说中玩转css的谁人男子）的一篇关于圆环的博文，赞不绝口。链接=>3种纯CSS完成中心镂空的12色彩虹渐变圆环要领
只能说信服！除了灵活运用种种css特征以外,鑫大佬最使我信服的是他的创造性思维。会让你不禁叹息：卧槽，另有这类操纵？！想到了高中物理先生每次装完逼讲的一句话：头脑有多远，就能够走多远。
虽然demo跟我的需求不太一样，题目照样没有处置惩罚，但我仔细看完以后照样学会了许多，对我背面的代码协助很大。鑫大佬这篇博文的重点照样在渐变，而我须要动态平缓一连得完成色彩的分派，比方底本全部环是绿色，然后慢慢地60%被赤色占了，而且全部历程要腻滑。跟我的需求最接近的就是倒计时谁人demo，linear-gradient线性渐变完成的多彩圆环demo，但不是一连的历程，而是经由过程剪裁，每次剪30度。
看了其他一些博客分享，彷佛也没有找到适宜的，那没方法了…只能本身想一个！
由于再写这个demo的时刻，发明小顺序和H5在css表现上照样有些差别（详细有哪些差别，在文末总结），所以照样贴H5代码好了。
不多说，直接上代码
代码部份
//html部份
<div class="circle">
<div class="circle-left"></div>
<div class="circle-right"></div>
<div class="circle-bottom-left"></div>
<div class="circle-bottom-right"></div>
</div>
<div class="info">￥4500/￥5000</div>//css部份
.circle {
-webkit-mask: radial-gradient(transparent 150px, #000 150px);
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.circle-left {
width: 50%;
height: 100%;
background: #24B39B;
transform-origin: 100% 50%;
position: absolute;
left: 0;
z-index: 0;
}
.circle-right {
width: 50%;
height: 100%;
background: #24B39B;
transition: transform 1s linear;
transform-origin: 0% 50%;
position: absolute;
right: 0;
z-index: 2;
}
.circle-bottom-left {
width: 50%;
height: 100%;
background: rgb(234, 67, 15);
position: absolute;
left: 0;
z-index: -1;
}
.circle-bottom-right {
width: 50%;
height: 100%;
background: rgb(234, 67, 15);
position: absolute;
right: 0;
z-index: 1;
}
.info {
width: 400px;
height: 400px;
line-height: 400px;
text-align: center;
margin-top: -400px;
}//js代码
window.onload = function () {
var red = 4500, total = 5000 //赤色地区代表的金额和总金额
var percent = red / total
var right = document.getElementsByClassName('circle-right')[0]
var left = document.getElementsByClassName('circle-left')[0]
if (percent <= 0.5) { //赤色地区不凌驾一半
right.style.transform = `rotate(${percent * 360}deg)`
} else { //赤色地区凌驾一半的状况，重点部份
right.style.transform = `rotate(180deg)`
right.style.transition = `opacity 0s step-end 1s, transform 1s linear` //timing-function须要设为linear来到达视觉上的平缓过渡
right.style.opacity = 0
left.style.transition = `transform ${(percent - 0.5) / 0.5}s linear 1s`
left.style.transform = `rotate(${percent * 360 - 180}deg)`
}
}结果图
思绪
st=>start: 最先
e=>end: 完毕
con=>condition: degree<=180?
op1=>operation: 右绿扭转
op2=>operation: 右绿扭转180度，opacity变成0，然后左绿扭转
st->con
con(yes)->op1->e
con(no)->op2->e难点在于赤色地区大于一半的状况，摆布绿色半圆的连接，过渡要天然，不能让人看出什么显著的马脚。
**这类状况我的做法是：4个半圆(红绿各两个)的z-index设为左红<左绿<右红<右绿
两个绿半圆的transform的time-function（时候函数）一致设为linear（线性）。右绿扭转180度（1秒）后opacity马上变成0（时候函数step-end），如许就不会盖住左红显露。然后左绿最先转（transform耽误1秒实行，由于要守候右绿转完），它转的时候要根据度数动态控制，比方总共要转270度，右绿转了180度，所以左绿只须要转90度。这就好办了，为了坚持右绿的扭转速率，时候和度数要成比例，右绿转180度用1s，左绿转90度只能用0.5s
长处
1. 不须要js代码动态完成动画（js只用来盘算度数和触发transition）
2. 由于对js险些没什么依靠，浏览器内核直接衬着，机能较好，过渡天然
3. 代码量很少
不足
1. 由于是css3的属性，兼容不会太好
2. 时候函数只能用线性linear，用默许的ease（不匀速）会连接不上
3. 只能两种色彩散布，再加一种的话行不通
有更好方法完成雷同结果的大佬，迎接留言！
题目探讨&处置惩罚
虽然结果图gif画质有点动人，但照样能够发明一个题目：内环边沿显著很粗拙！这个要怎样处置惩罚呢？
中心这个通明遮罩的代码是`-webkit-mask: radial-gradient(transparent 150px, #000 150px);
我的做法就是把transparent 150px改成transparent 148px，就是说空出一两个像素点，让粗拙的部份虚化。
至于为何会涌现粗拙，额。。。我以为是150px这一层上了太多色彩，加上原本画弧圈就没有防锯齿处置惩罚，色素点可能会拥堵，加重了锯齿状这类结果。详细是什么缘由，或许有更好的处置惩罚方法，迎接大佬指教。
修改后的结果图
是否是显著好许多~
上文提到的小顺序的css和h5的差别,经由再一次的试验，发明不是小顺序内核衬着的题目，应该是微信开发者东西显现的题目。。。愿望尽快能获得改良，不然对开发人员影响挺大的
这个info的盒子margin-top负数在东西中显现翻不上去，但内容50000上去了.
过了几秒再点（啥都没干），这个info的盒子又跑到这里来
为了考证这个info的盒子究竟有无上去，我加了一个赤色的盒子，发明并没有被info盒子挤掉
作废info的margin-top属性，赤色的盒子被挤掉，内容50000也下来了
终究！！！本来都是开发者东西摆的乌龙，实在info盒子一向在上面，只是调试不能一般显现他的位置。。。
话说回来，小顺序不能猎取DOM节点操纵DOM，倏忽以为只能数据驱动，不能操纵DOM节点偶然也挺贫苦的，transition那些须要动态改的款式只能写到style了。。。
末了，看好小顺序，愿望种种题目能尽快完美，越来越好。
