当前位置：首页 > article >正文

「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器

article 2024/12/5 10:43:58

本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后，屏幕上的数字会以滚动动画的形式随机变动，最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
在这里插入图片描述

关键词

UI互动应用
数字滚动
动画效果
状态管理
用户交互

一、功能说明

数字滚动抽奖器应用允许用户点击按钮启动数字滚动动画，最终随机显示一个中奖号码。抽奖结果通过动画和随机数结合的方式呈现，增强了应用的趣味性。

二、所需组件

@Entry 和 @Component 装饰器
Column 布局组件
Text 组件用于显示滚动数字
Button 组件用于用户交互
@State 修饰符用于状态管理
定时器函数 setInterval 和 clearInterval

三、项目结构

项目名称：LotteryApp
自定义组件名称：LotteryPage
代码文件：LotteryPage.ets、Index.ets

四、代码实现

// 文件名：LotteryPage.ets

@Component
export struct LotteryPage {
  @State currentNumber: number = 0; // 当前显示的数字
  @State isRolling: boolean = false; // 是否正在滚动
  private intervalId: number | null = null; // 定时器 ID

  build() {
    Column({ space: 20 }) { // 创建垂直布局容器
      // 显示当前数字
      Text(`${this.currentNumber}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.isRolling ? Color.Gray : Color.Blue)
        .textAlign(TextAlign.Center)
        .margin({ top: 30 });

      // 显示猫咪图片装饰
      Image($r('app.media.cat'))
        .width(85)
        .height(100)
        .borderRadius(5)
        .alignSelf(ItemAlign.Center);

      // 开始或停止抽奖按钮
      Button(this.isRolling ? '停止抽奖' : '开始抽奖')
        .onClick(() => {
          if (this.isRolling) {
            this.stopRolling();
          } else {
            this.startRolling();
          }
        })
        .fontSize(20)
        .backgroundColor(this.isRolling ? Color.Red : Color.Green)
        .fontColor(Color.White)
        .width('60%')
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 开始滚动的方法
  private startRolling() {
    this.isRolling = true;
    this.intervalId = setInterval(() => {
      this.currentNumber = Math.floor(Math.random() * 100); // 生成 0-99 的随机数
    }, 100); // 每 100 毫秒更新数字
  }

  // 停止滚动的方法
  private stopRolling() {
    this.isRolling = false;
    if (this.intervalId !== null) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

// 文件名：Index.ets

import { LotteryPage } from './LotteryPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      LotteryPage() // 调用抽奖页面
    }
    .padding(20)
  }
}