先上效果图
序
上来先一个对不起，标题党了，本来是打算撸一个原生版本的，但是考虑到安全性和可控性，选择了用h5实现，不然出个什么bug中了十个iphone X，这个锅太重，背不动。gif图由于被简书自动加快，真实效果比较平缓正常。
实现
九宫格抽奖，后台返回八个奖品信息，排列顺序如图3-1所示，获取到奖池数据后，遍历数组，添加八个奖品图 + 一个按钮图进div
for(var i=length;i<=(allNumber);i++){
if (i == allNumber) {
$("#checkDivId").append("<img style='background:#FF8082;width:" + onegiftWidth + "px; height:" + onegiftWidth + "px;border-radius: 8px;' src=" + centerCheckimgSrc + " class='checkAction'></img>");
}else{
$("#checkDivId").append("<img style='background:#FFFFFF;width:" + onegiftWidth + "px;height:" + onegiftWidth + "px;border-radius: 8px;' src=" +daysJoyAr[i].url +">" + "</img>");
}
}
children = $("#checkDivId").children('img');
width = children.eq(0).width() || 0;
height = children.eq(0).height() || 0;
//元素初始化
$("#checkDivId").css({
position:'relative',
width:col * width + (col-1) * spacing,
height:row * height + (row-1) * spacing
});
children.css({
position:'absolute'
});
if(line == 0){
initOne();
}else{
initTwo();
}
//初始化函数
//此时分成4个部分，上、右、下、左
//上： 0 ~ col-1
//右： col ~ col+line
//下： col+line+1 ~ 2*col+line-1
//左： else
//如果只有两行
//此时分成4个部分，上、右、下、左
function initOne(){
children.each(function(index){
if(index >=0 && index <= (col-1)){
$(this).css({
top:0,
left: index * width + index * spacing
});
}else{
$(this).css({
bottom:0,
right: index%col*width
});
}
});
}
//如果大于两行
function initTwo(){
children.each(function(index){
//col 列数 lin 除去上下两行的行数 此处为1
if(index >=0 && index <= (col-1)){ //0~2
$(this).css({
top:0,
left: index * width + index * spacing
});
}else if(index >= col && index <= (col+line-1)){ //3~3
$(this).css({
top:((index+1-col))*(height+spacing),
right: 0
});
}else if(index >= (col+line) && index <= (2*col+line-1)){ //4~6
$(this).css({
bottom:0,
right:(index-((col+line)))*(width+spacing)
});
}else if(index == 7){
$(this).css({
left:0,
top:(index-(2*col+line-1))*(height+spacing)
});
}else{
$(this).css({ //中心抽奖按钮
left:width + spacing,
top:width + spacing
});
}
});
}
3-1.png
考虑到安全问题，抽奖结果肯定是由服务器返还，所以当点击中间的抽奖按钮时，调用后台抽奖接口，返回抽奖结果。假设抽奖转盘转动时间为三秒，在三秒内必须拿到中奖奖品，当网络不顺畅，或者后台程序报错时，给用户弹窗，程序异常并强行刷新页面。
前端要做的是在拿到结果后让转盘停在对应的位置上，这一点是关键。简单的代码实现如下所示。
//取一个随机整数模拟后台接口返回的中奖奖品id
var random = parseInt(10*Math.random())；
//遍历图3-1中的奖池数组，找到对应中奖的奖品
for (var giftindex = 0;giftindex < checkJoyArr.length;giftindex++) {
if (checkJoyArr[giftindex].id == random) {
winlocalIndex = giftindex;//中奖奖品的索引
memberPrizeId = random;//中奖奖品的id
break;
}
}
动画效果
转盘需要经历 加速--->匀速--->减速--->停止 这四个阶段。初始位置从索引为0的奖品开始，调用speedUp()函数，当速度到达某一值时，匀速运动1s，之后减速，减速一圈后，开始找中奖奖品索引，当ix == winlocalIndex时（ix为当前选中的商品索引），动画结束，弹窗提示用户中奖。几个重要的函数如下：
var ix = 0; //初始位置
var stop ;
flg = false; //抽奖是否正在运行
/*
加速度公式
v1 = v0 + a*t;注意加速度的v代表时间
此时的t可以我们自己定义，所以是常量，所以只需要求a的值
*/
//加速
function speedUp(){
runner(ix);
if(v <= 120){
clearTimeout(stop);
v = 120;
t = 5.0;
uniform(); //跳转到匀速
}else{
t++;
v = v0 + a*t;
stop = setTimeout(speedUp,v);
}
}
//匀速
function uniform(){
stop = setTimeout(uniform,v);
if(t == time/50){
clearTimeout(stop);
t = 0.0;
speedDown();//跳转到减速
}else{
t++;
}
runner(ix);
}
//减速
function speedDown(){
var stop3 = setTimeout(speedDown,v);
if(v >= 500){
v = 500;
if(ix == winlocalIndex){
children.removeClass('on').eq(ix).addClass('on');
clearTimeout(stop3);
setTimeout(function(){
options.end(winlocalIndex);
flg = false;
},300)
winlocalIndex = 20;
return;
}
}else{
t++;
v = v - a*t;
}
runner(ix);
}
function runner(i){
children.removeClass('on').eq(ix).addClass('on');
i++;
if(i == allNumber){
ix = 0;
}else{
ix = i;
}
}
至此几个重要的地方基本写完了，功能不难，就是写的过程中比较烦，特别是布局，分分钟想哭。由于项目中业务逻辑比这个稍微复杂了一点。有七天一次免费抽奖，用完免费抽奖机会后才扣金币，右上角的点击刷新奖池等，所以，过两天剥离出一个demo来。
结语
这两天交接工作，不算太忙，准备好好梳理一下前段时间的几个h5功能，但是写的过程中发现，好多东西不知道怎么去描述，接触h5也已经一年时间，特别是前段时间公司立项了几个小游戏，研究了一段时间的白鹭引擎，看了两周混合开发框架weex，也由最开始的抵触慢慢到接受，技术终究是要为产品服务的。
还有这周末就要飞重庆了，那个我心心念念的地方，不知道前面等待着我的会是什么，希望工作不会太难找。但行好事，莫问前程，祝我好运。。。。
网友评论