先給大家看下效果圖：

點選“試試手氣”，就開始搖獎，當三個圖片結果一致的時候即為中獎。

搖獎的動畫效果，使用小程式提供的動畫功能：Animation

第一步：設定定時器讓第一列的圖片能夠從上向下移動，製造滾動效果。
第二步：當一張圖片移動消失後，回到原本的位置，更改該圖片對應的顯示圖片，製造顯示不同圖片的效果。
第三步：設定一個預定停止的時間，當定時達到時間後，停止定時器，將當前顯示的圖片顯示在方框中間。

下面請看詳情程式碼：

Component({

  behaviors: [],

  properties: {},
  data: {
    bottom: '86rpx',
    showDefault: false,
    isActive: false,
    itemImgs: [{
      id: 1,
      url: "./image/item1.png"
    }, {
      id: 2,
      url: "./image/item2.png"
    }, {
      id: 3,
      url: "./image/item3.png"
    }],
    currentLine1: { // 第一列當前顯示的圖片
      id: 1,
      url: "./image/item1.png"
    },
    currentLine2: { // 第二列當前顯示的圖片
      id: 2,
      url: "./image/item2.png"
    },
    currentLine3: { // 第三列當前顯示的圖片
      id: 3,
      url: "./image/item3.png"
    },
    animationData1: {}, // 第一列動畫
    animationData2: {}, // 第二列動畫
    animationData3: {}, // 第三列動畫
    resNum: [] // 儲存結果，將每一列的結果儲存下來，如果有三個值，，說明搖獎結束
  }, // 私有資料，可用於模板渲染

  lifetimes: {
    // 生命週期函式，可以為函式，或一個在methods段中定義的方法名
    attached: function() {},
    moved: function() {},
    detached: function() {},
  },

  // 生命週期函式，可以為函式，或一個在methods段中定義的方法名
  attached: function() {}, // 此處attached的宣告會被lifetimes欄位中的宣告覆蓋
  ready: function() {},

  pageLifetimes: {
    // 元件所在頁面的生命週期函式
    show: function() {},
  },

  methods: {
    /* 觸控開始 */
    _handleTouchStart: function() {
      this.setData({
        bottom: '80rpx'
      })
    },
    /* 觸控結束 */
    _handleTouchEnd: function() {
      this.setData({
        bottom: '86rpx'
      })
    },
    /* "試試手氣點選事件" */
    _handleClick: function() {
      if (!this.data.isActive) {
        // 隨即生成0-10之間的數，0-2：結果為1,3-5：結果為2,6-8：結果為3,8-10：不中獎
        let randomNum = Math.random() * 10;
        randomNum = parseInt(randomNum, 10);

        // 隱藏預設圖片
        this.setData({
          isActive: true, // 修改標識狀態，表明搖獎正在進行，禁止重複點選
          showDefault: true,
          resNum: [] // 將結果陣列置為空
        })

        this._handleAnimate(1, randomNum); // 第一個動畫
        this._handleAnimate(2, randomNum); // 第二個動畫
        this._handleAnimate(3, randomNum); // 第二個動畫

        var self = this;
        // 校驗最終的遊戲結果，如果三個結果值都有值，並且全部一致，視為中獎，不一樣，視為未中獎
        var resTime = setInterval(function() {
          if (self.data.resNum.length === 3) {
            // 延遲1秒給出提示
            setTimeout(function() {
              if (self.data.resNum[0] === self.data.resNum[1] && self.data.resNum[0] === self.data.resNum[2]) {
                wx.showToast({
                  title: '恭喜中獎',
                  icon: 'none'
                })
              } else {
                wx.showToast({
                  title: '很遺憾，未中獎',
                  icon: 'none'
                })
              }
            }, 1000);
            clearInterval(resTime);
          }
        }, 1000);
      } else {
        wx.showToast({
          title: '您已經搖過獎了',
          icon: 'none'
        })
      }
    },
    /**
     * 處理動畫動作
     * @param time 滾動多長時間
     * @param line 第幾列
     */
    _handleAnimate: function(line, resNum) {
      var self = this;
      // 建立動畫
      let animation = wx.createAnimation({
        duration: 200, // 執行一次動畫的時間
        timingFunction: 'linear', // 動畫的效果，平滑
      })

      // 隨即生成搖獎區滾動的總共時長，範圍5000-6000
      let randomTotalTime = Math.random() * 1000 + 5000;
      randomTotalTime = parseInt(randomTotalTime, 10);

      // 隨即生成每次迴圈間隔的時間,500-600之間的隨機數
      let tempRandom = Math.random() * 300 + 250;
      tempRandom = parseInt(tempRandom, 10);

      let num = 0; // 設定計數標籤，從0開始
      let count = 1; // 迴圈計數
      // 設定迴圈
      let loop = setInterval(function() {
        num++; // 每次迴圈加1
        count++;
        if (num > 2) {
          // 如果計數標籤大於2，置為0
          num = 0;
        }
        if (count * tempRandom >= randomTotalTime) {
          // 到達預定的時間點，停止迴圈，將圖片定位到顯示區域中間位置
          animation.translateY(85).step({
            duration: 1000
          });

          if (resNum >= 0 && resNum < 3) {
            num = 0;
          } else if (resNum >= 3 && resNum < 6) {
            num = 1;
          } else if (resNum >= 6 && resNum < 9) {
            num = 2;
          }

          handleSet(self);
          count = 0;
          // 更新結果陣列
          let tempArr = self.data.resNum;
          tempArr.push(num);
          self.setData({
            resNum: tempArr
          })
          clearInterval(loop); // 停止迴圈
        } else {
          animation.translateY(170).step().translateY(0).step({
            duration: 0
          });
          handleSet(self);
        }

        function handleSet(self) {
          if (line === 1) {
            self.setData({
              currentLine1: self.data.itemImgs[num], // 修改顯示的圖片
              animationData1: animation.export()
            })
          } else if (line === 2) {
            self.setData({
              currentLine2: self.data.itemImgs[num], // 修改顯示的圖片
              animationData2: animation.export()
            })
          } else if (line === 3) {
            self.setData({
              currentLine3: self.data.itemImgs[num], // 修改顯示的圖片
              animationData3: animation.export()
            })
          }
        }
      }, tempRandom);
    },
    /* 動畫結束後處理事件 */
    _handleTransitionend: function(val) {
      // console.log(val)
    }
  }
})
 

這裡我將抽獎小遊戲寫成了自定義元件，方便在小程式中多處使用，詳情的完整內容可以去我的GitHub上檢視：
搖獎小遊戲元件
覺得還可以給個star吧。

歡迎關注博主——小聖賢君，有問題可以留言哦~