微信小程序实现转盘抽奖

wxml：

 <view class="Img" animation="{{animationData}}">
          <image class="disk" src="https://oss.sitongruisi.com/55.png" mode="widthFix" style="width: 610rpx;height: 610rpx" />
          <view class="canvas-line">
            <view class="canvas-litem" wx:for="{{awardsList}}" wx:key="index" style="transform:rotate({{item.lineTurn}})">
            </view>
          </view>
          <view class="canvas-list">
            <view class="canvas-item" wx:for="{{awardsList}}" wx:key="index">
              <view class="canvas-item-text u-flex-col" style="transform:rotate({{item.turn}})">
                <view>{{item.award}}</view>
                <image src="{{ item.logo }}" mode="widthFix" style="width:60rpx;height: 47rpx;"></image>
              </view>
            </view>
          </view>
        </view>

wxss:

 .Img{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  transform: rotate(-22.5deg);
}


/* 分隔线 */
.canvas-line {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
}

.canvas-litem {
  position: absolute;
  left: 300rpx;
  top: 0;
  width: 3rpx;
  background-color: rgba(228, 55, 14, 0.4);
  overflow: hidden;
  -webkit-transform-origin: 50% 300rpx;
  transform-origin: 50% 300rpx;
}

.canvas-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.6);
  text-align: center;
}



.canvas-item-text {
  position: relative;
  display: block;
  padding-top: 65rpx;
  color: #900000;
  font-size: 30rpx;
  font-weight: bold;
  margin: 10rpx auto;
  text-align: center;


  -webkit-transform-origin: 50% 292rpx;
  transform-origin: 50% 292rpx;
  width: 150rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-flex-col {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
}

js：

data:{
	awards: [{
	      id: "47",
	      logo: "https://oss.sitongruisi.com/2c43c9928221e78b0048800c1c57d1f.png",
	      probability: "50.00",
	      title: "一等奖",
	    }, {
	      id: "46",
	      logo: "https://oss.sitongruisi.com/06cf42dfc7f57d59b0c089223d70a5d.png",
	      probability: "50.00",
	      title: "二等奖"
	    }, {
	      id: "48",
	      logo: "https://oss.sitongruisi.com/e6d33252d94f3247ab0a5c7b578fb36.png",
	      probability: "0.00",
	      title: "三等奖"
	    }, {
	      id: "50",
	      logo: "https://shop.duzunds.com/attachment/images/2/2023/01/SQoqk8XDv5qfeF5NQFQKVM9Vf5UyK5.png",
	      probability: "0.00",
	      title: "谢谢参与"
	    }, {
	      id: "47",
	      logo: "https://oss.sitongruisi.com/2c43c9928221e78b0048800c1c57d1f.png",
	      probability: "50.00",
	      title: "一等奖"
	    }, {
	      id: "46",
	      logo: "https://oss.sitongruisi.com/06cf42dfc7f57d59b0c089223d70a5d.png",
	      probability: "50.00",
	      title: "二等奖"
	    }, {
	      id: "48",
	      logo: "https://oss.sitongruisi.com/e6d33252d94f3247ab0a5c7b578fb36.png",
	      probability: "0.00",
	      title: "三等奖"
	    }, {
	      id: "50",
	      logo: "https://shop.duzunds.com/attachment/images/2/2023/01/SQoqk8XDv5qfeF5NQFQKVM9Vf5UyK5.png",
	      probability: "0.00",
	      title: "谢谢参与"
	    }],
    runDeg: 0,
    cishu: 2,
    awardsList: [],
}

  draw() {
    var awards = this.data.awards;
    var awardsList = [];
    var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  
    // 奖项列表  
    for (var i = 0; i < awards.length; i++) {
      awardsList.push({
        turn: (i * turnNum) + 22.5 + 'deg',
        lineTurn: i * turnNum + turnNum / 2 + 'deg',
        award: awards[i].title,
        id: awards[i].id,
        logo: awards[i].logo,
        probability: awards[i].probability
      });
    }
    this.setData({
      awardsList: awardsList
    })
  },

	start(){
		wx.request({
      method: "get",
      url: "---------",
      data: {
        user_id: wx.getStorageSync('users').id,
      },
      success: (t) => {
        this.setData({
          cishu: t.data.state,
          msg: t.data.msg,
          lucky_draw: t.data.type
        })
        setTimeout(()=>{
          this.startRotate()
        })
      }
    })

	},

 startRotate() {
    let userinfo = wx.getStorageSync('userInfo');
    if (!userinfo) return this.setData({
      showModal: true
    }), app.getUserInfo(function (s) {})

    let that = this

    if (that.data.msg == '点的太快了' && that.data.cishu == '0') {
      wx.showToast({
        title: '点的太快了',
        icon: 'none'
      })
      return
    }

    if (that.data.cishu == 1 && !that.data.isChance) {
      wx.showToast({
        title: '分享再得一次抽奖机会',
        icon: 'none'
      })
      return
    }

    if (that.data.cishu == 0) {
      wx.showToast({
        title: '抽奖次数不足',
        icon: 'none'
      })
      return
    }

    wx.showModal({
      cancelColor: '#666666',
      cancelText: '取消',
      content: '开始免费抽奖',
      success(res) {
        if (res.confirm) {

          // 获取上次抽奖记录 lucky_draw:'1' || '2' || '0'
          let prve = that.data.lucky_draw === '0' ? null : that.data.lucky_draw
          // 输出0||1
          let isFirst = () => Math.round(Math.random() + 1)
          // 输出[0, 1] || [4, 5]
          let resultIndex = [
            [0, 1],
            [4, 5]
          ][isFirst() - 1]
          // 抽奖
          let awardsNum = that.data.awardsList;
          // 处理一等奖，二等奖概率
          let awardIndex = prve ? prve == '1' ? resultIndex[1] : resultIndex[0] : resultIndex[isFirst() - 1]
          let runNum = 6; //旋转6周
          let duration = 4000; //时长
          that.data.runDeg = that.data.runDeg || 0;
          that.data.runDeg = that.data.runDeg + (360 - that.data.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length) - 22.5);//计算
          that.data.animation.rotate(that.data.runDeg).step(); // 表示一组动画完成
          that.data.animationData = that.data.animation.export(); // 这个方法是导出动画数据（传递给animationData属性）
          that.setData({
            animationData: that.data.animationData,
            deg: that.data.deg,
            awardType: that.data.awardsList[awardIndex].id
          })

          setTimeout(()=>{
            that.getDraw(that.data.awardsList[awardIndex].id)
          },4100)
        }
      }
    })

  },