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

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

?>

 

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