原生JavaScript实现老虎机抽奖动画：从原理到实战

1. 项目概述与核心价值

最近在做一个营销活动页面，产品经理提了个需求，想要一个类似老虎机（Slot Machine）的抽奖效果。这种需求在电商促销、游戏活动、会员积分兑换里太常见了，用户看着滚轮哗啦啦地转，最后停在某个大奖上，那种期待感和视觉冲击力，比静态的“点击抽奖”按钮强太多了。用原生JavaScript来实现这个效果，听起来有点复古，但恰恰是理解动画原理、状态管理和DOM操作的好机会。市面上虽然有很多现成的轮子，比如用Canvas或者配合Three.js做3D效果，但很多时候我们需要的只是一个轻量、可控、易于定制的2D效果，原生JS搭配CSS动画就能做得非常出彩。

这个项目本质上是一个状态机驱动的视觉动画模拟。核心逻辑是控制多个“滚轮”独立或联动旋转，每个滚轮上有一系列奖品项，通过控制旋转速度、加速度、停止顺序和最终结果，来模拟真实老虎机的随机性和戏剧性效果。它涉及到的关键技术点包括：CSS3动画与JavaScript动态控制的结合、基于requestAnimationFrame的精准时序控制、概率算法的设计（保证后台设置的中奖概率能准确映射到前端视觉效果），以及一个清晰的状态管理机制来处理“开始”、“旋转”、“减速”、“停止”等用户交互。对于前端开发者来说，这是一个综合性的练手项目，既能巩固基础，又能接触到一些接近游戏开发的思路。

2. 整体架构设计与思路拆解

接到需求，第一反应不是直接写代码，而是先拆解这个老虎机有哪些组成部分，以及它们之间的联动关系。一个基本的老虎机抽奖页面，可以抽象为以下几个核心模块：

1. 视觉呈现层（View）：也就是用户直接看到的。通常由3到5个并排的“滚轮”组成，每个滚轮是一个纵向无限循环滚动的奖品列表。为了营造“窗口”效果，我们还需要一个固定的遮罩层，只显示中间的几个奖品项（通常是3个），上下被遮挡的部分营造出透视感。每个奖品项可能包含图标、文字、背景色等。

2. 动画控制层（Animation Controller）：这是大脑。它负责接收“开始”指令，然后控制每个滚轮开始以某种速度旋转。旋转不是匀速的，为了模拟真实感，通常会有“加速->匀速->减速->停止”几个阶段。减速停止的过程尤其关键，需要设计得具有随机感和悬念，比如最后一个滚轮会多“挣扎”几下。

3. 逻辑与数据层（Logic & Data）：负责管理奖品池、中奖概率、当前旋转状态以及最终的中奖结果判定。这里有一个关键点：视觉上的随机停止，必须与后台或预设的概率算法结果严格对应。不能是纯前端视觉乱停，否则就失去了抽奖的公平性和可控性。

4. 交互层（Interaction）：主要是“开始抽奖”按钮，以及可能存在的“停止”按钮（在一些设计中允许用户手动停止某个滚轮）。按钮需要与动画控制层通信，并在抽奖过程中合理管理自身的状态（如禁用、显示不同文字）。

基于以上拆解，我决定采用“数据驱动视图”的模式来组织代码。奖品数据是一个数组，视图根据这个数组动态生成每个滚轮的内容。动画控制使用一个独立的类或函数来管理，它通过修改每个滚轮对应的“translateY”值来实现滚动效果，并利用requestAnimationFrame来逐帧更新，这样可以获得最流畅的动画性能，也能精确控制每一帧的行为。

2.1 技术选型背后的考量

为什么不用Canvas或者现成的动画库？这里有几个考量：

