在日常開發中，經常會有環形進度條UI的效果，例如技能CD時間、加載動畫等，本文將通過材質球節點實現該效果，相較于準備美術素材，這樣的做法更為方便，效果如下：

1.制作環狀效果材質函數

在內容面板右鍵新建材質函數，可以命名為Circle_MF

通過RadialGradientExponential節點，可以制作UV空間內的球形漸變，設置Density參數可以修改邊緣硬度，我們先增加該節點：

接下來修改Density參數為100，看下效果：

然后繪制兩個大小不同的球體，進行相減計算，可得到環形圖案：

然后保存該材質函數，進行下一步操作。

2.制作UI材質球

右鍵新建材質球，可命名為Circle_M，修改Material Domain為User Interface（用戶界面），Blend Mode為Translucent（半透明）

創建節點VectorToRadialValue可將向量繪制為放射狀漸變圖案，并拖入之前創建的材質函數Circle_MF進行相乘，可得如下圖案：

繼續加入Step等節點，讓環形進度可以受到正常數值影響：

但還有一個問題，環形圖案的起始位置是右側，通常應該是上方，需要鏈接VectorToRadialValue的Vector or UVs參數以進行修改。

目前UI材質球這一步就差不多了。

3.鏈接進UI面板

最后新建一個Widget，創建Image并設置Circle_M材質球即可。

---

參考：
https://www.bilibili.com/video/BV1Xa4y1k7Vq