微信小程序转盘实现（真心话大冒险）

前言

学了微信小程序后，心血来潮弄了个真心话大冒险，觉得还挺好玩，毕竟现在去哪找工作都要上线产品，所有必须学以致用。

废话不多说，接下来直接上图上代码吧

实现效果

扫码体验

1. 首先给出素材图片

2. wxml代码

<view class="background">
<!-- 转盘 -->
<image src="../image/point1.png" bind:tap="onstart" class="point" mode="aspectFit" style="width:40%;height:40%;" />
<image animation="{{rotateDate}}" src="../image/wheelok.png" class="wheel" mode="aspectFit" style="width:90%;height:90%;" />
</view>

3. wxss代码

.background {
  /* # CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 
# "vw" = "view width"  "vh" = "view height" */
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  margin: 0 auto;
  display: flex; /*flex布局 */
  justify-content: center; /*水平轴线居中*/
}
/* 指针 */
.point {
  margin-top: 25vh;
  position: absolute;
  z-index: 10;
}
/* 转盘 */
.wheel {
  position: absolute;
  z-index: 5;
}

4. js代码

//生成动画实例
let animation = wx.createAnimation({
  duration: 3000,
  timingFunction: 'ease',
});
Page({
  data: {
    rotateDate: {},
    turning: false, 
  },
  onLoad: function (options) {
  },
  // 转动转盘
  onstart: function () {
    let _this = this;
    if (!this.data.turning) {
      //定义随机旋转度数
      let rdm = 45;
      //定义转盘角度
      let cat = 45;
      rdm = Math.floor(720 + Math.random() * 3600);
      _this.setData({
        degrees: rdm
      })
      console.log(rdm);
      animation.rotate(rdm).step();
      this.setData({
        rotateDate: animation.export(),
        turning: true
      });
      setTimeout(() => {
        let num = rdm % 360; //随机数除360的余数
        //封装提示类
        function showModal(str) {
          // 使手机振动400ms
          wx.vibrateLong();
          wx.showModal({
            title: "",
            content: str,
            showCancel: false,
            success: function () {
              // 调用实例的方法来描述动画
              let animation = wx.createAnimation({
              //计算每一角度的大小（360/8=45）
                duration: 45,
                timingFunction: "linear"
              })
              animation.rotate(0).step();
              _this.setData({
                rotateDate: animation.export()
              })
            }
          });
        }
        if (num <= cat * 1) {
          showModal(
            "大冒险");
          wx.vibrateLong();
        } else if (num <= cat * 2) {
          showModal("真心话");
        } else if (num <= cat * 3) {
          showModal("大冒险");
        } else if (num <= cat * 4) {
          showModal("真心话");
        } else if (num <= cat * 5) {
          showModal("大冒险");
        } else if (num <= cat * 6) {
          showModal("真心话");
        } else if (num <= cat * 7) {
          showModal("大冒险");
        } else if (num <= cat * 8) {
          showModal("真心话");
        }
      }, 3000);
    }
  }
});