本文介绍一个lao虎机抽奖动画的实现，lao虎机抽奖在各类商家营销活动中非常常见，这里主要介绍动画的实现过程，其他细节不做详细分析。
ps：lao虎机是敏感词，博客园的富文本和markdown编辑器都限制不允许出现，所以文章中的“老”字用拼音代替。
1. 需求UI给到的蓝湖如下截图1
图1
三栏图片，每栏图片是一样的，都包含所有的奖品图片。
点击抽奖三栏图片从左到右依次开始上下滚动，从慢到块，滚动几轮后根据抽奖结果固定图片位置。
如果中奖三栏显示同一张奖品图片，否则随机显示三张奖品图片。最后弹出抽奖结果弹框。
2. 整体思路 2.1 滚动说到滚动，首先想到的是scroll，但是scroll会有滚动条出现。并且需求要求先滚动几轮，这个使用scroll的话我暂时想不出什么好的办法。
然后想到可以使用background-img结合background-repeat，background-position-y来实现这个功能，简单说就不断地修改背景图片的background-position-y，并且设置背景重复显示，这样看起来就是奖品图片在滚动了。
虽然可以使用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)..
这个动画中尺寸问题至关重要，因为要对准奖品图片，尺寸稍有差别，就不容易设置好位置。还有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，设计稿给到的屏幕宽度是750px，这个值被换算成rem是750px/75=10rem，我们代码中所有的尺寸都会按照这个公式换算成rem。
然后我们动画中计算background-position-y的时候也要像这样换算一下，不然也有可能对不准奖品图片。
还有每个奖品图片在整张背景图中的次序也要先弄清楚，这里记在一个数组中，最后固定奖品图片的时候用到。如下：
prizeList: [ {pid: 3251, order: 4, code: "HW-AM115", title: "华为半入耳式耳机AM115"}, {pid: 3231, order: 3, code: "iphone-12", title: "苹果12 64G绿色"}, {pid: 3261, order: 2, code: "PMC_iphone12_bhk", title: "浦诺菲-苹果12水晶保护壳"}, {pid: 3271, order: 6, code: "PMC-18C", title: "浦诺菲_PMC-18C PD双口充电器"}, {pid: 3241, order: 5, code: "SLY_RPB-N16", title: "丝兰雅_RPB-N16移动电源"}, {pid: 3221, code: "lost", title: "离大奖就差一点点啦～"} ] 3.实现过程 3.1 布局这里页面布局的时候要和UI沟通一个细节，就是背景图中上下两个奖品的间隔是最上面一个奖品和顶部中间间隔的两倍。如下图2
图2
同理，背景图中上下两个奖品的间隔是最下面一个奖品和底部中间间隔的两倍。如下图3
图3
最后整张背景图片如下图4
图4
这样滚动起来看上去是一张整体的图片，而不会出现偏差。三栏布局使用flex来实现，html代码如下： <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <img src="" alt="" @click="lotteryClick"> </div>