HarmonyOS NEXT应用开发之听歌识曲水波纹特效案例

介绍

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

效果图预览

使用说明

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

实现思路

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

  1. 要实现存在两个连续的涟漪,需要两个层叠的Stack分别以一定延迟进行相同的动画。源码参考WaterRipples.ets。
Stack()
.ripplesStyle()
.opacity(this.immediatelyOpacity)
.scale(this.immediatelyScale)
Stack()
.ripplesStyle()
.opacity(this.delayOpacity)
.scale(this.delayScale)
  1. 通过点击按钮来判断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 };
})
  1. 如果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

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/285493.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TikTok云手机是什么原理?

社交媒体的快速发展和普及,TikTok已成为全球最受欢迎的短视频平台之一,吸引了数以亿计的用户。在TikTok上,许多用户和内容创作者都希望能够更灵活地管理和运营多个账号,这就需要借助云手机技术。那么,TikTok云手机究竟…

集合系列(十三) -红黑树实现分析详解

一、故事的起因 JDK1.8最重要的就是引入了红黑树的设计(当冲突的链表长度超过8个的时候),为什么要这样设计呢?好处就是避免在最极端的情况下冲突链表变得很长很长,在查询的时候,效率会非常慢。 红黑树查询&…

uniapp自定义导航栏左中右内容和图标,以及点击事件

uniapp自定义导航栏左中右内容和图标&#xff0c;以及点击事件 效果&#xff1a; 页面&#xff1a; <view class"navigation-bar"><view class"navigation-bar-left" click"navigateBack"><u-icon name"arrow-left"…

数学建模(灰色关联度 python代码 案例)

目录 介绍&#xff1a; 模板&#xff1a; 案例&#xff1a;哪些原因影响结婚率 数据标准化&#xff1a; 灰色关联度系数&#xff1a; 完整代码&#xff1a; 结果&#xff1a; 介绍&#xff1a; 灰色关联度是一种多指标综合评价方法&#xff0c;用于分析和评价不同指标之…

【DP】01背包问题与完全背包问题

一、01背包问题 有 N件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整数&…

Email API有哪些主要功能?如何用API发信?

Email API的安全性如何保障&#xff1f;如何选择API进行集成&#xff1f; Email API简化了电子邮件交互的复杂性&#xff0c;让开发者能够轻松地将邮件功能集成到他们的应用中。那么&#xff0c;Email API究竟有哪些主要功能呢&#xff1f;接下来&#xff0c;AokSend将一一探讨…

在Linux搭建Emlog博客结合内网穿透实现公网访问本地个人网站

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…

小迪安全46WEB 攻防-通用漏洞PHP 反序列化原生类漏洞绕过公私有属性

#知识点&#xff1a; 1、反序列化魔术方法全解 2、反序列化变量属性全解 3、反序列化魔术方法原生类 4、反序列化语言特性漏洞绕过 -其他魔术方法 -共有&私有&保护 -语言模式方法漏洞 -原生类获取利用配合 #反序列化利用大概分类三类 -魔术方法的调用…

Backend - Echarts(柱状条形图)

一、下载并安装 &#xff08;一&#xff09;官网 https://echarts.apache.org/zh/index.html &#xff08;二&#xff09;下载依赖 1. 官网里选择下载方式 https://echarts.apache.org/handbook/zh/basics/download/ 2. 官网github方式下载 https://github.com/apache/echa…

如何利用AI助力你的工作,学会这些AI操作秘密,让AI给你打工赚钱

随着科技的进步,AI已逐渐融入我们日常生活的方方面面,成为提升工作效率、拓展个人能力的得力助手。在这个时代,不是AI替代我们,而是那些懂得利用AI的同事将更具竞争力。学会让AI为你“打工”,不仅能够节省时间、提升效率,还能帮助我们发现新机会,实现创新。 AI的优势…

数据结构——认识二叉树

这是一篇回顾二叉树概念的文章 前言&#xff1a;一、了解树形结构1.2 树的定义2.2 树的相关概念2.2 树的表示形式 二、了解二叉树结构和性质2.1 什么是二叉树&#xff1f;2.2 二叉树的性质2.3 二叉树的遍历2.3 二叉树的应用范围2.5 二叉树的优缺点 三、掌握二叉树的存储结构3.1…

关闭 Microsoft Word 2010 配置窗口

关闭 Microsoft Word 2010 配置窗口 References 出现这种问题&#xff0c;主要是安装时所用账户和目前登陆的账户不为同一个账户造成的。或者你进行过覆盖安装或是重新安装过系统&#xff0c;但是 office 的安装目录没有更改。先激活 Microsoft Office&#xff0c;然后执行下列…

springcloud第4季 负载均衡的介绍3

一 loadbalance 1.1 负载均衡的介绍 使用注解loadbalance&#xff0c;是一个客户端的负载均衡器&#xff1b;通过之前已经从注册中心拉取缓存到本地的服务列表中&#xff0c;获取服务进行轮询负载请求服务列表中的数据。 轮询原理 1.2 loadbalance工作流程 loadBalance工作…

-bash: ./1.sh: /bin/bash^M: bad interpreter: No such file or directory解决方法

1、执行脚本 ./1.sh时报如下错误 -bash: ./1.sh: /bin/bash^M: bad interpreter: No such file or directory 2、在Windows编辑的脚本导入Linux系统中&#xff0c;执行报错问题 yum install -y dos2unix 3、或者本地安装 rpm -ivh /mnt/Packages/dos...... 4、然…

opencv各个模块介绍(1)

Core 模块&#xff1a;核心模块&#xff0c;提供了基本的数据结构和功能。 常用的核心函数&#xff1a; cv::Mat&#xff1a;表示多维数组的数据结构&#xff0c;是OpenCV中最常用的类之一&#xff0c;用于存储图像数据和进行矩阵运算。 cv::Scalar&#xff1a;用于表示多通道…

Python综合实战案例-数据清洗分析

写在前面&#xff1a; 本次是根据前文讲解的爬虫、数据清洗、分析进行的一个纵隔讲解案例&#xff0c;也是对自己这段时间python爬虫、数据分析方向的一个总结。 本例设计一个豆瓣读书数据⽂件&#xff0c;book.xlsx⽂件保存的是爬取豆瓣⽹站得到的图书数据&#xff0c;共 6067…

瑞芯微RK3576|触觉智能:开启科技新篇章

更多产品详情可关注深圳触觉智能官网&#xff01; “瑞芯微&#xff0c;创新不止步&#xff01;”——全新芯片RK3576即将震撼登场。指引科技风潮&#xff0c;创造未来无限可能&#xff01;这款芯片在瑞芯微不断创新和突破的道路上&#xff0c;不仅是对过往成就的完美延续&…

填补市场空白,Apache TsFile 如何重新定义时序数据管理

欢迎全球开发者参与到 Apache TsFile 项目中。 刚刚过去的 2023 年&#xff0c;国产开源技术再次获得国际认可。 2023 年 11 月 15 日&#xff0c;经全球最大的开源软件基金会 ASF 董事会投票决议&#xff0c;时序数据文件格式 TsFile 正式通过&#xff0c;直接晋升为 Apache T…

基于傅里叶描述子的手势动作识别,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

AI之Suno:Suno V3的简介、安装和使用方法、案例应用之详细攻略

AI之Suno&#xff1a;Suno V3的简介、安装和使用方法、案例应用之详细攻略 目录 Suno AI的简介 1、特点与改进&#xff1a; Suno AI的安装和使用方法 1、第一步&#xff0c;让国产大模型—ChatGLM4帮我写一个提示词 2、第二步&#xff0c;将提示词交给Suno v3&#xff0c;…