。。。本篇我们主要讲解一下风格化设计如何通过shader来去制作比较细腻的风格细节。再我们往期直播课中，有一些同学做作业遇到一个问题，下图为部分展示效果


上图中可以看到到属性栏出现的效果有些重复，每个属性栏的溶解效果都显得有些死板，缺乏一些灵动感。因此，我们考虑使用溶解材质来改善这种重复感。

更多精彩图片 请登录

更多精彩图片 请登录

然而，发现溶解效果是全方位的，并不是希望的从左到右的溶解效果。为了解决这个问题，需要添加一个遮罩来控制溶解的方向。

更多精彩图片 请登录

更多精彩图片 请登录

经过调整，整体效果比之前好了一些，但溶解的范围难以控制，并且整体动态稍微差了一点。这时候，可以考虑第二种方法，即创建一个不同溶解效果的Shader。

使用ase创建了一个着色器，并进行了以下属性设置。

更多精彩图片 请登录

更多精彩图片 请登录

模式设置图接着，创建了一个用于控制溶解形状的噪声，并将其应用于坐标和流动信息UV。截图如下所示。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

编译以后，以shader创建一个材质，在场景创建一个quad，会得到下面的效果

更多精彩图片 请登录

更多精彩图片 请登录

现在，就可以添加溶解效果了，这需要使用到step节点进行连接。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

缺少了控制颜色的地方，最后再把颜色加上，这里可需要先连接W在把颜色链接到xyz上，不然有几率会W通道会被占用

更多精彩图片 请登录

更多精彩图片 请登录

最后，观察整体效果，发现溶解的动态效果也相当不错。今天仅介绍了硬边溶解，如果需要控制溶解边缘的羽化效果，可以自行添加。总结：如果常规的溶解着色器无法满足需求，就需要学习如何自己制作着色器，或者寻求TA和程序同事的帮助，来实现期望的效果。
本期分享就到这里，如果你想学习更丰富的UI动效设计，欢迎来了解我们的动效课程《Unity项目全流程动效班3期》

更多精彩图片 请登录

课程开课时间有所调整，具体以咨询为准也欢迎您加入到我们的动效交流群

更多精彩图片 请登录

更多精彩图片 请登录

群里有多个大厂HR，提供更多的UI、动效、交互工作岗位我是Leo，快跟我一起了解游戏动效吧！

。。。本篇我们主要讲解一下风格化设计如何通过shader来去制作比较细腻的风格细节。再我们往期直播课中，有一些同学做作业遇到一个问题，下图为部分展示效果


上图中可以看到到属性栏出现的效果有些重复，每个属性栏的溶解效果都显得有些死板，缺乏一些灵动感。因此，我们考虑使用溶解材质来改善这种重复感。

更多精彩图片 请登录

更多精彩图片 请登录

然而，发现溶解效果是全方位的，并不是希望的从左到右的溶解效果。为了解决这个问题，需要添加一个遮罩来控制溶解的方向。

更多精彩图片 请登录

更多精彩图片 请登录

经过调整，整体效果比之前好了一些，但溶解的范围难以控制，并且整体动态稍微差了一点。这时候，可以考虑第二种方法，即创建一个不同溶解效果的Shader。

使用ase创建了一个着色器，并进行了以下属性设置。

更多精彩图片 请登录

更多精彩图片 请登录

模式设置图接着，创建了一个用于控制溶解形状的噪声，并将其应用于坐标和流动信息UV。截图如下所示。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

编译以后，以shader创建一个材质，在场景创建一个quad，会得到下面的效果

更多精彩图片 请登录

更多精彩图片 请登录

现在，就可以添加溶解效果了，这需要使用到step节点进行连接。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

缺少了控制颜色的地方，最后再把颜色加上，这里可需要先连接W在把颜色链接到xyz上，不然有几率会W通道会被占用

更多精彩图片 请登录

更多精彩图片 请登录

最后，观察整体效果，发现溶解的动态效果也相当不错。今天仅介绍了硬边溶解，如果需要控制溶解边缘的羽化效果，可以自行添加。总结：如果常规的溶解着色器无法满足需求，就需要学习如何自己制作着色器，或者寻求TA和程序同事的帮助，来实现期望的效果。
本期分享就到这里，如果你想学习更丰富的UI动效设计，欢迎来了解我们的动效课程《Unity项目全流程动效班3期》

更多精彩图片 请登录

课程开课时间有所调整，具体以咨询为准也欢迎您加入到我们的动效交流群

更多精彩图片 请登录

更多精彩图片 请登录

群里有多个大厂HR，提供更多的UI、动效、交互工作岗位我是Leo，快跟我一起了解游戏动效吧！