微信小程式：抽獎轉盤

隨 遇 而 安發表於2018-08-09
微信小程式

先上效果圖：

微信小程式：抽獎轉盤

利用到的元件和API：

1.canvas畫布

2.動畫

上資料：

data:{    
    animationData:{},
    hidden:true,            //中獎展示
    disabled:false,         //指標按鈕是否可點選
    i:0,                    //第幾次抽獎
    prize:'',               //幾等獎
    prizes:''              //轉盤轉完展示
  }複製程式碼

hidden  ： 中獎展示，轉盤轉彎後顯示中獎獎品

disabled  ： 點選指標按鈕後，在轉盤動畫沒執行完前設定為true，不可繼續點選

i  ： 第幾次抽獎，微信小程式的動畫有個bug，通過 step() 分隔動畫，只有第一步動畫能生效，這個值就是為了解決這個bug的。

prize  ： 暫存獲得的獎品 

prizes  ： 展示獲獎獎品

wxml程式碼：

 <view class='container'>
    <canvas canvas-id="canvas1" 
            style='width:100%;height:750rpx;' 
            animation='{{animationData}}'>    
        <cover-image class='plate' src='/images/plate.png'></cover-image>
    </canvas>
    <canvas canvas-id="canvas2"
            style='width:300rpx;height:300rpx;position:absolute;top:50%;
                   left:50%;margin-left:-150rpx;margin-top:-150rpx;'>
       <button class='plate'                  
               catchtap='onTurnTap'                  
               style='background:url("/images/pointer.png") no-repeat top center;
                      background-size:contain'                 
                      disabled='{{disabled}}'>
       </button>
    </canvas>
  </view>
  <view class='prize'>  
    <text hidden="{{hidden}}">恭喜您獲得{{prizes}}</text>
  </view>複製程式碼

js部分：

轉盤要轉，就得轉一個度數，那麼首先定義個獲取旋轉角度的函式

getDegree:function(){    
    return Math.floor(Math.random()*361);  
}複製程式碼

微信小程式開發文件中說rotate的deg的範圍-180~180，不過度數超出範圍，是會一直轉過去的，所以這裡給的範圍是[0,360]

然後開始擼個動畫，這個動畫在點選指標按鈕的時候觸發

onTurnTap:function(e){
    var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease'
    })
    this.animation = animation;
    var degree = Math.abs(this.getDegree());
    var i = this.data.i +1;
    this.setData({
      disabled:true,
      i:i
    })
    if(degree > 0 && degree<= 30){
      this.setData({
        prize:'10元現金券'
      })
    }else if(degree > 30 && degree <= 90){
      this.setData({
        prize: '5元現金券'
      })
    } else if (degree > 90&& degree <= 150) {
      this.setData({
        prize: '20元現金券'
      })
    } else if (degree > 150 && degree <= 210) {
      this.setData({
        prize: '100元現金券'
      })
    } else if (degree > 210 && degree <= 270) {
      this.setData({
        prize: '1元現金券'
      })
    } else if (degree > 270 && degree <= 330) {
      this.setData({
        prize: '50元現金券'
      })
    } else if (degree > 330 && degree <= 360) {
      this.setData({
        prize: '10元現金券'
      })
    }
    animation.rotate(degree + 3600*(this.data.i)).step();
    this.setData({
      animationData: animation.export()
    })
    setTimeout(function(){
      this.setData({
        disabled: false,
        hidden: false,
        prizes:this.data.prize
      })
    }.bind(this),2000)
  }
})複製程式碼

       觸發點選事件就建立一個動畫例項animation,設定好引數，這裡設定的動畫持續時間(2000)要與下面的展品延遲顯示的延遲時間(2000)相等，這樣就可以達到轉盤轉彎，展品立馬顯示。

var animation = wx.createAnimation({
   duration: 2000,
   timingFunction: 'ease'
})
this.animation = animation;
this.setData({
  animationData: animation.export()
})
複製程式碼

.export()會把動畫資料傳遞給轉盤的animation屬性。

        旋轉採用animation的totate(deg)方法，從原點觸發旋轉deg度。

var i = this.data.i +1;

animation.rotate(degree + 3600*(this.data.i)).step();複製程式碼

degree是隨機獲取到的旋轉角度，加上一個圓的度數的整數倍3600，就可以實現多轉幾圈，不至於點選指標轉盤，轉了不到一圈就停下來了。

判斷獲取到的獎品：

 if(degree > 0 && degree<= 30){
      this.setData({
        prize:'10元現金券'
      })
    }else if(degree > 30 && degree <= 90){
      this.setData({
        prize: '5元現金券'
      })
    } else if (degree > 90&& degree <= 150) {
      this.setData({
        prize: '20元現金券'
      })
    } else if (degree > 150 && degree <= 210) {
      this.setData({
        prize: '100元現金券'
      })
    } else if (degree > 210 && degree <= 270) {
      this.setData({
        prize: '1元現金券'
      })
    } else if (degree > 270 && degree <= 330) {
      this.setData({
        prize: '50元現金券'
      })
    } else if (degree > 330 && degree <= 360) {
      this.setData({
        prize: '10元現金券'
      })
    }複製程式碼

根據轉盤被幾等分，設定好條件進行判斷

展示獎品：

展示獎品，肯定是在轉盤轉完之後才會展示，轉盤旋轉動畫持續時間是兩秒，那麼獎品展示就得延遲兩秒執行，可以用setTimeout()。

setTimeout(function(){
  this.setData({
    disabled: false,
    hidden: false,
    prizes:this.data.prize
  })
}.bind(this),2000)複製程式碼


github:github.com/lcp1551/Lot…


相關文章