鸿蒙特效教程07-九宫格幸运抽奖

fcsyzh03

鸿蒙特效教程07-九宫格幸运抽奖

在移动应用中，抽奖功能是一种常见且受欢迎的交互方式，能够有效提升用户粘性。本教程将带领大家从零开始，逐步实现一个九宫格抽奖效果，适合HarmonyOS开发的初学者阅读。

最终效果预览

我们将实现一个经典的九宫格抽奖界面，包含以下核心功能：

3×3网格布局展示奖品点击中间按钮启动抽奖高亮格子循环移动的动画效果动态变速，模拟真实抽奖过程预设中奖结果的展示

实现步骤

步骤一：创建基本结构和数据模型

首先，我们需要创建一个基础页面结构和定义数据模型。通过定义奖品的数据结构，为后续的九宫格布局做准备。

1. // 定义奖品项的接口
2. interface PrizeItem {
3.   id: number
4.   name: string
5.   icon: ResourceStr
6.   color: string
7. }
9. @Entry
10. @Component
11. struct LuckyDraw {
12.   // 基本页面结构
13.   build() {
14.     Column() {
15.       Text('幸运抽奖')
16.         .fontSize(24)
17.         .fontColor(Color.White)
18.     }
19.     .width('100%')
20.     .height('100%')
21.     .backgroundColor('#121212')
22.   }
23. }

复制代码

在这一步，我们定义了 PrizeItem接口来规范奖品的数据结构，并创建了一个基本的页面结构，只包含一个标题。
步骤二：创建奖品数据和状态管理

接下来，我们添加具体的奖品数据，并定义抽奖功能所需的状态变量。

1. @Entry
2. @Component
3. struct LuckyDraw {
4.   // 定义奖品数组
5.   @State prizes: PrizeItem[] = [
6.     { id: 1, name: '谢谢参与', icon: $r('app.media.startIcon'), color: '#FF9500' },
7.     { id: 2, name: '10积分', icon: $r('app.media.startIcon'), color: '#34C759' },
8.     { id: 3, name: '优惠券', icon: $r('app.media.startIcon'), color: '#007AFF' },
9.     { id: 8, name: '1元红包', icon: $r('app.media.startIcon'), color: '#FF3B30' },
10.     { id: 0, name: '开始\n抽奖', icon: $r('app.media.startIcon'), color: '#FF2D55' },
11.     { id: 4, name: '5元红包', icon: $r('app.media.startIcon'), color: '#5856D6' },
12.     { id: 7, name: '免单券', icon: $r('app.media.startIcon'), color: '#E73C39' },
13.     { id: 6, name: '50积分', icon: $r('app.media.startIcon'), color: '#38B0DE' },
14.     { id: 5, name: '会员卡', icon: $r('app.media.startIcon'), color: '#39A5DC' },
15.   ]
17.   // 当前高亮的奖品索引
18.   @State currentIndex: number = -1
20.   // 是否正在抽奖
21.   @State isRunning: boolean = false
23.   // 中奖结果
24.   @State result: string = '点击开始抽奖'
26.   build() {
27.     // 页面结构保持不变
28.   }
29. }

复制代码

在这一步，我们添加了以下内容：

创建了一个包含9个奖品的数组，每个奖品都有id、名称、图标和颜色属性添加了三个状态变量：

currentIndex：跟踪当前高亮的奖品索引isRunning：标记抽奖是否正在进行result：记录并显示抽奖结果

步骤三：实现九宫格布局

现在我们来实现九宫格的基本布局，使用Grid组件和ForEach循环遍历奖品数组。