• 开发效率与维护成本：对于这种主要是线性移动的UI动画，CSS Transform的性能已经非常优秀，且代码更直观，调试方便。用Canvas固然能做出更炫酷的效果（比如3D、粒子特效），但开发复杂度和代码量会成倍增加，后续修改奖品样式也麻烦。
• 可控性：原生requestAnimationFrame给了我们最高精度的控制权。我们可以轻松实现非匀速运动，比如模拟重力感的“缓动函数”（Easing Function），或者在停止时加入轻微的反弹效果。
• 轻量级：不引入任何第三方库，页面加载速度快，适合嵌入在各种H5活动页面中。

所以，最终的技术栈定为：原生JavaScript + CSS3 Transforms/Transitions + requestAnimationFrame。概率算法部分，为了简单演示，我们会将奖品和概率配置在前端，实际生产环境应由后端接口返回并签名，以防篡改。

3. 核心细节解析与实操要点

3.1 奖品列表的无限循环视觉实现

这是第一个视觉难点。一个滚轮，比如高度为300px，每个奖品项高度100px，那么同时显示3项。当最上面的项向上滚动移出视窗时，我们需要让它瞬间出现在列表的最底部，从而实现无缝的无限滚动错觉。

实现方案：我们会在一个滚轮容器内，放置两份完全相同的奖品列表（A和B），上下拼接。初始时，显示的是列表A的部分。当滚动发生时，我们通过改变容器的transform: translateY值来向上移动整个容器。当列表A完全滚出视窗，列表B刚好完全进入视窗时，我们将translateY值瞬间重置为0（此时列表B在视窗中，位置和最初列表A一样），因为内容相同，用户毫无感知，从而实现了循环。

<!-- 单个滚轮结构示例 --> <div class="reel-container" id="reel1"> <div class="reel-strip"> <!-- 列表A --> <div class="item">奖品1</div> <div class="item">奖品2</div> <div class="item">奖品3</div> <div class="item">奖品4</div> <!-- 列表B，内容与A完全相同 --> <div class="item">奖品1</div> <div class="item">奖品2</div> <div class="item">奖品3</div> <div class="item">奖品4</div> </div> </div>

.reel-container { height: 300px; /* 视窗高度 */ overflow: hidden; /* 隐藏超出部分 */ position: relative; } .reel-strip { position: absolute; top: 0; transition: transform 0s linear; /* 初始无过渡，由JS控制 */ /* 高度是奖品项数量*项高度，这里假设4个项，每项100px，两份就是800px */ } .item { height: 100px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eee; }

关键技巧：在JavaScript中，当translateY的值达到或超过一个列表的高度时（例如-400px，即列表A的高度），就立即将其重置为0，同时减去这个高度值，保证视觉位置的连续性。这个判断和重置操作必须在requestAnimationFrame的每一帧回调中进行。

注意：奖品项的数量需要精心计算。为了保证在任何停止位置，视窗中间显示的三个项都能对齐到完整的奖品项上（而不是在两个项的中间），两份列表的总高度（即所有奖品项高度之和的两倍）需要是单个奖品项高度的整数倍，并且滚轮的初始translateY也需要是负的单个项高度的整数倍。这能确保停止动画时，可以精准地将目标奖品项“吸”到视窗中央。

3.2 基于requestAnimationFrame的动画引擎

这是整个项目的动力核心。我们不能用setInterval，因为它的时间不精确，且与屏幕刷新率不同步，容易导致动画卡顿或跳帧。requestAnimationFrame会在浏览器下一次重绘之前执行回调，完美匹配刷新率（通常是60fps）。

我们需要创建一个动画循环函数，大致逻辑如下：

