介绍
在很多应用中，会出现点击按钮出现水波纹的特效。
效果图预览
使用说明
- 进入页面，点击按钮，触发水波纹动画。
- 再次点击按钮，停止水波纹动画。
实现思路
本例涉及的关键特性和实现方案如下：
- 要实现存在两个连续的涟漪，需要两个层叠的Stack分别以一定延迟进行相同的动画。源码参考WaterRipples.ets。
Stack()
.ripplesStyle()
.opacity(this.immediatelyOpacity)
.scale(this.immediatelyScale)
Stack()
.ripplesStyle()
.opacity(this.delayOpacity)
.scale(this.delayScale)
- 通过点击按钮来判断isListening变量，如果为true则添加动画。涟漪动画实际上的效果为透明度0.8->0，半径扩大到6倍的动画，持续时间无限。源码参考WaterRipples.ets。
/** TODO: 知识点：新建两个动画，分别修改两个Stack的属性，设置延迟200ms，展示为两个连续的涟漪，iterations设置为-1表示无限重复
* 高性能知识点：建议使用系统提供的动画接口，如果使用自定义动画，在动画曲线计算过程很容易引起UI线程高负载。
* 参考《减少动画丢帧》文章
* https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/reduce-animation-frame-loss.md/
**/
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut }, () => {this.immediatelyOpacity = 0;this.immediatelyScale = { x: 6, y: 6 };
})
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 200 }, () => {this.delayOpacity = 0;this.delayScale = { x: 6, y: 6 };
})
- 如果isListening为false，则用持续时间为0的动画来打断持续时间无限的动画。源码参考WaterRipples.ets。
// TODO: 知识点：用一个持续时间为0的闭包函数修改所有的变量去打断动画
animateTo({ duration: 0 }, () => {this.immediatelyOpacity = 0.8;this.delayOpacity = 0.8;this.immediatelyScale = { x: 1, y: 1 };this.delayScale = { x: 1, y: 1 };
})
高性能知识点
本例使用了系统提供的动画接口，降低了系统负载，提升动画帧率。
工程结构&模块类型
waterriples // har包|---WaterRipples.ets // 水波纹效果实现页面
模块依赖
不涉及。
参考资料
@显式动画（animateTo）
为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：
如何快速入门：https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识：https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发：https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
》)
)
)
