微信小程序 转盘demo

js:

Page({

  data: {},

  /**
   * 初始化
   */
  onLoad: function(options) {
    let awardsList = ['1元红包', '5元红包', '9元红包', '15元红包', '1.5元红包', '谢谢惠顾'];
    this.initAwardList(awardsList);
  },

  /**
   * 初始化抽奖
   */
  initAwardList: function(list) {
    // 绘制转盘
    var awardsList = [];
    var angle = 360 / list.length;
    for (var i = 0; i < list.length; i++) {
      awardsList.push({
        degree: {
          item: `${i * angle}deg`,
          line: `${(i + 0.5) * angle}deg`,
          bg_1: `${(i - 0.5) * angle + 90}deg`,
          bg_2: `${angle - 90}deg`
        },
        award: list[i],
        color: this.getRandomColor()
      })
    }
    this.setData({
      awardsList: awardsList
    });
  },

  /**
   * 开始抽奖
   */
  getLottery: function() {

    /// 获奖序号
    var awardIndex = 2;
    /// 转动时间
    let duration = 4000;
    /// 转动圈数
    let runNum = 6;

    // 旋转抽奖
    this.runDegs = this.runDegs || 0;
    this.runDegs = this.runDegs + (360 - this.runDegs % 360) + (360 * runNum - awardIndex * (360 / this.data.awardsList.length));

    /// 开始转动
    this.startRun(awardIndex, duration, this.runDegs);
  },

  /**
   * 开始转动
   */
  startRun: function(awardIndex, duration, runDegs) {
    /// 动画
    var animation = wx.createAnimation({
      duration: duration,
      timingFunction: 'ease'
    })
    animation.rotate(runDegs).step();
    this.setData({
      animationData: animation.export()
    })

    /// 中奖提示
    setTimeout(() => {
      this.stopRun(awardIndex);
    }, duration + 300)
  },

  /**
   * 结束转动
   */
  stopRun: function(awardIndex) {
    console.log('抽中了奖品: ' + awardIndex)
  },

  /**
   * 获取随机颜色
   */
  getRandomColor: function() {
    var func = function(color) {
      return (color += '0123456789abcdefg' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : func(color);
    }
    return `#${func('')}`
  }
})

wxml:

<view style='width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; position: relative; '>

  <view animation="{{animationData}}" style='position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 30rpx solid gainsboro; overflow: hidden; box-shadow: 0 0 16rpx black;'>

    <!-- 背景色 -->
    <view style='position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;'>
      <view wx:for='{{awardsList}}' wx:key='{{index}}' style='position: absolute; left: 0; top: 0; width: 100%; height: 50%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotate({{item.degree.bg_1}}); transform: rotate({{item.degree.bg_1}}); overflow: hidden;'>
        <view style='width: 50%; height: 100%; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate({{item.degree.bg_2}}); transform: rotate({{item.degree.bg_2}}); background-color: {{item.color}}'></view>
      </view>
    </view>

    <!-- 线条 -->
    <view style='position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3;'>
      <view wx:for='{{awardsList}}' wx:key='{{index}}' style='background-color: white; width: 4rpx; height: 50%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotate({{item.degree.line}}); transform: rotate({{item.degree.line}}); position: absolute; top: 0; left: 0; right: 0; margin: auto;'></view>
    </view>

    <!-- 转盘 -->
    <view style='position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4;'>
      <view wx:for='{{awardsList}}' wx:key='{{index}}' style='position: absolute; left: 0; top: 0; right: 0; bottom: 50%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotate({{item.degree.item}}); transform: rotate({{item.degree.item}});'>
        <view style='width: 40rpx; height: auto; font-size: 28rpx; color: white; line-height: 34rpx; word-break: break-all; margin-top: 6rpx; text-align: center;'>{{item.award}}
        </view>
      </view>

    </view>

  </view>

  <!-- 按钮 -->
  <view style='width: 80rpx; height: 80rpx; background-color: yellow; font-size: 28rpx; color: #353535; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 5;' bindtap='getLottery'>抽奖</view>

</view>