微信小程序之转盘抽奖

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

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

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

效果图：

                                                                 

 

 

CSS部分：

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>

 

转载于:https://www.cnblogs.com/zjp-zxy/p/10196600.html