HarmonyOS 自定义UI之水波纹效果 原创 精华
概述
当点击一个view时,然后一个水波纹就会从点击处扩散开来,模拟水波背景动效实现。
实现思路
任何东西都可以在生活中找到案例,我们要做水波纹效果,就想象一下,每个人应该都有把石头扔进进水里的经历,首先水波是从中心点的小圆慢慢放大为大圆,然后慢慢消失,我们模拟的时候只需要画圆,通过Canvas. drawCircle(float x, float y, float radius, Paint paint); 方法来实现,通过一点点放大半径在根据变化速率设置透明度的方式实现。
效果如下:
实现过程:
通过计算view的最大宽度 / 2为布局的最大半径,最小半径就是0然后给它一个插值动画让它动起来,每次点击就让它绘制圆,圆的半径为 (this.radiusMax * 插值动画比例 ),插值动画比例的变化曲率为 0 - 1 根据比例计算出半径从小到大的大小,代码如下
this.ripplePose的变化曲率为 0 - 1 根据比例计算出半径从小到大的大小,来绘制圆,这里我为什么加 radiusMax2是因为给他一个初始半径,让他不要从圆心开始,这样看起来就比较舒服了, 在点击的时候触发动画,代码如下
效果如下:
但是当我把水波纹应用到 PageSlider 中带有ListContainer 的时候,滑动的时候也会触发水波纹,所以需要解决事件冲突。
事件冲突解决
在添加了长按阴影效果后,在滑动PageSlider 页面的时候listContainer的子item也会触发点击事件,导致各种事件冲突,
解决方法就是 在Touch事件中计算定义出各种事件,各个击破
1.点击事件:抬起时间-按下时间 没有超过200ms
2.长按事件:按下超过200ms
3.长按滑动事件:移动监听里面计算 滑动距离超过20,时间超过200 没有抬起
4.短按滑动事件: 时间少于200ms 距离超过 200px 没有抬起
5.然后处理各种事件,
另外发现,手机点击的时候移动事件会触发,而模拟器不会触发,这个也需要注意!
这样就完成了整个绘制过程,代码如下
效果如下
作者:王江涛
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,共建鸿蒙生态,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
老师这出文章的效率也太高了!