1. build() {
2.   Column({ space: 30 }) {
3.     // 标题
4.     Text('幸运抽奖')
5.       .fontSize(24)
6.       .fontWeight(FontWeight.Bold)
7.       .fontColor(Color.White)
9.     // 结果显示区域
10.     Column() {
11.       Text(this.result)
12.         .fontSize(20)
13.         .fontColor(Color.White)
14.     }
15.     .width('90%')
16.     .padding(15)
17.     .backgroundColor('#0DFFFFFF')
18.     .borderRadius(16)
20.     // 九宫格抽奖区域
21.     Grid() {
22.       ForEach(this.prizes, (prize: PrizeItem, index) => {
23.         GridItem() {
24.           Column() {
25.             if (index === 4) {
26.               // 中间的开始按钮
27.               Button({ type: ButtonType.Capsule }) {
28.                 Text(prize.name)
29.                   .fontSize(18)
30.                   .fontWeight(FontWeight.Bold)
31.                   .textAlign(TextAlign.Center)
32.                   .fontColor(Color.White)
33.               }
34.               .width('90%')
35.               .height('90%')
36.               .backgroundColor(prize.color)
37.             } else {
38.               // 普通奖品格子
39.               Image(prize.icon)
40.                 .width(40)
41.                 .height(40)
42.               Text(prize.name)
43.                 .fontSize(14)
44.                 .fontColor(Color.White)
45.                 .margin({ top: 8 })
46.                 .textAlign(TextAlign.Center)
47.             }
48.           }
49.           .width('100%')
50.           .height('100%')
51.           .justifyContent(FlexAlign.Center)
52.           .alignItems(HorizontalAlign.Center)
53.           .backgroundColor(prize.color)
54.           .borderRadius(12)
55.           .padding(10)
56.         }
57.       })
58.     }
59.     .columnsTemplate('1fr 1fr 1fr')
60.     .rowsTemplate('1fr 1fr 1fr')
61.     .columnsGap(10)
62.     .rowsGap(10)
63.     .width('90%')
64.     .aspectRatio(1)
65.     .backgroundColor('#0DFFFFFF')
66.     .borderRadius(16)
67.     .padding(10)
68.   }
69.   .width('100%')
70.   .height('100%')
71.   .justifyContent(FlexAlign.Center)
72.   .backgroundColor(Color.Black)
73.   .linearGradient({
74.     angle: 135,
75.     colors: [
76.       ['#121212', 0],
77.       ['#242424', 1]
78.     ]
79.   })
80. }

复制代码

在这一步，我们实现了以下内容：

创建了整体的页面布局，包括标题、结果显示区域和九宫格区域使用 Grid 组件创建3×3的网格布局使用 ForEach 遍历奖品数组，为每个奖品创建一个格子根据索引判断，为中间位置创建"开始抽奖"按钮，其他位置显示奖品信息为每个格子设置了合适的样式和背景色

步骤四：实现高亮效果和点击事件

接下来，我们要实现格子的高亮效果，并添加点击事件处理。

1. build() {
2.   Column({ space: 30 }) {
3.     // 前面的代码保持不变...
5.     // 九宫格抽奖区域
6.     Grid() {
7.       ForEach(this.prizes, (prize: PrizeItem, index) => {
8.         GridItem() {
9.           Column() {
10.             if (index === 4) {
11.               // 中间的开始按钮
12.               Button({ type: ButtonType.Capsule }) {
13.                 Text(prize.name)
14.                   .fontSize(18)
15.                   .fontWeight(FontWeight.Bold)
16.                   .textAlign(TextAlign.Center)
17.                   .fontColor(Color.White)
18.               }
19.               .width('90%')
20.               .height('90%')
21.               .backgroundColor(prize.color)
22.               .onClick(() => this.startLottery()) // 添加点击事件
23.             } else {
24.               // 普通奖品格子
25.               Image(prize.icon)
26.                 .width(40)
27.                 .height(40)
28.               Text(prize.name)
29.                 .fontSize(14)
30.                 .fontColor(index === this.currentIndex ? prize.color : Color.White) // 高亮时修改文字颜色
31.                 .margin({ top: 8 })
32.                 .textAlign(TextAlign.Center)
33.             }
34.           }
35.           .width('100%')
36.           .height('100%')
37.           .justifyContent(FlexAlign.Center)
38.           .alignItems(HorizontalAlign.Center)
39.           .backgroundColor(index === this.currentIndex && index !== 4 ? Color.White : prize.color) // 高亮时切换背景色
40.           .borderRadius(12)
41.           .padding(10)
42.           .animation({ // 添加动画效果
43.             duration: 200,
44.             curve: Curve.EaseInOut
45.           })
46.         }
47.       })
48.     }
49.     // Grid的其他属性保持不变...
50.   }
51.   // Column的属性保持不变...
52. }
54. // 添加开始抽奖的空方法
55. startLottery() {
56.   // 在下一步实现
57. }

复制代码

在这一步，我们：

为中间的"开始抽奖"按钮添加了点击事件处理方法 startLottery()实现了格子高亮效果：

当格子被选中时（index === this.currentIndex），背景色变为白色，文字颜色变为奖品颜色添加了动画效果，使高亮切换更加平滑

