使用微信小程序实现幸运大转盘抽奖功能

效果图如下所示：

———————— wxml代码示例：

<view class="body">

  <view class="box">

    <image class="bg" src="{{bg}}" animation="{{animationRotate}}"></image>

    <image bindtap="lottery" class="arrows {{isTurnOver?'':'grayscale'}}" src="{{arrows}}">

     </image>

  </view>

</view>

———————————— wxss代码示例：

.body {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 100vw;

  height: 100vh;

}

.box {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 600rpx;

  height: 600rpx;

}

.box .bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.box .arrows {

  position: relative;

  top: -28rpx;

  width: 200rpx;

  height: 249rpx;

}

.grayscale {

  filter: grayscale(70%);

}

—————————    js代码示例：

Page({

  data: {

    // 转盘奖品背景

    bg: "/static/zp.png",

    // 转盘箭头抽奖按钮

    arrows: "/static/dj.png",

    // 抽奖状态，是否转完了

    isTurnOver: true

  },

  // 点击抽奖按钮

  lottery() {

    // 如果不在抽奖状态中，则执行抽奖旋转动画

    if (this.data.isTurnOver) {

      // 把抽奖状态改为未完成

      this.setData({

        isTurnOver: false

      })

      // 调取后端接口拿到抽奖后返回的ID ----省略

      let prize_id = 5;

      // 调用旋转动画方法

      this.rotate(prize_id)

    } else {

      wx.showToast({

        title: '请勿重复点击',

        icon: 'none'

      })

    }

  },

  // 旋转动画方法

  rotate(prize_id) {

    // 执行完动画所需要的时间

    let _duration = 10000;

    let animationRotate = wx.createAnimation({

      duration: _duration,

      timingFunction: 'ease', //动画以低速开始，然后加快，在结束前变慢

    })

    // 解决二次点击抽奖后不再旋转的问题

    animationRotate.rotate(0).step({

      duration: 1

    })

    /*

     * 旋转的角度

     * 转盘有6个奖项，所以一个奖项的度数为：360除以6等于60、

     * 要转完一圈 → 60 * 6

     * 设置动画转十全 → 60 * 6 * 10

     * 又因为转盘是顺时针旋转的，默认指定奖品1

     * 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置

     * */

    let angle = (60 * 6 * 10) - 60 * (prize_id - 1);

    animationRotate.rotate(angle).step()

    this.setData({

      animationRotate: animationRotate.export()

    })

    // 设置倒计时，保证最后一圈执行完了，才更改状态

    setTimeout(() => {

      this.setData({

        isTurnOver: true

      })

      // 弹出中奖提示框

      wx.showModal({

        title: '恭喜您',

        content: `抽中了${prize_id}号奖品`,

        showCancel: false

      });

    }, _duration)

  }

})

—————————————— 静态图片资源 （注意：放在图片路径与图片命名!!）