抽奖动画 - 十二宫格抽奖 (2)

这里闪烁的间隔是300毫秒，如果需要由快到慢或者由慢到快的闪烁，就需要在sleep()上做些改动，例如我们可以给sleep()函数传值的时候用一个表达式，使用Math.pow()来得到时间间隔，将调用sleep的语句修改一下

await sleep(interval)

改成

await sleep(interval * i)

然后调用的时候修改一下时间

collectEvent(arr.length, 300)

改成

collectEvent(arr.length, 100)

这样每次执行异步任务的间隔时间会比上一次多100毫秒，来看下效果如下图5

图5

3.6 中奖弹框

最后执行完闪烁之后要根据接口返回来固定到某个奖品上并弹出中奖弹框。使用一个随机选择函数模拟抽奖接口，函数如下：

//生成随机奖品 getRandomIntInclusive(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min }

调用方式如下：

//加入定时任务 collectEvent(arr.length, 100).then(() => { clearTimeout(timeoutID) let checkedPrizeIndex = this.getRandomIntInclusive(0, this.prizes.length - 1) this.prizes.forEach((p, index) => { p.active = index === checkedPrizeIndex }) this.prizeInfo = this.prizes[checkedPrizeIndex] this.raffleResultShow = true })

最后的效果如下图6