预定义了 startLottery()方法，暂时为空实现

步骤五：实现抽奖动画逻辑

现在我们来实现抽奖动画的核心逻辑，包括循环高亮、速度变化和结果控制。

1. @Entry
2. @Component
3. struct LuckyDraw {
4.   // 前面的状态变量保持不变...
6.   // 添加动画控制相关变量
7.   private timer: number = 0
8.   private speed: number = 100
9.   private totalRounds: number = 30
10.   private currentRound: number = 0
11.   private targetIndex: number = 2 // 假设固定中奖"优惠券"
13.   // 开始抽奖
14.   startLottery() {
15.     if (this.isRunning) {
16.       return // 防止重复点击
17.     }
19.     this.isRunning = true
20.     this.result = '抽奖中...'
21.     this.currentRound = 0
22.     this.speed = 100
24.     // 启动动画
25.     this.runLottery()
26.   }
28.   // 运行抽奖动画
29.   runLottery() {
30.     if (this.timer) {
31.       clearTimeout(this.timer)
32.     }
34.     this.timer = setTimeout(() => {
35.       // 更新当前高亮的格子
36.       this.currentIndex = (this.currentIndex + 1) % 9
37.       if (this.currentIndex === 4) { // 跳过中间的"开始抽奖"按钮
38.         this.currentIndex = 5
39.       }
41.       this.currentRound++
43.       // 增加速度变化，模拟减速效果
44.       if (this.currentRound > this.totalRounds * 0.7) {
45.         this.speed += 10 // 大幅减速
46.       } else if (this.currentRound > this.totalRounds * 0.5) {
47.         this.speed += 5 // 小幅减速
48.       }
50.       // 结束条件判断
51.       if (this.currentRound >= this.totalRounds && this.currentIndex === this.targetIndex) {
52.         // 抽奖结束
53.         this.isRunning = false
54.         this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
55.       } else {
56.         // 继续动画
57.         this.runLottery()
58.       }
59.     }, this.speed)
60.   }
62.   // 组件销毁时清除定时器
63.   aboutToDisappear() {
64.     if (this.timer) {
65.       clearTimeout(this.timer)
66.       this.timer = 0
67.     }
68.   }
70.   // build方法保持不变...
71. }

复制代码

在这一步，我们实现了抽奖动画的核心逻辑：

添加了动画控制相关变量：

timer：用于存储定时器IDspeed：控制动画速度totalRounds：总共旋转的轮数currentRound：当前已旋转的轮数targetIndex：预设的中奖索引

实现了 startLottery()方法：

防止重复点击初始化抽奖状态调用 runLottery()开始动画

实现了 runLottery()方法：

使用 setTimeout创建循环动画更新高亮格子的索引，并跳过中间的开始按钮根据进度增加延迟时间，模拟减速效果根据条件判断是否结束动画递归调用自身形成动画循环

添加了 aboutToDisappear()生命周期方法，确保在组件销毁时清除定时器，避免内存泄漏

完整代码

最后，我们对代码进行完善和优化，确保抽奖功能正常工作并提升用户体验。
完整的代码如下：

