「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果

本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。

在这里插入图片描述


关键词
  • UI互动应用
  • 闪烁动画
  • 动态按钮
  • 状态管理
  • 用户交互

一、功能说明

闪烁按钮效果应用实现了一个动态交互功能,主要包括以下特点:

  1. 按钮的颜色会以一定频率变化,形成闪烁效果。
  2. 用户点击按钮后,可以触发停止或恢复闪烁的操作。
  3. 支持多种颜色的按钮闪烁自定义。

二、所需组件
  • @Entry@Component 装饰器
  • Column 布局组件
  • Button 组件用于用户交互
  • @State 修饰符用于状态管理
  • 定时器 setIntervalclearInterval 用于控制动态更新

三、项目结构
  • 项目名称BlinkingButtonApp
  • 自定义组件名称BlinkingButtonPage
  • 代码文件BlinkingButtonPage.etsIndex.ets

四、代码实现
// 文件名:BlinkingButtonPage.ets@Component
export struct BlinkingButtonPage {@State isBlinking: boolean = false; // 按钮闪烁状态@State currentColor: string = '#FF5733'; // 当前按钮颜色private colors: string[] = ["#FFDBDB", "#E1D3FF", "#D7C5FF", "#B3EFD4", "#99E6C1","#FFF6B3", "#FFF399", "#BCCFFF", "#A7BDFF", "#FFE1B3","#FFD699", "#F9BDFF", "#F7A8FF"]; // 闪烁颜色列表private intervalId: number | null = null; // 定时器IDbuild() {Column({ space: 20 }) {// 显示按钮状态,动态绑定isBlinking状态Text(`按钮状态: ${this.isBlinking ? '闪烁中' : '已停止'}`).fontSize(20).alignSelf(ItemAlign.Center);// 闪烁按钮Button('闪烁按钮').backgroundColor(this.currentColor).fontColor(Color.White).fontSize(18).onClick(() => this.toggleBlinking()).width('60%').alignSelf(ItemAlign.Center);// 恢复闪烁按钮Button('恢复默认颜色').onClick(() => this.resetColor()).fontSize(18).backgroundColor(Color.Gray).fontColor(Color.White).width('60%').alignSelf(ItemAlign.Center);// 添加猫咪图片装饰Image($r('app.media.cat')).width(150).height(176).alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').backgroundColor('#F0F0F0').onAppear(() => this.startBlinking());}// 开始按钮闪烁private startBlinking() {if (!this.isBlinking || this.intervalId !== null) {return; // 如果已经在闪烁或者定时器存在,则不再重复启动}this.isBlinking = true; // 开始闪烁this.intervalId = setInterval(() => {const randomIndex = Math.floor(Math.random() * this.colors.length);this.currentColor = this.colors[randomIndex]; // 随机选择颜色}, 500); // 每500毫秒更新颜色}// 停止或恢复按钮闪烁private toggleBlinking() {this.isBlinking = !this.isBlinking; // 切换闪烁状态if (this.isBlinking) {this.startBlinking(); // 开始闪烁} else {this.clearBlinking(); // 停止闪烁}}// 停止闪烁的通用方法private clearBlinking() {if (this.intervalId !== null) {clearInterval(this.intervalId); // 清除定时器this.intervalId = null;}}// 恢复按钮默认颜色并停止闪烁private resetColor() {this.currentColor = '#FF5733'; // 恢复默认颜色this.isBlinking = false; // 停止闪烁this.clearBlinking(); // 清除定时器,确保闪烁停止}
}
// 文件名:Index.etsimport { BlinkingButtonPage } from './BlinkingButtonPage';@Entry
@Component
struct Index {build() {Column() {BlinkingButtonPage() // 调用闪烁按钮页面}.padding(20)}
}

效果示例:按钮以一定频率在不同颜色间切换,用户点击按钮可以暂停或恢复闪烁。

在这里插入图片描述


五、代码解读
  • 动态颜色切换:通过 setInterval 定时器,每隔 500 毫秒随机切换按钮颜色。
  • 状态管理:使用 @State 管理按钮的颜色和闪烁状态。
  • 交互控制:按钮点击后,可以触发停止或恢复闪烁的操作。

六、优化建议
  1. 自定义闪烁频率:增加输入框,允许用户调整闪烁速度。
  2. 多按钮闪烁:支持多个按钮同时闪烁,并提供联动控制功能。
  3. 颜色渐变效果:在颜色切换时加入渐变动画,提升视觉效果。

七、相关知识点
  • 「Mac畅玩鸿蒙与硬件17」鸿蒙 UI 组件篇7 - Animation 组件基础
  • 「Mac畅玩鸿蒙与硬件15」鸿蒙 UI 组件篇5 - Slider 和 Progress 组件

小结

通过闪烁按钮效果的实现,用户可以学习状态管理、定时器控制以及动态颜色切换的技术。这一项目提升了 UI 的交互性,为开发更复杂的动画效果提供了基础。


下一篇预告

在下一篇「UI互动应用篇21 - 随机励志语录生成器」中,我们将带你实现一个根据点击按钮生成励志语录的应用,提升应用的趣味性与互动性。


上一篇: 「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
下一篇: 「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器

作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=385
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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

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

相关文章

智能安全新时代:大语言模型与智能体在网络安全中的革命性应用

一、引言 随着信息技术的飞速发展,网络安全问题日益严重,成为各行各业面临的重大挑战。传统的安全防护措施已难以应对日益复杂的网络威胁,人工智能(AI)技术的引入为网络安全带来了新的希望。特别是大语言模型&#xff…

深度学习(2)前向传播与反向传播

这一次我们重点讲解前向传播与反向传播,对这里还是有点糊涂 前向传播(Forward Propagation)和反向传播(Backward Propagation)是深度学习中神经网络训练的核心过程。它们分别负责计算神经网络的输出以及更新神经网络的…

数据结构——图(遍历,最小生成树,最短路径)

目录 一.图的基本概念 二.图的存储结构 1.邻接矩阵 2.邻接表 三.图的遍历 1.图的广度优先遍历 2.图的深度优先遍历 四.最小生成树 1.Kruskal算法 2.Prim算法 五.最短路径 1.单源最短路径--Dijkstra算法 2.单源最短路径--Bellman-Ford算法 3.多源最短路径--Floyd-…

SSM报错:表现层方法应该返回字符串,但是返回页面

在进行SSM项目时,后端表现层应该返回给前端字符串,但是却跳转页面 1.首先检查是否使用ResponseBody注解 ResponseBody注解 作用:将java对象转为json格式的数据。将controller的方法返回的对象通过适当的转换器转换为指定的格式之后&#xff0…

【openGL入门(一)】

openGL入门(一) OpenGL(Open Graphics Library)GLAD & GLFW通过代码片段滤清流程1. 画面绘制基础2.VAO,VBO,EBO(1) VAO : Vertex Array Object(2) VBO: Vertex Buffer ObjectEBO:Element Buffer Object 总结 OpenG…

DAY2 C++基础补充

作业1: 已知一个数组table,用宏定义求出数组元素的个数。 #define NUM sizeof(table)/sizeof(table[0]) 作业2: 嵌入式系统总是要用户对变量或寄存器进行位操作。给定一个整型变量a,写两段代码,第一个设置a的bit3,第…

图像滤波和卷积的不同及MATLAB应用实例

滤波与卷积在图像处理中都是非常重要的运算,但它们有着明显的区别。以下是滤波与卷积的主要不同点,并附带一个MATLAB实例来展示两者在图像处理中的效果差异。 一、滤波与卷积的不同 定义与目的: 1)滤波:滤波是一种信…

SpringBoot整合knife4j,以及会遇到的一些bug

这篇文章主要讲解了“Spring Boot集成接口管理工具Knife4j怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Spring Boot集成接口管理工具Knife4j怎么用”吧! 一…

回归任务与分类任务应用及评价指标

能源系统中的回归任务与分类任务应用及评价指标 一、回归任务应用1.1 能源系统中的回归任务应用1.1.1 能源消耗预测1.1.2 负荷预测1.1.3 电池健康状态估计(SOH预测)1.1.4 太阳能发电量预测1.1.5 风能发电量预测 1.2 回归任务中的评价指标1.2.1 RMSE&…

在Ubuntu上使用IntelliJ IDEA:开启你的Java开发之旅!

你好,年轻的学徒!🧑‍💻 是时候踏上进入Java开发世界的史诗之旅了,我们的得力助手将是强大的IntelliJ IDEA。准备好了吗?出发吧! 在我们开始之前,我们需要下载这个工具。但是&#…

Burp入门(7)-APP抓包

声明:学习视频来自b站up主 泷羽sec,如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址:burpsuite(5)web网页端抓包与app渗透测试_哔哩哔哩_bilibili 本文详细介绍如何使用burp suite去抓取APP的数据包。 一、安装 Burp 的 CA 证书 1…

【AI+网络/仿真数据集】1分钟搭建云原生端到端5G网络

导语: 近期智慧网络开放创新平台上线了端到端网络仿真能力,区别于传统的网络仿真工具需要复杂的领域知识可界面操作,该平台的网络仿真能力主打一个小白友好和功能专业。 https://jiutian.10086.cn/open/​jiutian.10086.cn/open/ 端到端仿…

学习实验室—招投标实务

在如今业务为王的市场竞争中,招投标的成功率不仅仅取决于方案的质量,更多的是一些“隐形”的诀窍和经验。许多成功的背后,往往隐藏着那些别人不愿提及的细节与技巧。突破盲点,往往意味着“知道与不知道”的差距。 今天&#xff0…

ElasticSearch7.8学习笔记

1. ElasticSearch概述 1.1 ElasticSearch是什么 Elaticsearch,简称为 ES,ES 是一个开源的高扩展的分布式全文搜索引擎,是整个Elastic Stack 技术栈的核心。它可以近乎实时的存储、检索数据;本身扩展性很好,可以扩展到…

AI生成不了复杂前端页面?也许有解决方案了

在2024年,编程成为了人工智能领域最热门的赛道。AI编程技术正以惊人的速度进步,但在生成前端页面方面,AI的能力还是饱受质疑。自从ScriptEcho平台上线以来,我们收到了不少用户的反馈,他们表示:“生成的页面…

k8s部署odoo18(kubeshpere面板)

Postgresql部署 链接: kubesphere搭建 postgres15 因为我的是在另一台服务器使用kubesphere进行部署的,如果有和我一样情况的,可以参考上面的文档部署postgreasql。 注意事项: 因为odoo不允许使用postgresql的默认用户,也就是po…

友思特方案 | 精密制程的光影贴合:半导体制造中的高功率紫外光源

导读 为新能源锂电行业赋能第四站:半导体制造中的高功率紫外光源!稳定输出、灵活控制的曝光设备是新能源/半导体行业高端生产中减少误差、提高效率的核心技术,友思特 ALE 系列 UV LED 紫外光源集合6大优势,为精密制造的健康发展提…

数据结构 (36)各种排序方法的综合比较

一、常见排序方法分类 插入排序类 直接插入排序:通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。希尔排序:是插入排序的一种改进版本,先将整个待排序的记录序列分割成为…

Datawhale AI冬令营 ——如何定制自己的专属大模型?

定制一个自己的专属大模型最方便的步骤 ≈ 指定数据集 开源大模型 微调平台(如讯飞星辰Maas) 内容很开门!very goo( ̄▽ ̄)d! 下面我将演示如何用讯飞星辰Maas平台甄嬛数据集构建Chat-嬛嬛。 …

03_Webpack模块打包工具

03_Webpack模块打包工具 目录 知识点自测 以下哪个选项是 ECMAScript 默认导出和导入的语法? A:export 和 require B:module.exports {} 和 import 变量名 C:export default 和 import 变量名 D:export 和 import {…