鸿蒙HarmonyOS NEXT实战开发：听歌识曲水波纹特效实现案例

最新推荐文章于 2025-06-25 13:55:29 发布

原创

最新推荐文章于 2025-06-25 13:55:29 发布 · 1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙系统 #鸿蒙 #华为od #android

介绍

在很多应用中，会出现点击按钮出现水波纹的特效。

效果图预览

使用说明

进入页面，点击按钮，触发水波纹动画。
再次点击按钮，停止水波纹动画。

实现思路

本例涉及的关键特性和实现方案如下：

要实现存在两个连续的涟漪，需要两个层叠的Stack分别以一定延迟进行相同的动画。

Stack()
.ripplesStyle()
.opacity(this.immediatelyOpacity)
.scale(this.immediatelyScale)
Stack()
.ripplesStyle()
.opacity(this.delayOpacity)
.scale(this.delayScale)

通过点击按钮来判断isListening变量，如果为true则添加动画。涟漪动画实际上的效果为透明度0.8->0，半径扩大到6倍的动画，持续时间无限。

/** TODO: 知识点：新建两个动画，分别修改两个Stack的属性，设置延迟200ms，展示为两个连续的涟漪，iterations设置为-1表示无限重复
* 高性能知识点：建议使用系统提供的动画接口，如果使用自定义动画，在动画曲线计算过程很容易引起UI线程高负载。
* 参考《减少动画丢帧》文章
* https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/reduce-animation-frame-loss.md/
**/
animateTo({ durat