微信小程序：抽奖转盘-白红宇

先上效果图：

利用到的组件和API：

1.canvas画布

2.动画

上数据：

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

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

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

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

prize ：暂存获得的奖品

prizes ：展示获奖奖品

wxml代码：


        
         
       
      
          
     
      恭喜您获得{
   {prizes}}
       
    复制代码

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: