抽奖动画 - lao虎机抽奖，手把手教你做一个抽奖机软件

本文介绍一个lao虎机抽奖动画的实现，lao虎机抽奖在各类商家营销活动中非常常见，这里主要介绍动画的实现过程，其他细节不做详细分析。

1. 需求

UI给到的蓝湖如下截图1

图1

• 三栏图片，每栏图片是一样的，都包含所有的奖品图片。
• 点击抽奖三栏图片从左到右依次开始上下滚动，从慢到块，滚动几轮后根据抽奖结果固定图片位置。
• 如果中奖三栏显示同一张奖品图片，否则随机显示三张奖品图片。最后弹出抽奖结果弹框。

2. 整体思路

2.1 滚动

说到滚动，首先想到的是scroll，但是scroll会有滚动条出现。并且需求要求先滚动几轮，这个使用scroll的话我暂时想不出什么好的办法。
然后想到可以使用background-img结合background-repeat，background-position-y来实现这个功能，简单说就不断地修改背景图片的background-position-y，并且设置背景重复显示，这样看起来就是奖品图片在滚动了。

2.2 jquery动画

虽然可以使用css中的animation动画来让背景滚动，但是这里有个问题，在开始滚动图片同要去请求接口，在接口有了结果之后要根据结果来固定图片位置，使用keyframe的话要动态设置关键帧，这也很麻烦。
其实jquery提供了响应的api来修改元素的尺寸信息，和尺寸相关的都可以使用jquery动画。参考jquery文档如下：

所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，width, height或者left可以执行动画，但是background-color不能，除非使用jQuery.Color()插件。）属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用。

另外，背景开始滚动的时候是空转的，然后等到有抽奖结果之后在原来的background-position-y的基础上加上一个值，意思再滚动一个距离，固定在奖品图片上。这个需求和jquery动画属性中“相对值”的概念不谋而合。参考下面的jquery引文。

动画属性也可以是一个相对值。如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。

等待接口有响应之后还要播放第二个动画固定奖品，这时就要再播放一个动画，jquery已经想到了这个问题，所有提供一个done回调方法，如下：

done
Type: Function( Promise animation, Boolean jumpedToEnd )
在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)..

2.3 尺寸问题

这个动画中尺寸问题至关重要，因为要对准奖品图片，尺寸稍有差别，就不容易设置好位置。还有UI给到我们的需求一般都是px，我们的vue项目中使用到“postcss-plugin-px2rem”插件会将px修改成相对的尺寸单位rem。postcss-plugin-px2rem配置如下：

'postcss-plugin-px2rem': {
  rootValue: 75,
  unitPrecision: 8,
  propWhiteList: [],
  propBlackList: [],
  selectorBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 3,
  exclude: /vant/i
}

这里最关键的信息是rootValue，设计稿给