抽奖动画 - lao虎机抽奖 (3)

动画有了，现在要开始从接口中拿数据来定位奖品了。请求接口和上面的动画一起执行，这里假定接口响应的时间一定是少于2 * 300 + 4000 + 2 * 800 = 6200ms，一般来说这个时间足够了，这段时间内动画空转。拿到结果后再播放第二个动画来固定奖品图片。代码如下：

//避免重复点击 let that = this if (this.disabled) { return } this.disabled = true //抽奖 that.pid = -1 coc2.drawLottery({actId: actId.lottery}).then(res => { // 临时抽奖 // res = {"code": "0","data":{"pid":3221}} if (res.code == 0) { let data = res.data this.pid = data.pid } else if (res.code == 102002) { this.pid = 3221 } else if (res.code == 303) { //拉起登录 pullLogin() } else { this.lotteryMsg = res.message } })

这里用一个变量pid记住奖品id，然后播放第二个动画，这时jquery动画提供了一个done方法执行动画完成之后的后续操作。代码如下：

//播放动画 jQuery(".tiger").each(function(index) { let currNum = jQuery(this) setTimeout(() => { currNum.animate({backgroundPositionY: "+=" + (u * 3)/75 + \'rem\'}, {easing: "easeInOutCirc", duration: 4000 + index * waste, done: function() { snapToGrid(currNum, index) }}) }, index * 300) })

snapToGrid方法就是执行第二个动画了，代码如下：

//对齐奖品图片 function snapToGrid(domObj, index) { let prizeNumber = 0 //谢谢惠顾 if ([3221, -1].includes(that.pid)) { let result = that.numRand() let numArr = (result + \'\').split(\'\') prizeNumber = parseInt(numArr[index]) } else { let prize = that.prizeList.find(p => p.pid == that.pid) prizeNumber = prize.order } domObj.animate({backgroundPositionY: "+=" + (prizeH * prizeNumber) / 75 + "rem"}, {easing: "linear", duration: prizeNumber * waste, done: function() { if (index == 2) { if (that.pid > -1) { that.$refs.dialogPrize.popUp(that.pid) } else { that.$toast(that.lotteryMsg) } that.disabled = false } } }) }

这里这里还有个逻辑，如果未中奖（谢谢惠顾），要生成三个不相等的随机数来让奖品图片固定，就是上面的that.numRand()，用它在0，1，2，3，4中随机选三个来固定奖品图片。具体方法如下：

//生成随机顺序 numRand() { let arr = ["0", "1", "2", "3", "4"], res = "" for (let i = 0; i < 3; i++) { let rnd = Math.floor(Math.random() * arr.length) res += arr[rnd] arr.splice(rnd, 1) } return res }

还有个地方要注意，一开始的时候默认显示的奖品图片是没有对齐的，在动画空转3圈结束后让然不会对齐，等接口有结果后需要对齐奖品，而prizeList变量中纪录的order是按照从上到下的次序来的，最后固定到奖品图片时不可能对准。所以在开始动画之前要将每张背景图片固定到起始的位置，代码如下：

jQuery(".tiger").css(\'backgroundPositionY\', 0)

最后看一下整体抽奖动画效果，如下图8

图8

4.总结

jquery动画提供了丰富的功能，能灵活的控制动画参数和想要的效果，在vue中虽然也提供了动画功能，但是处理一些复杂的操作用起来不是太理想。