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

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

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

20241127_003802.gif


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

一、功能说明

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


二、所需组件

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

三、项目结构

  • 项目名称LotteryApp
  • 自定义组件名称LotteryPage
  • 代码文件LotteryPage.etsIndex.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)
  }
}

效果示例:用户点击“开始抽奖”按钮后,屏幕上的数字会快速滚动;点击“停止抽奖”按钮,滚动停止并显示一个随机数字作为中奖结果。

20241127_003802.gif


五、代码解读

  • 状态管理@State currentNumber@State isRolling 用于控制数字显示和滚动状态。
  • 滚动逻辑:通过 setInterval 实现快速更新 currentNumber,模拟滚动效果。
  • 动画效果:数字在滚动时使用灰色,停止滚动时使用蓝色,增强视觉效果。
  • 定时器控制clearInterval 确保滚动停止时清理定时器,避免资源泄漏。

六、优化建议

  1. 增加范围设置:允许用户设置随机数字的范围,例如 1-100 或 1-1000。
  2. 增加声音效果:滚动时添加背景音效,停止时播放获奖音效。
  3. 显示历史记录:记录每次抽奖的结果,提供用户参考。

七、相关知识点


小结

通过数字滚动抽奖器的实现,你学会了如何结合定时器和状态管理实现动态数字更新,并将其应用于有趣的互动场景中。此示例轻量实用,适合入门开发者实践。


下一篇预告

在下一篇「UI互动应用篇14 - 随机颜色变化器」中,我们将探索如何通过点击按钮实现界面背景的随机颜色变化,提升用户体验。


上一篇: 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

下一篇: 「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=318
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
7天前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
29 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
2月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
172 68
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
81 13
|
2月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
72 10
|
3月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
64 14
|
6月前
|
iOS开发 MacOS Windows
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
|
4月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
189 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
6月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
172 59
|
5月前
|
机器学习/深度学习 Python
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
本篇将详细介绍如何在Mac系统上安装和配置Anaconda,如何创建虚拟环境,并学习如何使用 `pip` 和 `conda` 管理Python包,直到成功运行第一个Python程序。通过本篇,您将学会如何高效地使用Anaconda创建和管理虚拟环境,并使用Python开发。
165 4
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
|
5月前
|
IDE 开发工具 iOS开发
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置
本篇将详细介绍如何在Mac系统上安装Python,并配置Python开发环境。内容涵盖Python的安装、pip包管理工具的配置与国内镜像源替换、安装与配置PyCharm开发工具,以及通过PyCharm编写并运行第一个Python程序。通过本篇的学习,用户将完成Python开发环境的搭建,为后续的Python编程工作打下基础。
432 2
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置