---

date: 2020-08-07
categoery: [技术,前端,JavaScript]
toc: true

介绍

现在不少app都会有一些抽奖活动，热门的抽奖当属九宫格循环抽奖，而还有一种抽奖形式也是比较常见，比如老虎机的形式

预期效果

那么我们就用JQ和CSS实现一下这个效果。

简单的实现思路

其实这个效果和实现一个轮播图是有异曲同工之妙的

假设现在有1，2，3三个奖品，我们可以在一个ul内使用多个序列拼接成一个长列表:1–2--3–1--2–3--1–2--3–1--2–3…以此类推

每一组1–2--3视为一个集合，抽奖开始从第一个集合的某个奖品开始，到最后一个集合的某个奖品结束，中间使用transition加transform实现动效。

当每一次抽奖动效完成后ul会挺在最后一个集合的元素上，这个时候就需要让ul‘瞬移’一下，移动到当前这个奖项对应的第一个集合中的奖项，以便下一次抽奖

有了这个大概的思路，就可以着手于实现了

先定义一下DOM结构

我们实现的是上文提到的那个例子，但是为了简洁，我们的dom结构就先定义简单一点

<div class="game-content"><div class="game-goods-wrap"><div class="game-goods-list"><div class="game-goods" style="background: #ffffff;"><div class="game-goods-box" id="game1"><ul class="game-goods-ul"></ul></div></div><div class="game-goods" style="background: #ffffff;"><div class="game-goods-box" id="game2"><ul class="game-goods-ul"></ul></div></div><div class="game-goods" style="background: #ffffff;"><div class="game-goods-box" id="game3"><ul class="game-goods-ul"></ul></div></div></div></div><span class="game-btn"></span>
</div>

核心动效的实现

然后我们开始书写核心动效实现的封装函数，对外提供可以配置的接口option：

luckGame: function(options) {var defaults = {'gameLen': '10', // 奖品的数量'game_pagesize': 6,//生成多少圈同样的东西，调节速度用'zj_arr': { //中奖数组，第一个表示是否中奖，第二个中奖号码'is_win':1,'number':8}};var settings = Object.assgin(defaults, options);w_config={'w':$(window).width(),'h':$(window).height()}var gameArr=[]; // 奖品滚动的列表var gameLen=settings.gameLen; // 奖品的种类数量var game_list_h=''; // 奖品滚动列表的高度var game_init=[]; // 页面载入时随机的选择状态var game_list_item_h=0; // 单个奖品元素的高度//每次进来随机3个数字，来启动当前的选择的状态for (var i = 0; i < 3; i++) {game_init.push(Math.floor(Math.random() * gameLen));}createGame();$(window).resize(function(){	createGame();})// 初始化游戏function createGame(){getHeight();setLi();pushLi(gameArr);start();}function getHeight(){w_config={'w':$(window).width(),'h':$(window).height()}// 由于抽奖机本身的大小根据屏幕大小自适应，所以奖品高度需要计算// 实际场景下一般都是定高的game_list_item_h=(w_config.w*320/750*0.5*0.7).toFixed(2);}//设置奖品function setLi(){// 拼接实际的滚动数组for (var j = 1; j <= settings.game_pagesize; j++) {for (var i = 1; i <= gameLen; i++) {gameArr.push({'type':j,'index':i,'src':'images/'+i+'.png'});}}}//写入，初始化奖品的滚动function pushLi(arr){var html_str='';// 根据滚动数组生成lifor (var i = 0; i < arr.length; i++) {html_str+='<li style="height:'+game_list_item_h+'px" data-index="' + arr[i]['index']+'" data-type="'+arr[i]['type']+'"><img src="' + arr[i]['src']+'"></li>';}$(".game-goods-ul").each(function(e){$(this).empty().append(html_str);game_list_h=$(this).height();console.log('game_list_item_h',game_init);y=game_list_item_h*game_init[e];$(this).css({'transition-duration': '0ms','transform':'translate(0px, -'+y+'px) translateZ(0px)'})});}// 开始抽奖function start(){// 这一块是点击开始动效// 但实际场景中一般是点击之后和后台进行交互// 获取到中奖信息之后再开始动效$(".game-btn").click(function(){//如果中奖if(settings.zj_arr.is_win==1){$(".game-goods-ul").each(function(e){setTimeout(function(){y=(settings.zj_arr.number+settings.gameLen*(settings.game_pagesize-1))*game_list_item_h;$(".game-goods-ul").eq(e).css({'transition-duration': '5000ms','transform':'translate(0px, -'+y+'px) translateZ(0px)'})}, e*300);// 判断最后面是否完毕// 抽奖动画完成后回到type=1的地方，等待下一次抽奖$("#game3").find(".game-goods-ul").on("webkitTransitionEnd", function() {y=settings.zj_arr.number*game_list_item_h;$(".game-goods-ul").css({'transition-duration': '0ms','transform':'translate(0px, -'+y+'px) translateZ(0px)'})$("#game3").find(".game-goods-ul").unbind("webkitTransitionEnd");})})}else{// 不中奖的时候哦生成随记停留的奖项，但是确保不能三个奖项一样numrand=randNum2();console.log(numrand);// 不中奖的时候$(".game-goods-ul").each(function(e){y2=(numrand[0])*game_list_item_h;y3=(numrand[1])*game_list_item_h;y4=(numrand[2])*game_list_item_h;setTimeout(function(){y=(numrand[e]+settings.gameLen*(settings.game_pagesize-1))*game_list_item_h;$(".game-goods-ul").eq(e).css({'transition-duration': '5000ms','transform':'translate(0px, -'+y+'px) translateZ(0px)'})}, e*300);//判断最后面是否完毕// 抽奖动画完成后回到type=1的地方，等待下一次抽奖$("#game3").find(".game-goods-ul").on("webkitTransitionEnd", function() {$(".game-goods-ul").eq(2).css({'transition-duration': '00ms','transform':'translate(0px, -'+y4+'px) translateZ(0px)'})$("#game3").find(".game-goods-ul").unbind("webkitTransitionEnd");})$("#game2").find(".game-goods-ul").on("webkitTransitionEnd", function() {$(".game-goods-ul").eq(1).css({'transition-duration': '00ms','transform':'translate(0px, -'+y3+'px) translateZ(0px)'})$("#game2").find(".game-goods-ul").unbind("webkitTransitionEnd");})$("#game1").find(".game-goods-ul").on("webkitTransitionEnd", function() {$(".game-goods-ul").eq(0).css({'transition-duration': '00ms','transform':'translate(0px, -'+y2+'px) translateZ(0px)'})$("#game1").find(".game-goods-ul").unbind("webkitTransitionEnd");})})}})}// 生成不中奖时候的随机显示序列function randNum2(){a=Math.floor(Math.random() * gameLen);b=Math.floor(Math.random() * gameLen);c=Math.floor(Math.random() * gameLen);arr=[];if(a==b){return randNum2();}else{return arr=[a,b,c];}}
}

调用

然后我们就可以像这样传入配置，这一块实际场景中是点击按钮过后再传入配置，当配置传入之后调用函数，直接开始动画：

luckGame({'zj_arr': {'is_win':1,'number':9//从0算起，就是10了},gameLen:10,//产品抽奖数量，game_pagesize:6
});

以上就是核心的动效实现，如果是使用vue或者react之类的框架，那么我们则只需要关注数据本身就行，由数据去驱动视图，省去了繁杂的DOM操作，整个过程会更加简洁。