实战实现一个h5转盘抽奖页面,谈谈代码实现,顺便谈一下优化和数据处理

代码地址

前言

这个组件是我写过的关于移动端h5活动转盘抽奖的页面,当时写完之后确定挺好看、挺炫的,所以就把它单独出来了,以后再写类似的页面,可以参考其中的一些实现原理!

主要用到的技术

  • 用Math.random()方法实现一个区间的随机数,用于实现每次用户点击抽奖的时候,随机得到转盘需要所转的盘数。代码原理如下:
    //获取一个介于某两个数之间的
    function getRandomNumber(min,max){
        return Math.floor(Math.random() * (max - min)) + min;
    };复制代码
  • 在实现转盘的时候,用到了两个随机数,一个较小,一个较大,主要用来分别控制指针和奖品转盘以不同的速度旋转,用以给用户实现视差!

  • 转盘旋转之前,用不同的初始角度代表不同的不同的奖品,那么最后转盘要转的角度就是:随机数n 360。比如“xx奖品”的默认角度相对于转盘是45度,抽奖的时候,得到的随机数是2,那么转盘就应该转2 360 + 45 = 765度。这样就能把每次转盘所转的角度跟产品对应起来了!

  • 动画实现方面主要用到了setTimeout和window.requestAnimationFrame,但是主要在用setTimeout的时候,为了防止动画的抖动,应该保证1s中绘制60帧页面,也就是说,转盘要转3圈,用时3秒的话,那么每调一次setTimeout方法,转盘所转的角度就是:

    var perAngle = 3 * 360 / 3 * 60;//6°复制代码
  • 写完这段代码,是在pc上查看效果的,在手机上产看效果的时候,会出现抽奖页面图片加载慢以及旋转闪烁灯有点卡顿的问题,我们可以分别采用下面的方法解决:

1、图片加载慢的问题,我们可以采用一种最原始、最笨、最省钱的方法(其它方法可以使用cdn等等,这里不介绍)——预加载解决,方法就是在进入本页面之前,在同一个服务器的其它页面把对应的图片加载一遍,这样当进入到当前的页面,需要加载的图片已经在缓存中了,所以此时再加载这些图片就会快从缓存中直接拿图片,速度就会杠杠的!如(需要在b页面图片1,我们可以在a页面中先加载一次,记住,a页面和b页面在同一个服务器下):


    
    <div>
        <img src="图片1" />
    div>


    
    
    <div>
        <img src="图片1" />
    div>复制代码

2、闪烁灯卡顿的,问题,可以调节响应图片的动画的更新频率解决

  • 另外,为了防止用户多次点击抽奖,多次向后台发送数据,对ajax请求进行了一定的处理,当然了,也为了防止连续点击抽奖按钮,多次动画,也进行了响应的处理,主要思路就是点击抽奖的时候,显示一个遮罩层,这个遮罩层的z-index大于抽奖按钮,这样就阻止了用户再次点击抽奖按钮,最后抽奖成功之后,再把这个遮罩层隐藏。主要原理代码如下:
    var isRequesting = false;
    function getData(){
        //如果当前用户正在进行抽奖,那么就返回
        if(isRequesting)return false;
        isRequesting = true;
        //显示遮罩层
        $("._mask").css('display','block');
        //其余代码省略
        $.ajax({
            url:server_api_address,
            type:'GET',
            success : function(data){
                isRequesting = false;
                //其余代码省略


                //当前转盘动画完成之后
                //再隐藏遮罩层
                animationComplate(function(){
                    $("._mask").css('display','none');
                });
            },
            error:function(data){
                //代码省略
            }
        });
    };复制代码

需要改进的地方

  • 目前来看,我觉得唯一有点欠缺的地方就是:转盘和指针的旋转速度总是匀速的,很难带给用户那种惊心动魄、期待的真实抽奖的感觉。所以转盘的速度算法方面应该做一些改进!让抽奖更接近真实感觉!

  • 当然其它一些地方问题,这里就不注重谈了,因为涉及到具体的前后台对接问题!

你可能感兴趣的:(实战实现一个h5转盘抽奖页面,谈谈代码实现,顺便谈一下优化和数据处理)