在上一篇(【UE 材质】制作加载图案)基础上继续实现如下效果的加载图案
效果

步骤
- 复制一份上一篇制作的材质并打开

- 添加"Floor"节点向下取整

除相同的平铺数

此时的效果如下

删除如下节点

通过"Ceil"向上取整,参数"Tiling"默认值设置为12

此时效果如下(圆环从有到无)

我们需要的是从无到有生成圆环,因此取一次反


如果我们希望顺时针旋转,在如下位置处取一次反

在如下位置处取小数得到如下图案

和自身的取反相比取最小值部分,得到更大的间隔

通过"SmoothStep"来控制间隔大小

4舍5入

如果希望中心部分不显示,我们可以乘上中心渐变的部分

将输出的结果和圆环效果相乘得到如下效果

再将输出的结果与旋转相乘

此时效果如下

完整节点如下





参考视频: