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

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

---

关键词

• 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; // 定时器 IDbuild() {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.etsimport { LotteryPage } from './LotteryPage';@Entry
@Component
struct Index {build() {Column() {LotteryPage() // 调用抽奖页面}.padding(20)}
}

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

---

五、代码解读

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

---

六、优化建议

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

---

七、相关知识点

• 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

---

小结

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

---

下一篇预告

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

---

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

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

---

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

---