微信小程式-開心大轉盤（圓盤指標）程式碼分析

weixin_33912246發表於2018-08-27
微信小程式指標

大轉盤是比較常見的抽獎活動 。以前做過h5的大轉盤，最近小程式比較火，客戶要求做小程式的大轉盤。我們就來分析下程式碼。先上幾個圖：

   

 

介面效果還是很不錯的。

做介面還是比較容易的，只要有前端基礎沒啥難度。

關鍵是 抽獎的動畫，我們就是要小程式本身的動畫：

介面載入的時候定義一個動畫物件：

onLoad(opt) {
    this.setPlateData(); //執行設定轉盤表面的文字
    let that = this;
    let aniData = wx.createAnimation({ //建立動畫物件
      duration: 2000,
      timingFunction: 'ease'
    });
    this.aniData = aniData; //將動畫物件賦值給this的aniData屬性
  },
View Code

wx.createAnimation(OBJECT) 方法要是不懂，可以檢視官方的文件：

https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html

 

接下來，點選“開始抽獎”，執行動畫：

html程式碼：
<view class="plate-btn-wrap" bindtap="startRollTap">
        <image src='/images/start@3x.png' class='start-img'></image>
      </view>
js程式碼：
startRollTap() { //開始轉盤
    let that = this;
    if (canRoll) {
      canRoll = false;
      let aniData = this.aniData; //獲取this物件上的動畫物件
      let rightNum = ~~(Math.random() * lotteryArrLen); //生成隨機數
      console.log(`隨機數是${rightNum}`);
      console.log(`獎品是：${lottery[rightNum]}`);
      aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); //設定轉動的圈數
      this.setData({
        aniData: aniData.export()
      })



      setTimeout(function () {

        that.setData({
          ShowZheZhao: true,
          zjname: lottery[rightNum],
          zjnamepic: that.data.lottery_img[rightNum],
        });

        

      }, 2500);

      
      num++;
      canRoll = true;
    }
  },

 

若想獲得詳細地址：請點選下面的連結：

https://www.huzhan.com/code/goods281833.html

 

相關文章