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

SoraLuna
发布于 2024-12-23 22:41
浏览
0收藏

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

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

import { BlinkingButtonPage } from './BlinkingButtonPage';

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

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

「Mac畅玩鸿蒙与硬件43」UI互动应用篇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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-12-24 00:01:39修改
收藏
回复
举报
回复
    相关推荐