在UE5中制作UI环形进度条_ue ui 进度条

在日常开发中，经常会有环形进度条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