class ReelAnimation { constructor(reelElement, items) { this.reel = reelElement; // 滚轮DOM元素 this.items = items; // 奖品数组 this.speed = 0; // 当前滚动速度（像素/帧） this.position = 0; // 当前translateY值 this.isSpinning = false; this.targetPosition = 0; // 目标停止位置 this.animationId = null; } // 开始旋转 spin() { this.isSpinning = true; this.speed = 20; // 初始速度 this.animate(); } // 动画循环 animate() { if (!this.isSpinning) return; // 1. 更新位置 this.position -= this.speed; // 向上滚动，所以是减 // 2. 处理循环逻辑（当position超过一个列表高度时重置） const singleStripHeight = this.items.length * 100; // 单个列表总高 if (this.position <= -singleStripHeight) { this.position += singleStripHeight; } // 3. 应用变换 this.reel.style.transform = `translateY(${this.position}px)`; // 4. 速度控制逻辑（例如减速阶段） if (this.isSlowingDown) { this.speed *= 0.98; // 摩擦系数，逐渐减速 if (this.speed < 0.5) { this.speed = 0; this.isSpinning = false; // 精准对齐到目标位置（关键步骤） this.snapToTarget(); return; } } // 5. 继续下一帧 this.animationId = requestAnimationFrame(() => this.animate()); } // 停止旋转，并指定最终停在哪个奖品上 stop(targetItemIndex) { // 计算目标奖品在无限循环列表中的理论位置 // 需要将奖品索引转换为具体的translateY值 this.isSlowingDown = true; // ... 计算this.targetPosition } snapToTarget() { // 使用一个极短的CSS transition来完成最后的“吸附”效果，让停止更自然 this.reel.style.transition = `transform 0.3s ease-out`; this.reel.style.transform = `translateY(${this.targetPosition}px)`; // 动画结束后，移除transition，以便下次由JS完全控制 setTimeout(() => { this.reel.style.transition = 'none'; }, 300); } }

实操心得：在animate函数中，所有对DOM的读写操作（比如获取translateY值，再设置新的）最好集中在一起，避免读写分离导致浏览器强制重排（Reflow），影响性能。我们的例子中，先计算好新的position，最后一次性写入style.transform，是较好的实践。

3.3 概率算法与结果同步

这是业务逻辑的核心。假设我们的奖品池是：[{name: '一等奖', prob: 0.01}, {name: '二等奖', prob: 0.09}, {name: '谢谢参与', prob: 0.9}]。

前端概率模拟：当用户点击开始，我们首先需要根据概率随机出一个结果。一个常见的算法是：

function getRandomPrize(prizes) { const total = prizes.reduce((sum, prize) => sum + prize.prob, 0); let random = Math.random() * total; // 生成一个0到总概率之间的随机数 for (const prize of prizes) { if (random < prize.prob) { return prize; } random -= prize.prob; // 减去当前奖品的概率区间 } // 理论上不会走到这里，除非概率和不为1 return prizes[prizes.length - 1]; }

关键点：这个随机结果必须在动画开始前就确定好，而不是等动画快结束时再随机。动画的所有减速和停止动作，都是为了“演”出这个早已确定的结果。我们需要根据这个结果，反推出每个滚轮最终应该停止在哪一个奖品项上。

对于多滚轮老虎机，通常有两种模式：

1. 独立滚轮：每个滚轮独立随机，最后组合成一个结果（比如三个相同的图标代表大奖）。这种模式下，需要为每个滚轮单独运行一次概率算法。
2. 结果驱动滚轮：先确定最终中奖结果（例如“一等奖”），然后让所有滚轮“配合演出”，最终都停在展示“一等奖”相关的图案上。这种更常见于确定性的奖品发放。

在我们的设计中，采用第二种方式更可控。我们先运行一次getRandomPrize得到最终奖品targetPrize，然后根据targetPrize的索引，计算出每个滚轮需要滚动多少“圈”后，恰好让targetPrize出现在视窗中央。这个计算需要考虑初始位置和循环逻辑。

重要安全提示：上述前端概率仅用于演示和效果模拟。绝对不可用于生产环境的真实抽奖！真实场景下，中奖结果必须由后端可验证的随机算法生成（如使用加密安全的随机数），并通过接口返回给前端，前端只负责展示。同时，应对请求和结果进行签名验证，防止用户篡改或重复请求。这是涉及资金和公平性的红线。

4. 完整实现步骤与代码剖析

下面，我将分步构建一个包含3个滚轮的基础版老虎机。

4.1 HTML结构与CSS样式

首先搭建静态结构。我们创建3个并排的滚轮，每个滚轮有一个固定高度的视窗容器和一个可以滚动的条带。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>老虎机抽奖</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e); color: #fff; padding: 20px; } h1 { margin-bottom: 30px; color: #f8c555; } .slot-machine { display: flex; gap: 15px; background: rgba(255,255,255,0.1); padding: 25px; border-radius: 20px; border: 3px solid #f8c555; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-bottom: 30px; } .reel-container { width: 120px; height: 300px; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0.7); border-radius: 10px; border: 2px solid #444; } /* 上下遮罩，增强“窗口”感 */ .reel-container::before, .reel-container::after { content: ''; position: absolute; left: 0; width: 100%; height: 40%; z-index: 2; pointer-events: none; } .reel-container::before { top: 0; background: linear-gradient(to bottom, rgba(26,26,46,0.9), transparent); } .reel-container::after { bottom: 0; background: linear-gradient(to top, rgba(26,26,46,0.9), transparent); } .reel-strip { position: absolute; top: 0; width: 100%; /* 高度由JS动态设置 */ transition: transform 0s linear; /* 默认无过渡，由JS逐帧控制 */ } .prize-item { height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; border-bottom: 1px dashed rgba(255,255,255,0.2); color: #fff; } .prize-item img { width: 50px; height: 50px; margin-bottom: 8px; object-fit: contain; } .controls { display: flex; flex-direction: column; align-items: center; gap: 15px; } #spinButton { padding: 15px 50px; font-size: 20px; font-weight: bold; color: #16213e; background: linear-gradient(to right, #f8c555, #ff9a00); border: none; border-radius: 50px; cursor: pointer; transition: all 0.2s; } #spinButton:disabled { background: #666; cursor: not-allowed; transform: none; } #spinButton:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 20px rgba(248, 197, 85, 0.7); } #resultDisplay { margin-top: 15px; font-size: 18px; min-height: 24px; color: #f8c555; } </style> </head> <body> <h1>🎰 幸运老虎机 🎰</h1> <div class="slot-machine"> <!-- 三个滚轮将由JS动态生成 --> </div> <div class="controls"> <button id="spinButton">开始抽奖</button> <div id="resultDisplay"></div> </div> <script src="slot-machine.js"></script> </body> </html>

4.2 JavaScript核心逻辑实现

创建一个slot-machine.js文件，包含所有逻辑。

// 1. 奖品数据配置 const prizePool = [ { id: 1, name: '特等奖', icon: '🏆', color: '#FFD700', probability: 0.02 }, // 2% { id: 2, name: '一等奖', icon: '🎁', color: '#FF6B6B', probability: 0.08 }, // 8% { id: 3, name: '二等奖', icon: '☕', color: '#4ECDC4', probability: 0.15 }, // 15% { id: 4, name: '三等奖', icon: '🍬', color: '#95E1D3', probability: 0.25 }, // 25% { id: 5, name: '参与奖', icon: '👍', color: '#FFA726', probability: 0.50 } // 50% ]; // 确保概率总和为1 const totalProb = prizePool.reduce((sum, p) => sum + p.probability, 0); if (Math.abs(totalProb - 1) > 0.001) { console.warn(`奖品概率总和为 ${totalProb}，不等于1，请检查配置。`); } // 2. 工具函数：根据概率随机获取一个奖品 function getRandomPrizeByProbability(pool) { let random = Math.random(); let cumulativeProb = 0; for (const prize of pool) { cumulativeProb += prize.probability; if (random < cumulativeProb) { return { ...prize }; // 返回一个副本，避免污染原数据 } } // 兜底，返回最后一个 return { ...pool[pool.length - 1] }; } // 3. 滚轮动画类 class Reel { constructor(containerId, items, reelIndex) { this.container = document.getElementById(containerId); this.items = items; // 奖品数组 this.reelIndex = reelIndex; this.itemHeight = 100; // 每个奖品项高度，需与CSS一致 this.stripHeight = this.items.length * this.itemHeight; // 一份列表的高度 this.currentPosition = 0; // 当前translateY值 this.currentSpeed = 0; // 当前速度 (px/frame) this.isSpinning = false; this.isSlowingDown = false; this.targetFinalPosition = 0; // 最终停止的目标位置 this.animationFrameId = null; this.spinDuration = 0; // 旋转计时，用于控制减速时机 // 初始化滚轮DOM this.initDOM(); } initDOM() { // 创建滚轮条带 const strip = document.createElement('div'); strip.className = 'reel-strip'; // 为了无缝循环，需要两份相同的列表 for (let i = 0; i < 2; i++) { this.items.forEach(item => { const itemEl = document.createElement('div'); itemEl.className = 'prize-item'; itemEl.innerHTML = `<div style="font-size: 2em;">${item.icon}</div><div>${item.name}</div>`; itemEl.style.backgroundColor = item.color; strip.appendChild(itemEl); }); } // 设置条带总高度 strip.style.height = `${this.stripHeight * 2}px`; this.strip = strip; this.container.appendChild(strip); // 初始位置设为中间某个奖品（例如第一个奖品在中间） this.currentPosition = -this.itemHeight; // 让第一个奖品在中间 this.applyTransform(); } // 应用CSS变换 applyTransform() { this.strip.style.transform = `translateY(${this.currentPosition}px)`; } // 开始旋转 startSpin(initialSpeed = 25) { if (this.isSpinning) return; this.isSpinning = true; this.isSlowingDown = false; this.currentSpeed = initialSpeed; this.spinDuration = 0; this.strip.style.transition = 'none'; // 取消任何CSS过渡，由JS完全控制 this.animate(); } // 动画循环 animate() { if (!this.isSpinning) return; this.spinDuration++; // 1. 更新位置 this.currentPosition -= this.currentSpeed; // 2. 处理无限循环：当一份列表完全滚出视口时，重置位置 if (this.currentPosition <= -this.stripHeight) { this.currentPosition += this.stripHeight; } // 3. 应用变换 this.applyTransform(); // 4. 速度控制逻辑（模拟物理效果） // 前60帧加速，然后匀速，最后根据指令减速 if (this.spinDuration < 30) { // 快速启动阶段 this.currentSpeed = Math.min(this.currentSpeed + 1, 40); } else if (this.spinDuration < 90) { // 匀速阶段 // 保持速度 } else if (this.isSlowingDown) { // 减速阶段 this.currentSpeed *= 0.96; // 摩擦系数 if (this.currentSpeed < 0.5) { this.stopSpin(); return; } } this.animationFrameId = requestAnimationFrame(() => this.animate()); } // 准备停止，传入目标奖品的索引（在原始items中的索引） prepareToStop(targetItemIndex) { this.isSlowingDown = true; // 计算目标位置：需要让targetItemIndex对应的奖品出现在视口中央 // 视口中央对应的位置是 -1 * itemHeight (因为初始位置就是-1*itemHeight) // 我们需要计算，从当前位置this.currentPosition，减速到哪个位置，能让目标奖品居中。 // 这是一个简化计算，假设我们总是希望停在目标位置。 // 更精确的做法是计算当前距离目标位置还有多少“圈”，然后减速到那里。 const targetPositionInStrip = -targetItemIndex * this.itemHeight - this.itemHeight; // -itemHeight是为了居中 // 由于有循环，我们需要找到离当前位置最近的一个“等效”目标位置 const currentMod = this.currentPosition % this.stripHeight; const targetMod = targetPositionInStrip % this.stripHeight; let diff = targetMod - currentMod; // 如果diff是正数且很大，说明反向更近 if (diff > this.stripHeight / 2) { diff -= this.stripHeight; } else if (diff < -this.stripHeight / 2) { diff += this.stripHeight; } this.targetFinalPosition = this.currentPosition + diff; } // 完全停止 stopSpin() { this.isSpinning = false; this.currentSpeed = 0; if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); } // 使用一个短暂的CSS过渡来完成最后的精准定位，使其平滑停止 this.strip.style.transition = 'transform 0.5s ease-out'; // 确保最终位置是有效的（在循环范围内） let finalPos = this.targetFinalPosition % this.stripHeight; if (finalPos > 0) finalPos -= this.stripHeight; this.currentPosition = finalPos; this.applyTransform(); // 过渡结束后，移除transition，为下一次旋转做准备 setTimeout(() => { this.strip.style.transition = 'none'; }, 500); } } // 4. 老虎机主控制器 class SlotMachine { constructor(reelContainerClass, prizePool) { this.reels = []; this.prizePool = prizePool; this.isRunning = false; this.reelContainerClass = reelContainerClass; this.spinButton = document.getElementById('spinButton'); this.resultDisplay = document.getElementById('resultDisplay'); this.init(); } init() { const container = document.querySelector(this.reelContainerClass); // 创建3个滚轮容器 for (let i = 0; i < 3; i++) { const reelContainer = document.createElement('div'); reelContainer.className = 'reel-container'; reelContainer.id = `reel${i}`; container.appendChild(reelContainer); // 初始化滚轮实例，传入奖品数据 const reel = new Reel(`reel${i}`, this.prizePool, i); this.reels.push(reel); } // 绑定按钮事件 this.spinButton.addEventListener('click', () => this.handleSpin()); } handleSpin() { if (this.isRunning) return; this.isRunning = true; this.spinButton.disabled = true; this.resultDisplay.textContent = '祝你好运！'; // 1. 随机决定中奖结果 const finalPrize = getRandomPrizeByProbability(this.prizePool); console.log('抽中奖品：', finalPrize.name); // 2. 找到该奖品在数组中的索引 const targetIndex = this.prizePool.findIndex(p => p.id === finalPrize.id); // 3. 所有滚轮开始旋转 this.reels.forEach(reel => reel.startSpin(20 + Math.random() * 10)); // 给一点随机初始速度 // 4. 模拟异步停止：每个滚轮在不同时间点开始减速 setTimeout(() => { this.reels[0].prepareToStop(targetIndex); }, 1000 + Math.random() * 300); // 第一个滚轮在1秒后开始减速 setTimeout(() => { this.reels[1].prepareToStop(targetIndex); }, 1400 + Math.random() * 300); setTimeout(() => { this.reels[2].prepareToStop(targetIndex); // 最后一个滚轮停止后，显示结果 setTimeout(() => { this.resultDisplay.textContent = `恭喜你，获得了【${finalPrize.name}】${finalPrize.icon}`; this.isRunning = false; this.spinButton.disabled = false; }, 800); // 等待最后一个滚轮停止动画完成 }, 1800 + Math.random() * 300); } } // 5. 初始化老虎机 document.addEventListener('DOMContentLoaded', () => { const slotMachine = new SlotMachine('.slot-machine', prizePool); });

4.3 代码关键点解析

1. 双列表循环：在Reel.initDOM()中，我们创建了两份相同的奖品列表拼接在一起，通过动态计算translateY和重置逻辑，实现了视觉上的无限滚动。
2. 动画状态机：Reel类内部通过isSpinning和isSlowingDown控制动画状态。startSpin启动，prepareToStop触发减速，速度在animate循环中根据公式衰减，直到停止。
3. 精准停止算法：prepareToStop方法中的计算是难点。目标是让指定的奖品项最终停在视窗中央。我们计算了目标奖品在“虚拟无限列表”中的理论位置(targetPositionInStrip)，然后通过取模运算找到离当前位置最近的一个“等效位置”，从而决定需要滚动的差值(diff)。这确保了无论当前滚轮在什么位置，都能平滑、准确地滚动到目标。
4. 逐帧动画与CSS过渡结合：在高速旋转阶段，我们使用requestAnimationFrame逐帧更新transform，并设置transition: none以获得完全控制。在最后停止阶段，我们设置一个短暂的CSSease-out过渡，让停止动作有一个自然的“缓入”效果，看起来更逼真。
5. 多滚轮协同：在SlotMachine.handleSpin()中，我们使用setTimeout为每个滚轮设置了不同的减速开始时间，并确保它们都停在同一个奖品索引上，创造了经典的依次停止的戏剧效果。

5. 常见问题、优化与扩展思路

在实际编写和测试中，你可能会遇到以下问题：

问题1：滚轮停止时抖动或跳帧。

• 原因：通常是因为在requestAnimationFrame回调中同时进行DOM读取和写入，或者CSStransition属性冲突。
• 解决：确保在animate函数中，先完成所有计算（位置、速度），最后只执行一次DOM写入（applyTransform）。在开始逐帧动画时，将strip.style.transition设为none；仅在最终停止时启用短暂的过渡效果。

问题2：概率算法在实际多次测试中感觉“不准”。

• 原因：前端Math.random()是伪随机，且在样本量小的时候，统计结果可能偏离理论概率。更重要的是，心理感觉上，用户会觉得“我点了十次都没中奖，概率是假的”。
• 解决：对于演示项目，可以调整概率分布，让中小奖更频繁出现，维持用户参与感。对于生产环境，如前所述，必须使用后端随机数，并可以考虑加入“保底机制”或“概率递增”等游戏化设计。

问题3：在低性能设备上动画卡顿。

• 优化：
  • 减少复合图层：避免为滚轮内的每个奖品项设置复杂的阴影、模糊等CSS属性。尽量只对滚轮条带（.reel-strip）进行transform操作，这通常会被浏览器提升到单独的图层进行GPU加速。
  • 使用will-change：可以为.reel-strip添加will-change: transform;提示浏览器提前优化。
  • 简化奖品DOM：如果奖品项很多，考虑使用<canvas>来绘制，但这会大大增加代码复杂度。一个折中方案是使用纯色背景和文字，避免图片。

问题4：想实现更炫酷的效果，比如惯性滚动、反弹效果。

• 扩展：这需要修改速度控制模型。例如，实现惯性滚动（松手后继续滚一段）需要记录一个初始速度，然后在减速阶段应用更复杂的物理公式（如速度 = 初始速度 * Math.exp(-衰减系数 * 时间)）。反弹效果则可以在stopSpin阶段，不直接停止在targetFinalPosition，而是稍微 overshoot 一点，然后再用一个spring动画弹回目标位置，这需要用到更高级的缓动函数或动画库（如popmotion或anime.js）。

问题5：如何让抽奖结果更具悬念？

• 技巧：
  • 差异化停止：就像我们代码里做的，让滚轮依次停止，最后一个滚轮可以多“晃动”几下。
  • 音效：添加旋转时的“嗡嗡”声、减速时的变调音、停止时的“咔哒”声和中奖时的庆祝音效，体验提升巨大。
  • 视觉强化：当滚轮停止并匹配成功时，可以给中奖项添加高亮、放大、闪烁的动画。

这个项目麻雀虽小，五脏俱全。从DOM操作、CSS动画、JavaScript定时器与动画循环，到简单的状态管理和概率算法，都涵盖了前端开发中的常见知识点。你可以在此基础上，尝试加入音效、更复杂的物理模拟、与后端API对接，或者用Canvas重写以获得更自由的视觉效果，把它打造成一个真正能在项目中使用的互动组件。