用css動(dòng)態(tài)實(shí)現(xiàn)圓環(huán)百分比分配——初探css3動(dòng)畫

stormgens 發(fā)布于2019-08-26 12:14 / 2750人閱讀

摘要：鑫大佬這篇博文的重點(diǎn)還是在漸變，而我需要?jiǎng)討B(tài)平緩連續(xù)得實(shí)現(xiàn)顏色的分配，比如原本整個(gè)環(huán)是綠色，然后慢慢地被紅色占了，而且整個(gè)過(guò)程要平滑。

最近的小程序項(xiàng)目有個(gè)設(shè)計(jì)圖要求做一個(gè)圓環(huán)，兩種顏色分配，分別代表可用金額和凍結(jié)金額。要是就直接這么顯示，感覺(jué)好像挺沒(méi)水平？？于是我決定做個(gè)動(dòng)態(tài)！

在mdn把新特性gradients(漸變)、transitions(過(guò)渡)、 animations(動(dòng)畫) 都看了一遍，不禁感嘆css牛逼！這三個(gè)新特性加上canvas，仿佛一瞬間有了正面剛js的能耐。用js很難過(guò)渡得那么完美，而且瀏覽器的css渲染明顯比用js性能好得多。
然后看了張?chǎng)涡瘢▊髡f(shuō)中玩轉(zhuǎn)css的那個(gè)男人）的一篇關(guān)于圓環(huán)的博文，拍案叫絕。鏈接=>3種純CSS實(shí)現(xiàn)中間鏤空的12色彩虹漸變圓環(huán)方法
只能說(shuō)服氣！除了靈活運(yùn)用各種css特性之外,鑫大佬最讓我佩服的是他的創(chuàng)造性思維。會(huì)讓你不禁感嘆：臥槽，還有這種操作？！想到了高中物理老師每次裝完逼講的一句話：思想有多遠(yuǎn)，就能走多遠(yuǎn)。

雖然demo跟我的需求不太一樣，問(wèn)題還是沒(méi)有解決，但我認(rèn)真看完之后還是學(xué)會(huì)了很多，對(duì)我后面的代碼幫助很大。鑫大佬這篇博文的重點(diǎn)還是在漸變，而我需要?jiǎng)討B(tài)平緩連續(xù)得實(shí)現(xiàn)顏色的分配，比如原本整個(gè)環(huán)是綠色，然后慢慢地60%被紅色占了，而且整個(gè)過(guò)程要平滑。跟我的需求最接近的就是倒計(jì)時(shí)那個(gè)demo，linear-gradient線性漸變實(shí)現(xiàn)的多彩圓環(huán)demo，但不是連續(xù)的過(guò)程，而是通過(guò)剪裁，每次剪30度。

看了其他一些博客分享，好像也沒(méi)有找到合適的，那沒(méi)辦法了...只能自己想一個(gè)！
因?yàn)樵賹戇@個(gè)demo的時(shí)候，發(fā)現(xiàn)小程序和H5在css表現(xiàn)上還是有些差異（具體有哪些差異，在文末總結(jié)），所以還是貼H5代碼好了。

不多說(shuō)，直接上代碼

代碼部分

//html部分

  
  
  
  

￥4500/￥5000

//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 //紅色區(qū)域代表的金額和總金額
  var percent = red / total
  var right = document.getElementsByClassName("circle-right")[0]
  var left = document.getElementsByClassName("circle-left")[0]
  if (percent <= 0.5) {  //紅色區(qū)域不超過(guò)一半
    right.style.transform = `rotate(${percent * 360}deg)`
  } else {    //紅色區(qū)域超過(guò)一半的情況，重點(diǎn)部分
    right.style.transform = `rotate(180deg)`
    right.style.transition = `opacity 0s step-end 1s, transform 1s linear` //timing-function需要設(shè)為linear來(lái)達(dá)到視覺(jué)上的平緩過(guò)渡
    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: 結(jié)束
con=>condition: degree<=180?
op1=>operation: 右綠旋轉(zhuǎn)
op2=>operation: 右綠旋轉(zhuǎn)180度，opacity變?yōu)?，然后左綠旋轉(zhuǎn)

st->con
con(yes)->op1->e
con(no)->op2->e

