遇到了需要做动态水波效果的需求,类似下图
1. 最简单最naive的是只用一张水波图
- 将这个图片挂在一个有mask组件的父节点上,这个父节点可以挂一个圆形的图当做遮罩。注意这个水波图的宽度一定要比圆形的直径长。
- 用代码控制水波图的左右移动,来做水流波动的效果,进度条的位置通过调整其y轴的大小。
- 这种方法很容易实现,但明显的缺点是无法很好的调整水波的状态,可能达不到想要的效果
最终效果:
2. 用动画帧做水波效果
- 用一张包含多个sprite的图片做动画(随便拿了个图),将Texture type 设成Sprite (2D and UI), sprite mode设为multiple
- 打开sprite editor,选取单个sprite所取的大小,生成多个图片序列
- 选取图片序列,拖拽到animation中, 调整位置得到想要的动画效果。
- 和第一个方法一样也是挂在一个有mask组件的父节点上当做遮罩,进度条的位置通过调整其y轴的大小。
最终效果:
3. 用UV动画,在shader里操作。具体可参考:https://gameinstitute.qq.com/community/detail/123918
参考资料:
- https://docs.coronalabs.com/guide/media/spriteAnimation/index.html