当前位置: 首页 > 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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关文章:

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

本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。 关键词 UI互动应用闪烁动画动态按钮状态管理用户交互 一、功能说明 闪烁按钮效果应用实现了一个动态交互功能&#xf…...

小白爬虫——selenium入门超详细教程

目录 一、selenium简介 二、环境安装 2.1、安装Selenium 2.2、浏览器驱动安装 三、基本操作 3.1、对页面进行操作 3.1.1、初始化webdriver 3.1.2、打开网页 3.1.3、页面操作 3.1.4、页面数据提取 3.1.5、关闭页面 3.1.6、综合小案例 3.2、对页面元素进行操作 3.2.…...

斯坦福李飞飞《AI Agent:多模态交互前沿调查》论文

多模态AI系统很可能会在我们的日常生活中无处不在。将这些系统具身化为物理和虚拟环境中的代理是一种有前途的方式,以使其更加互动化。目前,这些系统利用现有的基础模型作为构建具身代理的基本构件。将代理嵌入这样的环境中,有助于模型处理和…...

Wordpress ElementorPageBuilder插件存在文件读取漏洞(CVE-2024-9935)

免责声明: 本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

多模态视频大模型Aria在Docker部署

多模态视频大模型Aria在Docker部署 契机 ⚙ 闲逛HuggingFace的时候发现一个25.3B的多模态大模型,支持图片和视频。刚好我有H20的GPU所以部署来看看效果,因为我的宿主机是cuda-12.1所以为了防止环境污染采用docker部署,通过一系列的披荆斩棘…...

【网盘系统】递归删除批量文件

为何需要用到递归? 在网盘系统中,文件的类型分为文件和文件夹两种类型。当我们想要批量删除文件时,不乏其中会包含文件夹,而想要删除这个文件夹,自然其中所包含的文件都要删除,而其中所包含的文件也有可能…...

产品转后端?2

产品经理的视角能让你成为更好的后端工程师: 理解业务需求转换为技术方案的过程知道为什么要这样设计API明白数据结构的选择如何影响用户体验了解性能指标对业务的实际影响 在实习过程中可以有意识地向后端倾斜: 常规产品经理工作: "…...

电子商务人工智能指南 2/6 - 需求预测和库存管理

介绍 81% 的零售业高管表示, AI 至少在其组织中发挥了中等至完全的作用。然而,78% 的受访零售业高管表示,很难跟上不断发展的 AI 格局。 近年来,电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...

CSS中要注意的样式效果

1. 应用过渡效果 transition: var(--aa); 2.告诉浏览器元素可能会发生变换,从而优化性能。 will-change: transform; 3.使元素不响应鼠标事件。 pointer-events: none; 4.隐藏水平方向上的溢出内容 overflow-x: hidden; 5.定义一个元素的宽度和高度之间的比…...

CTFshowPHP特性

目录 web89 代码分析 playload web90 代码分析 playload web91 代码分析 playload web92 代码分析 playload web93 代码分析 playload web94 代码分析 playload web95 web96 代码分析 playload web97 代码分析 playload web98 代码分析 playload w…...

基于Springboot+Vue的电子博物馆系统

基于SpringbootVue的电子博物馆系统 前言:随着信息技术的不断发展,传统博物馆的参观方式逐渐向数字化、在线化转型。电子博物馆作为这一转型的重要组成部分,能够通过信息化手段为用户提供更丰富、更便捷的博物馆参观体验。本文基于Spring Boo…...

HarmonyOS:使用HTTP访问网络

