微信小程序实现抽奖大轮盘

最近遇到做活动抽奖要用转盘，记录下做个笔记。

最终效果图：

xml部分：

<view class="draw-container">
  <view class="draw-table-box">
    <image animation="{{animationData}}" src="{{tableBg}}" class="draw-table-bg"/>
    <image bindtap="tableroll" src="{{go}}" class="draw-table-go {{times?'':'draw-table-go-grey'}}"/>
  </view>
  <view>剩余抽奖次数: {{times}}</view>
</view>

css部分：

.draw-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40rpx;
}
.draw-table-box {
    width: 556rpx;
    height: 558rpx;
    position: relative;
}
.draw-table-bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.draw-table-go {
    width: 148rpx;
    height: 192rpx;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.draw-table-go-grey {
    filter: grayscale(100%);
    filter: gray;
}

js部分：

Page({
  data: {
    tableBg: 'https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png',
    go: 'https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png',
    animationData: {},
    singleDeg: 60, //单个奖项的角度
    i: 4, // 自测中奖初始值
    initDeg: 0,
    awards: [
      {id: 6, degree: '6等奖', name: 'iphone xs'},
      {id: 3, degree: '1等奖', name: '50积分'},
      {id: 4, degree: '2等奖', name: '10积分'},
      {id: 5, degree: '3等奖', name: '5积分'},
      {id: 2, degree: '4等奖', name: '2积分'},
      {id: 1, degree: '5等奖', name: '1积分'},
    ],
    times: 3,
    isClick: false, // 转盘转动时防止用户再次点击抽奖
  },
  onLoad() {
  },
  onShow() {
    // 创建一个动画实例
    var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease',
    })
    this.animation = animation
  },
  tableroll() {
    if(this.data.isClick) return
    if(this.data.times<1) return
    console.log('触发抽奖=====')
    this.setData({
      isClick: true
    })
    let randomNum = Math.random()
    let deviation = randomNum > 0.5 ? randomNum - 0.1 : randomNum + 0.1
    this.mockDrawInfo().then((result) => {
      let res1 = this.data.awards.filter((item)=> {
        return item.degree == result.degree
      })
      this.data.i++
      if(this.data.i===7) {
        this.data.i = 1
      }
      console.log('mockDrawInfo==result=======res1[0]', result, res1[0])
      let rotateDeg = 60 * (res1[0].id - deviation) + 360
      console.log('rotateDeg===', rotateDeg, res1[0].id)
      let surplusDeg = (Math.floor(Math.random()*4) + 4) * 360
      this.animation.rotate(this.data.initDeg + rotateDeg + surplusDeg).step()
      this.data.initDeg += surplusDeg
      this.setData({
        animationData: this.animation.export(),
      })
      setTimeout(() => {
        this.setData({
          isClick: false,
          times:--this.data.times,
        })
      }, 2000)
    })
  },
  // 模拟中奖信息接口返回数据
  mockDrawInfo() {
    return new Promise((resolve, reject) => {
      setTimeout(() => { 
        resolve({degree: this.data.i+'等奖'})
      }, 1000)
    })
  }
})