先给大家看下效果图：
点击“试试手气”，就开始摇奖，当三个图片结果一致的时候即为中奖。
摇奖的动画效果，使用小程序提供的动画功能：Animation
第一步：设定定时器让第一列的图片能够从上向下移动，制造滚动效果。
第二步：当一张图片移动消失后，回到原本的位置，更改该图片对应的显示图片，制造显示不同图片的效果。
第三步：设定一个预定停止的时间，当定时达到时间后，停止定时器，将当前显示的图片显示在方框中间。
下面请看详情代码：
Component({ behaviors: [], properties: {}, data: { bottom: '86rpx', showDefault: false, isActive: false, itemImgs: [{ id: 1, url: "./image/item1.png" }, { id: 2, url: "./image/item2.png" }, { id: 3, url: "./image/item3.png" }], currentLine1: { // 第一列当前显示的图片 id: 1, url: "./image/item1.png" }, currentLine2: { // 第二列当前显示的图片 id: 2, url: "./image/item2.png" }, currentLine3: { // 第三列当前显示的图片 id: 3, url: "./image/item3.png" }, animationData1: {}, // 第一列动画 animationData2: {}, // 第二列动画 animationData3: {}, // 第三列动画 resNum: [] // 保存结果，将每一列的结果保存下来，如果有三个值，，说明摇奖结束 }, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function() {}, moved: function() {}, detached: function() {}, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function() {}, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function() {}, pageLifetimes: { // 组件所在页面的生命周期函数 show: function() {}, }, methods: { /* 触摸开始 */ _handleTouchStart: function() { this.setData({ bottom: '80rpx' }) }, /* 触摸结束 */ _handleTouchEnd: function() { this.setData({ bottom: '86rpx' }) }, /* "试试手气点击事件" */ _handleClick: function() { if (!this.data.isActive) { // 随即生成0-10之间的数，0-2：结果为1,3-5：结果为2,6-8：结果为3,8-10：不中奖 let randomNum = Math.random() * 10; randomNum = parseInt(randomNum, 10); // 隐藏默认图片 this.setData({ isActive: true, // 修改标识状态，表明摇奖正在进行，禁止重复点击 showDefault: true, resNum: [] // 将结果数组置为空 }) this._handleAnimate(1, randomNum); // 第一个动画 this._handleAnimate(2, randomNum); // 第二个动画 this._handleAnimate(3, randomNum); // 第二个动画 var self = this; // 校验最终的游戏结果，如果三个结果值都有值，并且全部一致，视为中奖，不一样，视为未中奖 var resTime = setInterval(function() { if (self.data.resNum.length === 3) { // 延迟1秒给出提示 setTimeout(function() { if (self.data.resNum[0] === self.data.resNum[1] && self.data.resNum[0] === self.data.resNum[2]) { wx.showToast({ title: '恭喜中奖', icon: 'none' }) } else { wx.showToast({ title: '很遗憾，未中奖', icon: 'none' }) } }, 1000); clearInterval(resTime); } }, 1000); } else { wx.showToast({ title: '您已经摇过奖了', icon: 'none' }) } }, /** * 处理动画动作 * @param time 滚动多长时间 * @param line 第几列 */ _handleAnimate: function(line, resNum) { var self = this; // 创建动画 let animation = wx.createAnimation({ duration: 200, // 执行一次动画的时间 timingFunction: 'linear', // 动画的效果，平滑 }) // 随即生成摇奖区滚动的总共时长，范围5000-6000 let randomTotalTime = Math.random() * 1000 + 5000; randomTotalTime = parseInt(randomTotalTime, 10); // 随即生成每次循环间隔的时间,500-600之间的随机数 let tempRandom = Math.random() * 300 + 250; tempRandom = parseInt(tempRandom, 10); let num = 0; // 设定计数标签，从0开始 let count = 1; // 循环计数 // 设定循环 let loop = setInterval(function() { num++; // 每次循环加1 count++; if (num 2) { // 如果计数标签大于2，置为0 num = 0; } if (count * tempRandom = randomTotalTime) { // 到达预定的时间点，停止循环，将图片定位到显示区域中间位置 animation.translateY(85).step({ duration: 1000 }); if (resNum = 0 && resNum 3) { num = 0; } else if (resNum = 3 && resNum 6) { num = 1; } else if (resNum = 6 && resNum 9) { num = 2; } handleSet(self); count = 0; // 更新结果数组 let tempArr = self.data.resNum; tempArr.push(num); self.setData({ resNum: tempArr }) clearInterval(loop); // 停止循环 } else { animation.translateY(170).step().translateY(0).step({ duration: 0 }); handleSet(self); } function handleSet(self) { if (line === 1) { self.setData({ currentLine1: self.data.itemImgs[num], // 修改显示的图片 animationData1: animation.export() }) } else if (line === 2) { self.setData({ currentLine2: self.data.itemImgs[num], // 修改显示的图片 animationData2: animation.export() }) } else if (line === 3) { self.setData({ currentLine3: self.data.itemImgs[num], // 修改显示的图片 animationData3: animation.export() }) } } }, tempRandom); }, /* 动画结束后处理事件 */ _handleTransitionend: function(val) { // console.log(val) } }})这里我将抽奖小游戏写成了自定义组件，方便在小程序中多处使用，详情的完整内容可以去我的GitHub上查看：
摇奖小游戏组件
觉得还可以给个star吧。
欢迎关注博主——小圣贤君，有问题可以留言哦~