HTTP 一、导入http模块 module.json5里添加网络权限 导入http模块 二、创建http请求 创建http请求 import { http } from kit.NetworkKitfunction getNetData() {// 创建数据请求对象let httpRequest http.createHttp() }三、发起请求 请求方法 四、请求示例 GET请求 PO…...

sqlmap --os-shell的原理(MySQL,MSSQL,PostgreSQL,Oracle,SQLite)

1. MySQL 条件 数据库用户需要具备高权限(如 FILE 权限)。数据库服务运行用户需要对目标目录有写权限。Web 服务器有可写目录,且支持执行上传的脚本(如 PHP、JSP 等)。 原理 利用 MySQL 的 SELECT ... INTO OUTFIL…...

浅谈网络安全态势感知

一、基本概念 前美国空军首席科学家Endsley博士给出的动态环境中态势感知的通用定义是: 态势感知是感知大量的时间和空间中的环境要素,理解它们的意义,并预测它们在不久将来的状态。 在这个定义中,我们可以提炼出态势感知的三个要素&#xf…...

【大模型】ChatGPT 提示词优化进阶操作实战详解

目录 一、前言 二、ChatGPT 提示词几个基本的优化原则 2.1 明确的提示词 2.1.1 提示词具体而清晰 2.1.1.1操作案例演示 2.2 确定焦点 2.2.1 操作案例演示 2.3 保持提示词的相关性 2.3.1 什么是相关性 2.3.2 提示词相关性操作案例一 2.3.2 提示词相关性操作案例二 三…...

【计算机网络】实验11:边界网关协议BGP

实验11 边界网关协议BGP 一、实验目的 本次实验旨在验证边界网关协议(BGP)的实际作用,并深入学习在路由器上配置和使用BGP协议的方法。通过实验,我将探索BGP在不同自治系统之间的路由选择和信息交换的功能,理解其在互…...

【Linux系统】System V 的 IPC 机制在 Linux 系统中的实现

System V 的 IPC(Inter-Process Communication,进程间通信) 机制是 UNIX 系统中的一大特色,用于在不同进程之间共享数据或同步操作。Linux 系统完整实现了 System V 的 IPC 机制,并在其基础上进行了优化和扩展。这些机…...

计算机网络安全

从广义来说,凡是涉及到网络上信息的机密性、报文完整性、端点鉴别等技术和理论都是网络安全的研究领域。 机密性指仅有发送方和接收方能理解传输报文的内容,而其他未授权用户不能解密(理解)该报文报文完整性指报文在传输过程中不…...

30.100ASK_T113-PRO 用QT编写视频播放器(一)

1.再buildroot中添加视频解码库 X264, 执行 make menuconfig Target packages -->Libraries --> Multimedia --> X264 CLI 还需要添加 FFmpeg 2. 保存,重新编译 make all 3.将镜像下载开发板...

攻防世界 ctf刷题 新手区1-10

unserialize3 因为我上个笔记写了 php返序列化 所以先趁热打铁 看这个题目名字 我们就知道是 反序列化呀 因为flag有值所以 我们先输个 111 看看有没有线索 没线索但是这边 有个发现就是他是使用get方式传参的 可能他会把我们的输入 进行传入后台有可能进行反…...

DAY35|动态规划Part03|LeetCode:01背包问题 二维、01背包问题 一维、416. 分割等和子集

目录 01背包理论基础(一) 基本思路 C代码 01背包理论基础(二) 基本思路 C代码 LeetCode:416. 分割等和子集 基本思路 C代码 01背包理论基础(一) 题目链接:卡码网46. 携带研究材料 文字…...

三款电容麦的对比

纸面参数 第一款麦克风 灵敏度: -36 dB 2 dB(0 dB1V/Pa at 1 kHz) 灵敏度较低,需要更高的增益来拾取同样的音量。频率响应: 40 Hz - 18 kHz 响应范围较窄,尤其在高频区域。等效噪音级: ≤18 dB(A计权) 噪…...

【实战攻略】如何从零开始快速实现深度学习新想法?——四步走战略

标题 【实战攻略】如何从零开始快速实现深度学习新想法?——四步走战略 【核心结论】 通过四步走战略,即找到baseline论文、深入baseline代码、搭建自己的pipeline、融入核心算法,新手也能快速实现深度学习新想法。 【通俗解释&#xff0…...

Python+OpenCV系列:入门环境搭建、图像读写、像素操作、色彩空间和通道、

入门环境搭建、图像读写、像素操作、色彩空间和通道 **Python与OpenCV环境搭建、图像处理与色彩空间介绍****引言****1. Python和OpenCV的环境搭建****1.1 安装Python和OpenCV****1.2 配置开发环境** **2. 图像的读取、显示与保存****2.1 图像的读取****2.2 图像的显示****2.3 …...

如何在鸿蒙API9和x86模拟器中使用MQTT

目录 引言 安装MQTT软件包 避免MQTT软件包自动升级 程序的编写 运行测试 结语 引言 虽然我的课主要是OpenHarmony南向开发的,但是结课时有个同学说他在写鸿蒙APP时无法将MQTT库加入到设备中,希望我帮忙看看。由于他没有鸿蒙的真机,只能…...

http multipart/form-data 数据如何分块传输是一次传输还是多次

multipart/form-data 是一种用于 HTTP 协议中传输数据的格式,它用于传输数据量较大的数据,如文件等。在 multipart/form-data 中,数据可以被分成多个部分(chunk),这些部分之间通过特定的分隔符进行分隔。 …...

️️耗时一周,肝了一个超丝滑的卡盒小程序

前言 先看看成品效果: 在上个月,我出于提升自己的英语造句能力的目的,想要找一个阅读或者练习造句类的英语学习 APP,但是最终找了几个 APP 不是不太好用就是要付费。于是我转换思路,找到了一本书,叫《36…...

ubuntu的matlab使用心得

1.读取视频 v VideoReader(2222.mp4);出问题,报错: matlab 错误使用 VideoReader/initReader (第 734 行) 由于出现意外错误而无法读取文件。原因: Unable to initialize the video properties 出错 audiovideo.internal.IVideoReader (第 136 行) init…...

vscode插件 live-server配置https

背景:前端有时候需要在本地搭建https环境测试某些内容(如https下访问http资源,下载) 步骤: 1.vscode集成开发软件(应该所有前端开发同学都安装了,我用webstorm,vscode备用) 2.vscode安装live…...

腾讯最新图标点选验证码

注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路 如有侵犯,请联系作者下架 本文识别已同步上线至OCR识别网站: http://yxlocr.nat300.top/ocr/iconclick/9 注意:后续点选验证码内容我不会再讲那么详细,毕竟点选验证训练很多读者都会,而…...

安防视频监控平台Liveweb视频汇聚管理系统管理方案

智慧安防监控Liveweb视频管理平台能在复杂的网络环境中,将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚Liveweb平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…...

VBA信息获取与处理第四个专题第二节:将工作表数据写入VBA数组

《VBA信息获取与处理》教程(版权10178984)是我推出第六套教程,目前已经是第一版修订了。这套教程定位于最高级,是学完初级,中级后的教程。这部教程给大家讲解的内容有:跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互…...

神经网络入门实战:(六)PyTorch 中的实用工具 SummaryWriter 和 TensorBoard 的说明

(一) SummaryWriter 这里先讲解 SummaryWriter ,TensorBoard 会在第二大点进行说明。 SummaryWriter 是 PyTorch 中的一个非常实用的工具,它主要用于将深度学习模型训练过程中的各种日志和统计数据记录下来,并可以与 TensorBoard 配合使用&am…...

SpringBoot的validation参数校验

文章目录 前言一、引入validation 依赖二、validation中的注解说明 (1)Validated(2)Valid(3)NotNull(4)NotBlank(5)NotEmpty(6)Patte…...

RPC与HTTP调用模式的架构差异

RPC(Remote Procedure Call,远程过程调用)和 HTTP 调用是两种常见的通信模式,它们在架构上有以下一些主要差异: 协议层面 RPC:通常使用自定义的二进制协议,对数据进行高效的序列化和反序列化&am…...

R语言机器学习论文(六):总结

文章目录 介绍参考文献介绍 本文采用R语言对来自进行数据描述、数据预处理、特征筛选和模型构建。 最后我们获得了一个能有效区分乳腺组织的随机森林预测模型,它的性能非常好,这意味着它可能拥有非常好的临床价值。 在本文中,我们利用R语言对来自美国加州大学欧文分校的B…...

工业—使用Flink处理Kafka中的数据_ProduceRecord2

使用 Flink 消费 Kafka 中 ProduceRecord 主题的数据,统计在已经检验的产品中,各设备每 5 分钟 生产产品总数,将结果存入HBase 中的 gyflinkresult:Produce5minAgg 表, rowkey“...

【嵌套查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…...

SpringBoot整合JWT

一. JWT简介 1. 什么是JWT? JWT(JSON Web Token)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。 它将用户信息加密到token里,服务器不保存任何用户信息。服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证&…...

使用docker创建cloudstack虚拟主机

文章目录 概要 环境准备: 1.使用rockyLinux:8镜像 2.配置yum源 3.添加vim cloudstack.repo为以下内容 4.前期我们已经搭好了cloudstack平台,这里需要映射几个目录到容器里面, 5.创建Dockerfile 6.构建镜像 7.使用命令创建…...

mybatis-xml映射文件及mybatis动态sql

规范 XML映射文件的名称与Mapper接口名称一致,并且将XML映射文件和Mapper接口放置在相同包下(同包同名)。 XML映射文件的namespace属性为Mapper接口全限定名一致。 XML映射文件中sql语句的id与Mapper接口中的方法名一致,并保持返回类型一致…...

Qt | TCP服务器实现QTcpServer,使用线程管理客户端套接字

点击上方"蓝字"关注我们 01、QTcpServer >>> QTcpServer 是 Qt 网络模块中的一个类,用于实现TCP服务器。它允许创建一个服务器,可以接受来自客户端的连接。QTcpServer 是事件驱动的,这意味着它将通过信号和槽机制处理网络事件。 常用函数 构造函数: QT…...

rustdesk远程桌面使用

文章目录 简介1.客户端rustdesk使用2.基于 S6-overlay 的镜像 服务端部署3.声明 简介 为什么使用rustdesk,因为向日葵,todesk,免费版本的有各种各样的坑,比如限制你的登录,需要你重新登录使用,画面模糊&am…...

C#中图片的Base64编码与解码转换详解

在C#中,我们可以使用Base64编码将图片转换为字符串,也可以将Base64编码的字符串转换回图片。这通常用于在需要文本表示图像数据的场合(例如在Web开发中传输图像数据)。 将图片转换为Base64字符串 要将图片文件转换为Base64字符串…...

瑞芯微方案主板Linux修改系统串口波特率教程,触觉智能RK3562开发板演示

遇到部分串口工具不支持1500000波特率,这时候就需要进行修改,本文以触觉智能RK3562开发板修改系统波特率为115200为例,介绍瑞芯微方案主板Linux修改系统串口波特率教程。 温馨提示:瑞芯微方案主板/开发板串口波特率只支持115200或…...

阿里云整理(二)

阿里云整理 1. 访问网站2. 专业名词2.1 域名2.2 域名备案2.3 云解析DNS2.4 CDN2.5 WAF 1. 访问网站 用户使用浏览器访问网站大体分为几个过程: 用户在浏览器输入域名URL,例如www.baidu.com。 不过,浏览器并不知道为该域名提供服务的服务器具…...

python实现一个简单的不断发送dns查询的功能

the code below: import socket import struct import time import randomdef create_dns_query(domain"example123.com"):# DNS HeaderID random.randint(0, 65535) # 随机查询IDFLAGS 0x0100 # Standard queryQDCOUNT 1 # One questionANCOUNT 0 # …...

鲲鹏麒麟使用Docker部署Redis5

本次部署采用Docker方式进行部署,服务器为鲲鹏服务器,CPU架构为ARM64,操作系统版本信息为 # cat /etc/kylin-release Kylin Linux Advanced Server release V10 (Tercel)镜像 下载镜像鲲鹏麒麟Redis5镜像包 部署 1、上传镜像到服务器 2、…...

MySQL悲观锁和乐观锁

MySQL悲观锁和乐观锁 在数据库中,锁是用来管理并发控制的一种机制,确保数据的一致性和完整性。MySQL中的悲观锁和乐观锁是两种不同的并发控制策略,它们在处理并发事务时采用不同的方法。 悲观锁(Pessimistic Locking&#xff09…...

【AI模型对比】Kimi与ChatGPT的差距:真实对比它们在六大题型中的全面表现!

文章目录 Moss前沿AI语义理解文学知识数学计算天文学知识物理学知识英语阅读理解详细对比列表总结与建议 Moss前沿AI 【OpenAI】获取OpenAI API Key的多种方式全攻略:从入门到精通,再到详解教程!! 【VScode】VSCode中的智能AI-G…...