最近的小程序項目有個設計圖要求做一個圓環，兩種顏色分配，分別代表可用金額和凍結金額。要是就直接這么顯示，感覺好像挺沒水平？？於是我決定做個動態！
在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了。。。
最后，看好小程序，希望各種問題能盡快完善，越來越好。