微信抽奖转盘活动-效果源码分析

手机端源码下载地址：http://pan.baidu.com/s/1ntG1Sd7（我修改成了移动端自适应，微信访问可看到效果，但我没自己的站，只能你们自己实验了！）

昨天接到公司的一个项目是在微信端做一个抽奖转盘的效果，脑海里的第一个想法就是用CSS3动画来实现这个效果，但是一想到抽奖概率与转盘动画的关联性，还是去网上找了一套代码。

写在这里做一下代码的知识总结吧！

所需要用到的插件：jquery、jQueryRotate（负责控制元素转动的角度）、jquery.easing（负责元素转动时的动画效果调用）

<!--移动端的meta标签定义，在这里就不叙述了，有兴趣的可以问度娘了解下-->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
<meta name=”format-detection” content=”telephone=no” />
<meta http-equiv="X-UA-Compatible" content="IE=8">

<!--JS引入-->
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

<!--简单的html源码-->
<div class="demo">
        <img id="disk" src="disk.jpg" />
        <img src="start.png" id="startbtn" class="start">
</div>

 

 

 以上的基本需求满足后开始研究效果的实现

<script type="text/javascript">
$(function(){ 
     $("#startbtn").click(function(){ 
        lottery();                         //给转盘的按钮绑定一个事件
    }); 
}); 
function lottery(){ 
    $.ajax({                               //执行事件首先请求php（代码下面会贴出）
        type: 'POST', 
        url: 'json.php',                   //请求PHP地址
        dataType: 'json',                  //数据类型为json
        cache: false,                      //缓存：false
        error: function(){                 //请求失败执行函数
            alert('出错了！'); 
            return false; 
        }, 
        success:function(json){                                          // 带入PHP返回的参数数组
            $("#startbtn").unbind('click').css("cursor","default");      // 首先移除按钮可再次执行函数Click事件，至于CSS对于移动端没用，只是PC端一个UI效果罢了
            var a = json.angle;                                          // 定义角度 a = php数组.angle
            var p = json.prize;                                          // 定义奖项文字 p = php数组.prize
            $("#startbtn").rotate({                                      // 执行jQueryRotate.js插件中的rotate方法
                duration:3000,                                           // 转动时间 
                angle: 0,                                                // 起始角度
                animateTo:1800+a,                                        // 转动角度+a（为保证随机数a过小，转动立刻停止，将1800为基本转动角度） 
                easing: $.easing.easeOutSine,                            // 执行jQuery.easing.min.js中定义的动画效果
                callback: function(){                                    // 最后alert返回给用户信息
                    var con = confirm('恭喜你，中得'+p+'\n还要再来一次吗？'); 
                    if(con){ 
                        lottery(); 
                    }else{ 
                        return false; 
                    } 
                } 
            });
        } 
    }); 

} 
</script>

 

 接下来是PHP代码，笔者不懂PHP，只能把自己知道的理念备注下来，方便修改。

<?php 

$prize_arr = array(                                                                //建立一个二维数组
    '0' => array('id'=>1,'min'=>1,'max'=>60,'prize'=>'一等奖','v'=>1),              //根据数组的下标找到其中数组的信息
    '1' => array('id'=>2,'min'=>61,'max'=>120,'prize'=>'二等奖','v'=>2),            //min代表最小角度 max代表最大角度 转盘是以时钟六点方向为0度进行计算
    '2' => array('id'=>3,'min'=>121,'max'=>180,'prize'=>'三等奖','v'=>5),           //prize也就是js请求回来的变量 p
    '3' => array('id'=>4,'min'=>181,'max'=>240,'prize'=>'四等奖','v'=>7),
    '4' => array('id'=>5,'min'=>241,'max'=>300,'prize'=>'五等奖','v'=>10), 
    '5' => array('id'=>6,'min'=>301,'max'=>360,'prize'=>'六等奖','v'=>25), 
); 
foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr);                                                           //根据概率获取奖项id s
$res = $prize_arr[$rid-1];                                                      //中奖项 
$min = $res['min']; 
$max = $res['max']; 
$result['angle'] = mt_rand($min,$max);                                          //随机从min与max之间 生成一个数值

$result['prize'] = $res['prize']; 

function getRand($proArr) { 
    $result = ''; 
 
    //概率数组的总概率精度 
    $proSum = array_sum($proArr); 
 
    //概率数组循环 
    foreach ($proArr as $key => $proCur) { 
        $randNum = mt_rand(1, $proSum); 
        if ($randNum <= $proCur) { 
            $result = $key; 
            break; 
        } else { 
            $proSum -= $proCur; 
        } 
    } 
    unset ($proArr); 
 
    return $result;                                              //返回计算后的 result['angle']数组中的值给JS计算
}  
echo json_encode($result); 
?>

 

 由于也是用的别人的代码，但是自己总结一下修改经验的话，我认为还是一个好的习惯，如果什么时候笔者也能自己写出来的话，那我会很高兴的。