当前位置: 首页 > news >正文

「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.lryc.cn/news/500549.html

相关文章:

  • 朗新科技集团如何用云消息队列 RocketMQ 版“快、准、狠”破解业务难题?
  • 【Ubuntu】Ubuntu的Desktop(学习/用户使用)和Bit版本(工作)
  • cmake CMAKE_CURRENT_SOURCE_DIR和CMAKE_CURRENT_LIST_DIR的区别
  • 学会用VSCode debug
  • C语言专题之结构体的使用
  • python中的高阶函数
  • 学习笔记063——通过使用 aspose-words 将 Word 转 PDF 时,遇到的字体改变以及乱码问题
  • SpringBoot整合Mockito进行单元测试超全详细教程 JUnit断言 Mockito 单元测试
  • 【AI知识】过拟合、欠拟合和正则
  • MacOS编译webRTC源码小tip
  • Linux基础命令(三):文件压缩及解压缩命令
  • 目标跟踪算法:ByteTrack、卡尔曼滤波、匈牙利算法、高置信度检测目标、低置信度检测目标
  • [定昌linux系统]如何安装jdk8
  • 【Cadence32】PCB多层板电源、地平面层创建心得➕CM约束管理器Analyze分析显示设置➕“DP”报错DRC
  • 基于SpringBoot+Vue的新闻管理系统
  • 图的割点、割边(Tarjan算法)
  • 算法学习(十四)—— 二叉树的深度搜索(DFS)
  • 【vue2】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天
  • LabVIEW偏心圆筒流变仪测控系统
  • Runloop
  • SpringBoot的Bean类三种注入方式(附带LomBok注入)
  • 开源向量数据库介绍说明
  • 【前端】深度解析 JavaScript 中的 new 关键字与构造函数
  • 2024年华中杯数学建模C题基于光纤传感器的平面曲线重建算法建模解题全过程文档及程序
  • 使用 `typing_extensions.TypeAlias` 简化类型定义:初学者指南
  • 如何快速批量把 PDF 转为 JPG 或其它常见图像格式?
  • 如何在组织中塑造和强化绩效文化?
  • OllyDbg、CE简单介绍
  • Python函数——函数的返回值定义语法
  • 【Pandas】pandas isna