抽奖动画 - 滚动抽奖 (3)

第一个动画空转，设置的时间是5秒，动画播放完就要定位奖品了，这里和后端约定好，抽奖接口5秒内一定要返回结果，否则第二个动画就无法定位。
最后使用Complete Function来处理接口返回的结果。代码如下：

window.jQuery("#slotMachine").animate( {backgroundPositionX: `-=${((totalLth * wheel - (itemLth / 2)) / 75)}rem`}, {duration: 5000, easing: \'easeInOutQuint\', complete: function() { getPrizeInfo(window.jQuery(this)) }} )

注意在complete回调函数中this是正在执行动画的DOM元素，正好可以用来用这个DOM播放第二个动画。这里complete不能使用箭头函数，否则this会指向当前vue组件。
getPrizeInfo()方法处理接口结果，并播放动画，代码如下：

//抽奖 let getPrizeInfo = slotMachine => { let chooseIndex = this.getRandomIntInclusive(0, this.prizeList.length - 1) console.log(JSON.stringify(this.prizeList[chooseIndex])) slotMachine.animate( {backgroundPositionX: `-=${((chooseIndex + 0.5) * itemLth / 75)}rem`}, {duration: (chooseIndex + 1) * 800, easing: \'swing\'} ) }

这里我们用一个随机函数取出奖品结果。代码如下：

//返回随机数，大于等于min，小于等于max getRandomIntInclusive(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值 }

注意chooseIndex+0.5也是为了调整奖品图片的对应位置。最后动画效果如下图10

图10

4. 总结

本文介绍了另外一种方式的抽奖动画，和lao虎机很类似，只不过是左右滚动，原理依然是使用jQuery.animate修改background-position-x属性来实现滚动。