微信小程序抛硬币平替图片旋转功能（组件dropdown-menu）

先看效果

小小声说一句：其实不是真的旋转，而是一直在向前旋转180度再向后旋转180度，只是只要速度够快就看不出来哈哈哈哈哈哈哈哈哈哈哈哈（？

直接贴代码和注释吧

（注意：这里引用了vant组件dropdown-menu）

js：这里根据结果不同，弹窗内容和动画不一样。

Page({
  data: {
    animation: {},
    img: "/pages/images/16pic_6521445_417454cb.jpg",
    wentiji: [{ text: '要不要继续抽池子', value: 0 }, { text: '要不要氪金',value: 1}, {
      text: '买不买背景', value: 2}, { text: '问题在我心中', value: 3 }, ], //问题集
    value: 0,
    zxwb: 0,
    jinyong: false,
  },

  onChange(value) {
    this.setData({
      value: value.detail
    })
  },

  start: function () {//开始按钮
    this.setData({
      zxwb: 0,
      jinyong: true,
    })
    var i = Math.floor(Math.random() + 0.5);
    console.log(i)
    if (i == 0) {
      this.rotateFn();
      //console.log(this.data.value)
      setTimeout(this.tanchuang, 2900) //延迟时间 
    } else {
      this.rotateFn2()
      setTimeout(this.tanchuang2, 2900) //延迟时间 
    }
  },

  tanchuang() {//弹窗
    console.log("this.data.value is " + this.data.value)
    if (this.data.value == 0) {
      wx.showToast({
        title: "抽！",
        icon: 'none',
      })
    } else if (this.data.value == 1) {
      wx.showToast({
        title: "氪！",
        icon: 'none',
      })
    } else if (this.data.value == 2) {
      wx.showToast({
        title: "买！",
        icon: 'none',
      })
    } else if (this.data.value == 3) {
      wx.showToast({
        title: "正",
        icon: 'none',
      })
    }
    this.setData({
      jinyong: false
    })
  },
  tanchuang2() {
    console.log("this.data.value is " + this.data.value)
    if (this.data.value == 0) {
      wx.showToast({
        title: "不抽！",
        icon: 'none',
      })
    } else if (this.data.value == 1) {
      wx.showToast({
        title: "不氪！",
        icon: 'none',
      })
    } else if (this.data.value == 2) {
      wx.showToast({
        title: "不买！",
        icon: 'none',
      })
    } else if (this.data.value == 3) {
      wx.showToast({
        title: "反",
        icon: 'none',
      })
    }
    this.setData({
      jinyong: false
    })
  },

  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 100,
      timingFunction: 'linear',
      delay: 10
    })
  },
  rotateFn: function () {
    // this.animation.rotate(150).scale(3).step({ ducation: 8000 }) 
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.setData({
      animation: this.animation.export(), //输出动画
      zxwb: 1,
    });

  },
  rotateFn2: function () {
    // this.animation.rotate(150).scale(3).step({ ducation: 8000 }) 
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(180).step()
    this.animation.rotateY(0).step()
    this.animation.rotateY(-180).step()
    // this.animation.rotateY(0).step()
    this.setData({
      animation: this.animation.export(), //输出动画
    });

  },


})

wxss：引用了vant组件dropdown-menu，如果不需要就去掉这些

{
  "usingComponents": {
    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "@vant/weapp/dropdown-item/index",
    "van-switch": "@vant/weapp/switch/index"
  }
}

wxml：

<!-- <view style="height: 100rpx;"></view> -->
<view class="empty_tip ">

  <view style="display: flex;align-items: center;justify-content: center;margin: auto;flex-direction: column;height: 100%;">
    <view style="flex-direction: column;align-items: center;" animation="{{animation}}">
      <image style="height: 400rpx;width: 400rpx;" src="{{img}}"></image>
    </view>

    <view style="height: 36rpx;width: 100%;margin-top: 80rpx;">
      <van-dropdown-menu active-color="#ff269d">
        <van-dropdown-item get-container="body" bind:change="onChange" value="{{ value }}" options="{{ wentiji }}" />
      </van-dropdown-menu>
    </view>

    <view style="flex-direction: column;align-items: center;margin-top: 200rpx;">
      <button disabled="{{jinyong}}" bindtap="start">开始</button>
    </view>

    <view style="color: #8d8d8d;font-size: 25rpx;display: flex;align-items: center;justify-content: center;margin: auto;flex-direction: column;position: fixed;bottom: 20rpx;">
      <view>硬币图片源于网络，侵改</view>
    <view>本小程序不负责任何决策引起的损失</view>
  </view>
  </view>
</view>

wxss：

.empty_tip{
  position: fixed;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}

贴个小程序码吧哈哈哈哈哈算是宣传一下）

最后：我真的很菜）所以代码逻辑和一些别的地方可能会让您非常不理解甚至匪夷所思，反正我是看见能按照预期跑起来就蒜了哈哈哈，但是如果您有优化方法可以告诉我，如果遇到问题也可以留言（虽然我不一定答得上来