Unity圓環進度條製作

最近有個在unity中製作圓環進度條的需求，並在圓中顯示進度數值，類似於圖1：

圖1. 圓環進度條

平時製作直線的進度條比較多，突然要求做個圓環的有些不適應。不過，這個需求google一下其實大量的解答就出來，關鍵字"unity circle progress bar"，於是我採用了 unity5 radial progress bar tutorial hd - youtube 這個方法，有興趣的同學可以去看看，接下來我簡要敘述一下製作的方法。

需求製作使用unity5的ugui的新gui組建（ugui自unity4.6版本出現的）。

a). 在選單欄gameobject/ui/canvas，新建canvas，如圖2。

圖2b). 同理，在canvas中新建乙個create/ui/image中新建乙個image，作為canvas子物體，並命名為circleprocessbar，如圖3。

圖3c). 在circleprocessbar中建立乙個image，作為circleprocessbar第乙個子物體，並命名為process。這個image主要的功能是以類似雷達扇形掃瞄形式，作為圓環進度條最核心的基礎gameobject。

i) 在此物體process的image元件中，設定source image為unity自帶的knob；

ii) 在color中隨便選擇一種顏色，本文中選擇

圖4這時候，修改fillamout屬性，就可以做成類似雷達扇形掃瞄的進度，如圖5。但是我們希望是圓環，並不是扇形。

圖5d). 在circleprocessbar中再建立乙個image，作為circleprocessbar第二個子物體，並命名為innercircle。該物體的作用是：覆蓋前面的process，將扇形進度變成圓環進度。將圖3中的assets中innercircle.png拖入image元件的sourceimage中，並將size設定為:

該物體的用作是：顯示圓環進度值。為能夠清楚顯示，調整indicator的屬性。

recttransform.scale : , 

character.fontstyle : 55,
paragraph.alignment : ("center", "middle"),
color               : 
}

圖6f). 新建c#指令碼-circleprocess.cs，並拖至物體circleprocessbar，作為其的乙個指令碼元件。

i) 宣告在unity設定的屬性：

[serializefield]

float speed;
[serializefield]
transform processtrans;
[serializefield]
transform indicatortrans;

iii) 編寫update函式，是的環形進度在設定目標進度後settargetprocess之後，能夠有一段時間的動畫。

// update is called once per frame

void update () 
}

圖7

css3 製作圓環進度條

移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...

css3 製作圓環進度條

移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...

Vue React圓環進度條

資料展示，一直是各行各業樂此不疲的需求，具體到前端開發行業，則是各種各種圖表資料展示，各種 資料展示，煩不勝煩 繁不勝繁 前幾天剛做了折線圖 柱狀圖 餅狀圖之類的圖表資料展示效果，今天又碰到了類似圓環進度條的展示效果。天天跟資料打交道，天天跟介面打交道，專案做了不少，菜逼還是菜逼，都是淚啊！其實說白...