鸿蒙应用开发项目实战抽奖

### 鸿蒙应用开发实战：抽奖功能实现 #### Canvas 组件绘制抽奖圆盘 为了创建一个视觉吸引人的抽奖界面，开发者通常会选择使用 `Canvas` 组件来绘制圆形转盘。通过设置不同的颜色和图案分区，可以模拟真实的旋转轮盘效果[^1]。 ```xml <canvas id="lotteryWheel" width="300px" height="300px"></canvas> ``` 在 JavaScript 文件中初始化并配置画布： ```javascript import { canvas } from '@ohos/arkui'; export default { onInit() { this.canvasContext = new canvas.CanvasRenderingContext2D('lotteryWheel'); this.drawLotteryWheel(); }, drawLotteryWheel() { const ctx = this.canvasContext; // 设置中心点坐标 let centerX = 150, centerY = 150; // 定义扇区数量及角度计算 let sectorsCount = 8; let anglePerSector = (Math.PI * 2) / sectorsCount; for(let i=0;i<sectorsCount;i++){ ctx.beginPath(); ctx.moveTo(centerX,centerY); // 计算当前扇区起始位置 let startAngle = i*anglePerSector; let endAngle = (i+1)*anglePerSector; ctx.arc(centerX, centerY, 140, startAngle,endAngle); // 填充不同颜色区分各个区域 ctx.fillStyle = ['#FFB6C1','#ADD8E6'][i%2]; ctx.fill(); ctx.closePath(); } } } ``` #### 显式动画启动抽奖逻辑 当用户触发抽奖事件时，可以通过调用显式的动画方法让转盘快速转动几圈后再慢慢停下指向某个特定奖项的位置。这里采用的是基于时间函数控制速度变化的方式。 ```css @keyframes spin-wheel{ from{transform:rotate(0deg);} to{transform:rotate(var(--final-angle));} /*最终停止的角度*/ } .lottery-spinning{ animation-name:spin-wheel; animation-duration:.7s; animation-timing-function:cubic-bezier(.9,.1,.2,1);/*先加速再减速*/ transform-origin:center center; } ``` JavaScript 控制类名切换以激活 CSS 动画: ```javascript startSpin(){ // ...省略获取随机数算法... document.getElementById('lotteryWheel').classList.add('lottery-spinning'); setTimeout(() => { document.getElementById('lotteryWheel').style.setProperty('--final-angle', `${randomFinalDegree}deg`); document.getElementById('lotteryWheel').addEventListener('animationend', () => { alert(`恭喜获得${prizeName}`); }, false); }); } ``` #### 自定义弹窗显示获奖信息 一旦确定了具体的奖励项，则可通过自定义对话框的形式向玩家展示所赢得的内容。这种方式既直观又友好，能够增强用户体验感。 ```html <div class="popup-mask"> <div class="popup-content"> <h2>恭喜您获得了</h2> <p>{{ prizeDetail }}</p> <button @click="closePopup">确认领取</button> </div> </div> ``` 配合相应的样式调整遮罩层透明度以及居中定位等细节处理即可完成整个交互流程的设计。