用css動態實現圓環百分比分配——初探css3動畫

stormgens 發布于2019-08-26 12:14 / 2737人閱讀

摘要：鑫大佬這篇博文的重點還是在漸變，而我需要動態平緩連續得實現顏色的分配，比如原本整個環是綠色，然后慢慢地被紅色占了，而且整個過程要平滑。

最近的小程序項目有個設計圖要求做一個圓環，兩種顏色分配，分別代表可用金額和凍結金額。要是就直接這么顯示，感覺好像挺沒水平？？于是我決定做個動態！

在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部分

  
  
  
  

￥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 //紅色區域代表的金額和總金額
  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了。。。

最后，看好小程序，希望各種問題能盡快完善，越來越好。

GPU云服務器云服務器 css3動畫高性能css3動畫 css3 css3氣泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108290.html

用css動態實現圓環百分比分配——初探css3動畫

摘要：鑫大佬這篇博文的重點還是在漸變，而我需要動態平緩連續得實現顏色的分配，比如原本整個環是綠色，然后慢慢地被紅色占了，而且整個過程要平滑。最近的小程序項目有個設計圖要求做一個圓環，兩種顏色分配，分別代表可用金額和凍結金額。要是就直接這么顯示，感覺好像挺沒水平？？于是我決定做個動態！在mdn把新特性gradients(漸變)、transitions(過渡)、 animations(動畫)...

cheukyin 2019-08-29 16:25 評論0 收藏0
css3 制作圓環進度條

摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。引子移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...

xingpingz 2019-08-01 18:28 評論0 收藏0
css3 制作圓環進度條

摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。引子移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...

mzlogin 2019-08-22 14:03 評論0 收藏0
css3 制作圓環進度條

摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。引子移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...

IamDLY 2019-08-29 14:20 評論0 收藏0
初探keyframes-animation

摘要：被稱為關鍵幀，類似于中的關鍵幀。當然之前要對有一丟丟了解的最好。瀏覽器支持情況給出這樣慕課上的簡單鼠標懸浮時有彈動效果自己有調整一下變形與動畫鼠標放在我身上鼠標放在我身上中關于的效果與代碼 keyframes被稱為關鍵幀，類似于flash中的關鍵幀。在Css3中主要以@keyframes坐開頭，后面接著是動畫名稱+{}，{}中就是不同時間段的樣式規則了。當然之前要對transition...

AZmake 2019-08-30 15:45 評論0 收藏0