實戰實現一個h5轉盤抽獎頁面，談談程式碼實現，順便談一下優化和資料處理

JF_sander發表於2017-05-05
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頁面在同一個伺服器下）：


    <!--a頁面-->
    <div>
        <img src="圖片1" />
    </div>


    <!--b頁面-->
    <!--此時載入圖片當然就是從快取中拿到的圖片-->
    <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){
                //程式碼省略
            }
        });
    };複製程式碼

需要改進的地方

  • 目前來看，我覺得唯一有點欠缺的地方就是：轉盤和指標的旋轉速度總是勻速的，很難帶給使用者那種驚心動魄、期待的真實抽獎的感覺。所以轉盤的速度演算法方面應該做一些改進！讓抽獎更接近真實感覺！

  • 當然其它一些地方問題，這裡就不注重談了，因為涉及到具體的前後臺對接問題！

相關文章