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

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


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

一、功能说明

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

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

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

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

四、代码实现
typescript 复制代码
// 文件名: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; // 定时器ID

  build() {
    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(); // 清除定时器,确保闪烁停止
  }
}
typescript 复制代码
// 文件名:Index.ets

import { BlinkingButtonPage } from './BlinkingButtonPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      BlinkingButtonPage() // 调用闪烁按钮页面
    }
    .padding(20)
  }
}

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


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

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

七、相关知识点

小结

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


下一篇预告

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


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

作者:SoraLuna

链接:https://www.nutpi.net/thread?topicId=385

來源:坚果派

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关推荐
智驾5 分钟前
Openharmony 和 HarmonyOS 区别?
harmonyos·openharmony
脑极体14 分钟前
寻找AI大模型时代的存力破壁人:华为的行与思
人工智能·华为
别说我什么都不会26 分钟前
【仓颉三方库】工具类——zip4cj & zlib4cj
harmonyos
ghjhjjjbjibh4 小时前
AI大模型 —— 国产大模型 —— 华为大模型
人工智能·华为
我该如何取个名字9 小时前
Mac mini 安装mysql数据库以及出现的一些问题的解决方案
数据库·mysql·macos
高木的小天才12 小时前
鸿蒙中的并发线程间通信、线程间通信对象
前端·华为·typescript·harmonyos
ttumetai14 小时前
MacOS中安装Python(homebrew,pyenv)
python·macos
脑极体16 小时前
开源鸿蒙,给机器人带来了什么?
华为·机器人·开源·harmonyos
Aqua Cheng.16 小时前
25.4.22华为--算法真题整理(2025年4月22日)
java·算法·leetcode·华为·面试
HarmonyOS_SDK17 小时前
意图框架事件推荐方案,精准匹配用户需求
harmonyos