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

手机端源码下载地址：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); 
?>

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