本期我们从技术实现上讲解一个卡通风格化水花涟漪的制作流程。下图是一个卡通瀑布的的涟漪效果，这种手绘的效果表面上来看像一帧一帧手绘的，其实我们可以通过多种方式实现它。
         

首先，第一个想到的有可能是序列图，这些类似贴图素材可以在网络上都能查找到，这里大概找了几个类似的贴图。     

更多精彩图片 请登录

不同效果的贴图序列帧         
然后使用粒子发射序列图，我们会得到的下图这样的效果，看上去还不错，就是序列感太强。
         

更多精彩图片 请登录

然后通过序列的效果展示后，会发现几个非常明显的问题   

更多精彩图片 请登录

一个是放大以后明显的像素不够，马赛克有点严重，如果不想出现马赛克就只能提高精度，本来一张256的图可能需要放大到1024精度才能达到理想的视觉效果，贴图的大小变大，才可能会解决这个问题。      

更多精彩图片 请登录

即使允许我们使用大贴图，虽然解决了像素的问题，但是还是出现了第二个问题，序列帧不够，动态放慢以后有明显的序列感，而想要提高流畅度就需要再增加一些序列图动态，比如原来4X4的序列，现在需要8X8才有可能解决（大概是24~36帧图），要保持原来的精度就需要再增大一倍    所以序列图的方式虽然是最便捷的，找个序列图就能使用，但是效果并不是最好的，于是我用了另外一种效果来实现，既节省贴图大小又有一个节奏很顺滑的动态。下面是具体的设计步骤。

更多精彩图片 请登录

在max创建一个面片高300宽10        

更多精彩图片 请登录

再通过Bend修改器转换成圆环
      

更多精彩图片 请登录

重置中心坐标
      

更多精彩图片 请登录

加一个UV修改器展开UV看一下，保障外环的点左侧，内环的点在右侧，确认无误后导出模型到Unity中  在Unity引擎中，使用粒子发射模型，参数如下，新建一个材质球给我们我们的粒子上，这里我们使用的是我们《Unity动效技术实现》课程中的动效多功能材质，当然大家也可以找一个具有同样功能的shader使用         

更多精彩图片 请登录

更多精彩图片 请登录

设置一个扩散效果的粒子参数
      

更多精彩图片 请登录

这样就实现了一个圆环的发射效果    然后开始设置材质，材质主贴图和溶解图，溶解功能设置使用粒子自定义属性
         

更多精彩图片 请登录

左边的为主贴图，右边的溶解贴图

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

溶解的自定义参数设置

更多精彩图片 请登录

设置好以后得到的动态效果   
目前来看，动态的效果已经有点接近参考效果了，但是整体动态细节还是有点生硬。现在把粒子暂停到最大，去观看效果，再开启扰动属性         

更多精彩图片 请登录

     
设置好扰动属性我们得到了一个比较顺滑的流动效果，而不是一个硬邦邦的圆环         

更多精彩图片 请登录

开启扰动下的效果
扰动加完以后，就可以直接开启粒子放大缩小效果，现在再看一下下图（这里我没有调整节奏，具体节奏根据自己的需要去调整）         

更多精彩图片 请登录

最终整体效果 （慢放效果）        
总结：      
序列帧和shader功能各有优势和劣势。序列帧可以制作独特的艺术风格效果，具有较大的创作空间，并且不受功能限制。然而，其精度可能不够高，动态效果容易卡顿，并且受到贴图大小和数量的限制。而shader在处理贴图精度要求不高、动画流畅性方面表现较好，但无法制作突出特色的艺术风格效果，且受限于功能支持。因此，选择使用序列帧或shader取决于个人需求和期望的效果。没有绝对的对与错，或者好与不好，只需根据具体情况进行选择。本期技术分享就到这里。如果你想学习更丰富的UI动效设计，欢迎来了解我们的动效课程《Unity项目全流程动效班2期》

更多精彩图片 请登录

我们官网平台还有更多高清动效视频参考资料，您可以关注我们官网乐魔UI，或者想学习动效，也欢迎来到我们的官网，官网里有大厂大佬的动效课程，以及各种免费动效课，还等什么，快来加入我们吧！https://www.lemooui.com

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

也欢迎您加入到我们的动效交流群

更多精彩图片 请登录

更多精彩图片 请登录

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

学习了