vue 版的老虎机抽奖活动效果折腾小记

前沿

---

最近公司有一个活动，让做一个老虎机抽奖活动，对于之前没有做过的我来说还是有些吃力的，于是就开始各种网上找插件，发现大部分都是jquery的，要不就是好多一部分的，一个完整的流程都走不下来，更有甚者让花钱买他的代码，我就想说大家都是分享，互相交流，你们怎么就那么自私，所以今天把我折腾的老虎机分享出来，以来方便自己以后开发，而来大家也可以发现不足，指出来共同进步。

---

该项目需要雪碧图哦

来先看看效果图

WechatIMG10.png

代码里边都有注释，比较容易上手。我用的是曲线救国的方法，就是说并不完美，不太灵活，雪碧图的位置一旦确定，就尽量不要动了，不然下次还需要在重新调雪碧图的y轴的位置，这个很烦，希望看见的小伙伴给个建议。

---

作者最近一段时间比较忙，还未将该效果抽出公共组件，后期有机会抽成公共组件，就好了。会省好多事。

---

好了不说废话了，上思路，代码。

思路逻辑：老虎机抽奖结果以后台告知为准，所以前台需要根据后台返回的是否抽中标示来展示相应的效果

其实我刚开始认为抽奖结果是前端做的，然后越陷越深，发现不好做出来，而且安全性不高，然后跟小伙伴交流才知道一般抽奖类的活动抽奖结果都是由后台告知，这下就轻松多了，因为你只需要根据结果展示相应的效果就好了。

主要运用的技术

老虎机抽奖活动运用到了css3的transition和css3的过渡来实现平滑滚动的效果，通过改变背景雪碧图的y轴位置backgroundPositionY来展示不同的奖品，以达到抽奖效果。js通过定时器可以达到转动效果

第一步，布局

第二步：逻辑