難點(diǎn)在于紅色區(qū)域大于一半的情況，左右綠色半圓的銜接，過(guò)渡要自然，不能讓人看出什么明顯的破綻。
**這種情況我的做法是：4個(gè)半圓(紅綠各兩個(gè))的z-index設(shè)為左紅<左綠<右紅<右綠
兩個(gè)綠半圓的transform的time-function（時(shí)間函數(shù)）統(tǒng)一設(shè)為linear（線性）。右綠旋轉(zhuǎn)180度（1秒）后opacity立即變成0（時(shí)間函數(shù)step-end），這樣就不會(huì)擋住左紅露出。然后左綠開始轉(zhuǎn)（transform延遲1秒執(zhí)行，因?yàn)橐却揖G轉(zhuǎn)完），它轉(zhuǎn)的時(shí)間要根據(jù)度數(shù)動(dòng)態(tài)控制，比如總共要轉(zhuǎn)270度，右綠轉(zhuǎn)了180度，所以左綠只需要轉(zhuǎn)90度。這就好辦了，為了保持右綠的旋轉(zhuǎn)速度，時(shí)間和度數(shù)要成比例，右綠轉(zhuǎn)180度用1s，左綠轉(zhuǎn)90度只能用0.5s

優(yōu)點(diǎn)

1. 不需要js代碼動(dòng)態(tài)實(shí)現(xiàn)動(dòng)畫（js只用來(lái)計(jì)算度數(shù)和觸發(fā)transition）
2. 因?yàn)閷?duì)js幾乎沒(méi)什么依賴，瀏覽器內(nèi)核直接渲染，性能較好，過(guò)渡自然
3. 代碼量很少

不足

1. 因?yàn)槭莄ss3的屬性，兼容不會(huì)太好
2. 時(shí)間函數(shù)只能用線性linear，用默認(rèn)的ease（不勻速）會(huì)銜接不上
3. 只能兩種顏色分布，再加一種的話行不通

有更好辦法實(shí)現(xiàn)相同效果的大佬，歡迎留言！

問(wèn)題探究&解決

雖然效果圖gif畫質(zhì)有點(diǎn)感人，但還是可以發(fā)現(xiàn)一個(gè)問(wèn)題：內(nèi)環(huán)邊緣明顯很粗糙！這個(gè)要怎么解決呢？
中間這個(gè)透明遮罩的代碼是`-webkit-mask: radial-gradient(transparent 150px, #000 150px);
我的做法就是把transparent 150px改成transparent 148px，就是說(shuō)空出一兩個(gè)像素點(diǎn)，讓粗糙的部分虛化。
至于為什么會(huì)出現(xiàn)粗糙，額。。。我覺(jué)得是150px這一層上了太多顏色，加上本來(lái)畫弧圈就沒(méi)有防鋸齒處理，色素點(diǎn)可能會(huì)擁擠，加劇了鋸齒狀這種效果。具體是什么原因，或者有更好的解決辦法，歡迎大佬指教。

修改后的效果圖

是不是明顯好很多~

上文提到的小程序的css和h5的差異,經(jīng)過(guò)再一次的實(shí)驗(yàn)，發(fā)現(xiàn)不是小程序內(nèi)核渲染的問(wèn)題，應(yīng)該是微信開發(fā)者工具顯示的問(wèn)題。。。希望盡快能得到改善，不然對(duì)開發(fā)人員影響挺大的

這個(gè)info的盒子margin-top負(fù)數(shù)在工具中顯示翻不上去，但內(nèi)容50000上去了.
過(guò)了幾秒再點(diǎn)（啥都沒(méi)干），這個(gè)info的盒子又跑到這里來(lái)

為了驗(yàn)證這個(gè)info的盒子到底有沒(méi)有上去，我加了一個(gè)紅色的盒子，發(fā)現(xiàn)并沒(méi)有被info盒子擠掉

取消info的margin-top屬性，紅色的盒子被擠掉，內(nèi)容50000也下來(lái)了

終于！！！原來(lái)都是開發(fā)者工具擺的烏龍，其實(shí)info盒子一直在上面，只是調(diào)試不能正常顯示他的位置。。。

話說(shuō)回來(lái)，小程序不能獲取DOM節(jié)點(diǎn)操作DOM，突然覺(jué)得只能數(shù)據(jù)驅(qū)動(dòng)，不能操作DOM節(jié)點(diǎn)有時(shí)也挺麻煩的，transition那些需要?jiǎng)討B(tài)改的樣式只能寫到style了。。。

最后，看好小程序，希望各種問(wèn)題能盡快完善，越來(lái)越好。