微信小程序之转盘抽奖

　　公司需求要做转盘抽奖，刚开始也是踩了好几个坑，跟大家一起来分享下。刚开始搞微信小程序的转盘抽奖，用CSS3+定时器写的。在微信开发工具中没有问题，但是真机测试时发现动画卡的要死，完全是木偶人的感觉。

不得已，开始用微信的 wx.createAnimation写，废话不多说，直接上代码 ~

(我用的是wepy工具开发的，所以要是不用wepy的话，要分开写.js  .wxss  .wxml。有兴趣的可以在微信搜索 “糖果福利社”小程序，查看实际效果)

效果图：

                                                                 

 

 

CSS部分：

<style lang="less">
.wheel {
  position: absolute;
  top: calc((100% - 880rpx)/2);
  width: calc(100% - 60rpx);
  background-color: #fff;
  margin: 0 30rpx;
  border-radius: 16rpx;
  text-align: center;
  overflow: hidden;
  .wheel_wp {
    width: calc(100% - 120rpx);
    padding: 0 60rpx 60rpx 60rpx;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
    .wheel_pointer{
      position: absolute;
      width: 150rpx;
      height: 150rpx;
      top: 344rpx;
      left: 50%;
      margin: -75rpx 0 0 -75rpx;
      transform-origin: 50% 50%;
    }
    .wheel_pointer image{
      position: absolute;
      width: 150rpx;
      height: 238rpx;
      left: 0;
      top: -40rpx;
    }
    .times {
      font-size: 32rpx;
      height: 64rpx;
      text-align: center;
      line-height: 64rpx;
      margin-top: 24rpx;
      margin-bottom: 32rpx;
      view {
        display: inline-block;
        height: 64rpx;
        width: 180rpx;
        margin: 0 20rpx;
        background-color: #f4f4f4;
        border-radius: 8rpx;
      }
      button {
        display: inline-block;
        height: 40rpx;
        width: 40rpx;
        background-color: #FF4538;
        border-radius: 50%;
        color: #fff;
        padding: 0;
        line-height: 32rpx;
        font-size: 44rpx;
        position: relative;
        top: 8rpx;
      }
    }
    .invite_text {
      color: #666;
      font-size: 24rpx;
    }
  }
  .close {
    width: 100%;
    height: 60rpx;
    image {
      width: 24rpx;
      height: 24rpx;
      padding: 24rpx 24rpx 12rpx 24rpx;
      float: right;
    }
  }
}
</style>

HTML部分：

<view class="wheel">
    <view class="close">
      <image bindtap="closeWin" src="https://o3pvuu23u.qnssl.com/48524237-601b-4611-b96d-01d99abd1ef2.png" />
    </view>
    <view class="wheel_wp">
      <image mode="widthFix" src="https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png"
        animation="{{animationData}}" />
      <view class="wheel_pointer" bindtap="start">
        <image mode="widthFix" src="https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png" />
      </view>
      <view class="times">
        <text>可抽</text>
        <view>{{times}}次</view>
        <button open-type="share">+</button>
      </view>
      <view class="invite_text">每邀请一个好友可获得一次抽奖机会</view>
    </view>
  </view>

JS部分：

<script>
import wepy from 'wepy'


export default class wheel extends wepy.component {
  data = {
    deg: 0, // 初始化角度
    singleAngle: 60, // 每片扇形的角度
    awardNumer: 1, // 中奖区域 从1开始
    isStart: false,
    animationData: {}
  }
  onLoad(options) {
    const animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease-in-out'
    })
    this.animation = animation
  }
  methods = {
    start() {
      if (this.isStart) return
      let tmpnum = Math.random()
      tmpnum = tmpnum < 0.5 ? tmpnum + 0.1 : tmpnum - 0.1
      const endAddAngle = (this.awardNumer - 1 + tmpnum) * this.singleAngle + 360 // 中奖角度
      const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360 // 随机旋转几圈再停止
      this.animation.rotate(this.deg + endAddAngle + rangeAngle).step()
      this.animationData = this.animation.export()
      this.deg += rangeAngle
      this.$apply()
    },
    closeWin() {
      this.animation.rotate(0).step()
      this.animationData = this.animation.export()
      this.deg = 0
      this.$apply()
    }
  }
}
</script>