1. interface PrizeItem {
2.   id: number
3.   name: string
4.   icon: ResourceStr
5.   color: string
6. }
8. @Entry
9. @Component
10. struct LuckyDraw {
11.   // 定义奖品数组
12.   @State prizes: PrizeItem[] = [
13.     {
14.       id: 1,
15.       name: '谢谢参与',
16.       icon: $r('app.media.startIcon'),
17.       color: '#FF9500'
18.     },
19.     {
20.       id: 2,
21.       name: '10积分',
22.       icon: $r('app.media.startIcon'),
23.       color: '#34C759'
24.     },
25.     {
26.       id: 3,
27.       name: '优惠券',
28.       icon: $r('app.media.startIcon'),
29.       color: '#007AFF'
30.     },
31.     {
32.       id: 8,
33.       name: '1元红包',
34.       icon: $r('app.media.startIcon'),
35.       color: '#FF3B30'
36.     },
37.     {
38.       id: 0,
39.       name: '开始\n抽奖',
40.       icon: $r('app.media.startIcon'),
41.       color: '#FF2D55'
42.     },
43.     {
44.       id: 4,
45.       name: '5元红包',
46.       icon: $r('app.media.startIcon'),
47.       color: '#5856D6'
48.     },
49.     {
50.       id: 7,
51.       name: '免单券',
52.       icon: $r('app.media.startIcon'),
53.       color: '#E73C39'
54.     },
55.     {
56.       id: 6,
57.       name: '50积分',
58.       icon: $r('app.media.startIcon'),
59.       color: '#38B0DE'
60.     },
61.     {
62.       id: 5,
63.       name: '会员卡',
64.       icon: $r('app.media.startIcon'),
65.       color: '#39A5DC'
66.     },
67.   ]
68.   // 当前高亮的奖品索引
69.   @State currentIndex: number = -1
70.   // 是否正在抽奖
71.   @State isRunning: boolean = false
72.   // 中奖结果
73.   @State result: string = '点击下方按钮开始抽奖'
74.   // 动画定时器
75.   private timer: number = 0
76.   // 动画速度控制
77.   private speed: number = 100
78.   private totalRounds: number = 30
79.   private currentRound: number = 0
80.   // 预设中奖索引（可以根据概率随机生成）
81.   private targetIndex: number = 2 // 假设固定中奖"优惠券"
83.   // 开始抽奖
84.   startLottery() {
85.     if (this.isRunning) {
86.       return
87.     }
89.     this.isRunning = true
90.     this.result = '抽奖中...'
91.     this.currentRound = 0
92.     this.speed = 100
94.     // 启动动画
95.     this.runLottery()
96.   }
98.   // 运行抽奖动画
99.   runLottery() {
100.     if (this.timer) {
101.       clearTimeout(this.timer)
102.     }
104.     this.timer = setTimeout(() => {
105.       // 更新当前高亮的格子
106.       this.currentIndex = (this.currentIndex + 1) % 9
107.       if (this.currentIndex === 4) { // 跳过中间的"开始抽奖"按钮
108.         this.currentIndex = 5
109.       }
111.       this.currentRound++
113.       // 增加速度变化，模拟减速效果
114.       if (this.currentRound > this.totalRounds * 0.7) {
115.         this.speed += 10
116.       } else if (this.currentRound > this.totalRounds * 0.5) {
117.         this.speed += 5
118.       }
120.       // 结束条件判断
121.       if (this.currentRound >= this.totalRounds && this.currentIndex === this.targetIndex) {
122.         // 抽奖结束
123.         this.isRunning = false
124.         this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
125.       } else {
126.         // 继续动画
127.         this.runLottery()
128.       }
129.     }, this.speed)
130.   }
132.   // 组件销毁时清除定时器
133.   aboutToDisappear() {
134.     if (this.timer) {
135.       clearTimeout(this.timer)
136.       this.timer = 0
137.     }
138.   }
140.   build() {
141.     Column({ space: 30 }) {
142.       // 标题
143.       Text('幸运抽奖')
144.         .fontSize(24)
145.         .fontWeight(FontWeight.Bold)
146.         .fontColor(Color.White)
148.       // 结果显示
149.       Column() {
150.         Text(this.result)
151.           .fontSize(20)
152.           .fontColor(Color.White)
153.       }
154.       .width('90%')
155.       .padding(15)
156.       .backgroundColor('#0DFFFFFF')
157.       .borderRadius(16)
159.       // 九宫格抽奖区域
160.       Grid() {
161.         ForEach(this.prizes, (prize: PrizeItem, index) => {
162.           GridItem() {
163.             Column() {
164.               if (index === 4) {
165.                 // 中间的开始按钮
166.                 Button({ type: ButtonType.Capsule }) {
167.                   Text(prize.name)
168.                     .fontSize(18)
169.                     .fontWeight(FontWeight.Bold)
170.                     .textAlign(TextAlign.Center)
171.                     .fontColor(Color.White)
172.                 }
173.                 .width('90%')
174.                 .height('90%')
175.                 .backgroundColor(prize.color)
176.                 .onClick(() => this.startLottery())
177.               } else {
178.                 // 普通奖品格子
179.                 Image(prize.icon)
180.                   .width(40)
181.                   .height(40)
182.                 Text(prize.name)
183.                   .fontSize(14)
184.                   .fontColor(index === this.currentIndex && index !== 4 ? prize.color : Color.White)
185.                   .margin({ top: 8 })
186.                   .textAlign(TextAlign.Center)
187.               }
188.             }
189.             .width('100%')
190.             .height('100%')
191.             .justifyContent(FlexAlign.Center)
192.             .alignItems(HorizontalAlign.Center)
193.             .backgroundColor(index === this.currentIndex && index !== 4 ? Color.White : prize.color)
194.             .borderRadius(12)
195.             .padding(10)
196.             .animation({
197.               duration: 200,
198.               curve: Curve.EaseInOut
199.             })
200.           }
201.         })
202.       }
203.       .columnsTemplate('1fr 1fr 1fr')
204.       .rowsTemplate('1fr 1fr 1fr')
205.       .columnsGap(10)
206.       .rowsGap(10)
207.       .width('90%')
208.       .aspectRatio(1)
209.       .backgroundColor('#0DFFFFFF')
210.       .borderRadius(16)
211.       .padding(10)
212.     }
213.     .width('100%')
214.     .height('100%')
215.     .justifyContent(FlexAlign.Center)
216.     .backgroundColor(Color.Black)
217.     .linearGradient({
218.       angle: 135,
219.       colors: [
220.         ['#121212', 0],
221.         ['#242424', 1]
222.       ]
223.     })
224.     .expandSafeArea() // 颜色扩展到安全区域
225.   }
226. }

