微信小程序：抽奖转盘

先上效果图：

利用到的组件和API：

1.canvas画布

2.动画

上数据：

data:{    
    animationData:{},
    hidden:true,            //中奖展示
    disabled:false,         //指针按钮是否可点击
    i:0,                    //第几次抽奖
    prize:'',               //几等奖
    prizes:''              //转盘转完展示
  }复制代码

hidden  ： 中奖展示，转盘转弯后显示中奖奖品

disabled  ： 点击指针按钮后，在转盘动画没执行完前设置为true，不可继续点击

i  ： 第几次抽奖，微信小程序的动画有个bug，通过 step() 分隔动画，只有第一步动画能生效，这个值就是为了解决这个bug的。

prize  ： 暂存获得的奖品 

prizes  ： 展示获奖奖品

wxml代码：

 <view class='container'>
    <canvas canvas-id="canvas1" 
            style='width:100%;height:750rpx;' 
            animation='{{animationData}}'>    
        <cover-image class='plate' src='/images/plate.png'></cover-image>
    </canvas>
    <canvas canvas-id="canvas2"
            style='width:300rpx;height:300rpx;position:absolute;top:50%;
                   left:50%;margin-left:-150rpx;margin-top:-150rpx;'>
       <button class='plate'                  
               catchtap='onTurnTap'                  
               style='background:url("/images/pointer.png") no-repeat top center;
                      background-size:contain'                 
                      disabled='{{disabled}}'>
       </button>
    </canvas>
  </view>
  <view class='prize'>  
    <text hidden="{{hidden}}">恭喜您获得{{prizes}}</text>
  </view>复制代码

js部分：

转盘要转，就得转一个度数，那么首先定义个获取旋转角度的函数

getDegree:function(){    
    return Math.floor(Math.random()*361);  
}复制代码

微信小程序开发文档中说rotate的deg的范围-180~180，不过度数超出范围，是会一直转过去的，所以这里给的范围是[0,360]

然后开始撸个动画，这个动画在点击指针按钮的时候触发

onTurnTap:function(e){
    var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease'
    })
    this.animation = animation;
    var degree = Math.abs(this.getDegree());
    var i = this.data.i +1;
    this.setData({
      disabled:true,
      i:i
    })
    if(degree > 0 && degree<= 30){
      this.setData({
        prize:'10元现金券'
      })
    }else if(degree > 30 && degree <= 90){
      this.setData({
        prize: '5元现金券'
      })
    } else if (degree > 90&& degree <= 150) {
      this.setData({
        prize: '20元现金券'
      })
    } else if (degree > 150 && degree <= 210) {
      this.setData({
        prize: '100元现金券'
      })
    } else if (degree > 210 && degree <= 270) {
      this.setData({
        prize: '1元现金券'
      })
    } else if (degree > 270 && degree <= 330) {
      this.setData({
        prize: '50元现金券'
      })
    } else if (degree > 330 && degree <= 360) {
      this.setData({
        prize: '10元现金券'
      })
    }
    animation.rotate(degree + 3600*(this.data.i)).step();
    this.setData({
      animationData: animation.export()
    })
    setTimeout(function(){
      this.setData({
        disabled: false,
        hidden: false,
        prizes:this.data.prize
      })
    }.bind(this),2000)
  }
})复制代码

       触发点击事件就创建一个动画实例animation,设置好参数，这里设置的动画持续时间(2000)要与下面的展品延迟显示的延迟时间(2000)相等，这样就可以达到转盘转弯，展品立马显示。

var animation = wx.createAnimation({
   duration: 2000,
   timingFunction: 'ease'
})
this.animation = animation;
this.setData({
  animationData: animation.export()
})
复制代码

.export()会把动画数据传递给转盘的animation属性。

        旋转采用animation的totate(deg)方法，从原点触发旋转deg度。

var i = this.data.i +1;

animation.rotate(degree + 3600*(this.data.i)).step();复制代码

degree是随机获取到的旋转角度，加上一个圆的度数的整数倍3600，就可以实现多转几圈，不至于点击指针转盘，转了不到一圈就停下来了。

判断获取到的奖品：

 if(degree > 0 && degree<= 30){
      this.setData({
        prize:'10元现金券'
      })
    }else if(degree > 30 && degree <= 90){
      this.setData({
        prize: '5元现金券'
      })
    } else if (degree > 90&& degree <= 150) {
      this.setData({
        prize: '20元现金券'
      })
    } else if (degree > 150 && degree <= 210) {
      this.setData({
        prize: '100元现金券'
      })
    } else if (degree > 210 && degree <= 270) {
      this.setData({
        prize: '1元现金券'
      })
    } else if (degree > 270 && degree <= 330) {
      this.setData({
        prize: '50元现金券'
      })
    } else if (degree > 330 && degree <= 360) {
      this.setData({
        prize: '10元现金券'
      })
    }复制代码

根据转盘被几等分，设置好条件进行判断

展示奖品：

展示奖品，肯定是在转盘转完之后才会展示，转盘旋转动画持续时间是两秒，那么奖品展示就得延迟两秒执行，可以用setTimeout()。

setTimeout(function(){
  this.setData({
    disabled: false,
    hidden: false,
    prizes:this.data.prize
  })
}.bind(this),2000)复制代码

github:github.com/lcp1551/Lot…