复制代码

核心概念解析

1. Grid组件

Grid组件是实现九宫格布局的核心，它具有以下重要属性：

columnsTemplate：定义网格的列模板。'1fr 1fr 1fr'表示三列等宽布局。rowsTemplate：定义网格的行模板。'1fr 1fr 1fr'表示三行等高布局。columnsGap和 rowsGap：设置列和行之间的间距。aspectRatio：设置宽高比，确保网格是正方形。

2. 动画实现原理

抽奖动画的核心是通过定时器和状态更新实现的：

循环高亮：通过 setTimeout定时更新 currentIndex状态，实现格子的循环高亮。动态速度：随着循环轮数的增加，逐渐增加延迟时间（this.speed += 10），实现减速效果。结束条件：当满足两个条件时停止动画：

已完成设定的总轮数（this.currentRound >= this.totalRounds）当前高亮的格子是目标奖品（this.currentIndex === this.targetIndex）

3. 高亮效果

格子的高亮效果是通过条件样式实现的：

1. .backgroundColor(index === this.currentIndex && index !== 4 ? Color.White : prize.color)

复制代码

当格子被选中时（index === this.currentIndex），背景色变为白色，文字颜色变为奖品颜色，产生对比鲜明的高亮效果。
4. 资源清理

在组件销毁时，我们需要清除定时器以避免内存泄漏：

1. aboutToDisappear() {
2.   if (this.timer) {
3.     clearTimeout(this.timer)
4.     this.timer = 0
5.   }
6. }

复制代码

进阶优化思路

完成基本功能后，可以考虑以下优化方向：
1. 随机中奖结果

目前中奖结果是固定的，可以实现一个随机算法，根据概率分配不同奖品：

1. // 根据概率生成中奖索引
2. generatePrizeIndex() {
3.   // 定义各奖品的概率权重
4.   const weights = [50, 10, 5, 3, 0, 2, 1, 8, 20]; // 数字越大概率越高
5.   const totalWeight = weights.reduce((a, b) => a + b, 0);
7.   // 生成随机数
8.   const random = Math.random() * totalWeight;
10.   // 根据权重决定中奖索引
11.   let currentWeight = 0;
12.   for (let i = 0; i < weights.length; i++) {
13.     if (i === 4) continue; // 跳过中间的"开始抽奖"按钮
15.     currentWeight += weights[i];
16.     if (random < currentWeight) {
17.       return i;
18.     }
19.   }
21.   return 0; // 默认返回第一个奖品
22. }

复制代码

2. 抽奖音效

添加音效可以提升用户体验：

1. // 播放抽奖音效
2. playSound(type: 'start' | 'running' | 'end') {
3.   // 根据不同阶段播放不同音效
4. }

复制代码

3. 振动反馈

在抽奖开始和结束时添加振动反馈：

1. // 导入振动模块
2. import { vibrator } from '@kit.SensorServiceKit';
4. // 触发振动
5. triggerVibration() {
6.   vibrator.vibrate(50); // 振动50毫秒
7. }

复制代码

4. 抽奖次数限制

添加抽奖次数限制和剩余次数显示：
[code]@State remainingTimes: number = 3; // 剩余抽奖次数

startLottery() {
  if (this.isRunning || this.remainingTimes