【原】微信小程序|抽奖大转盘实战

问题描述

在抽奖的应用或小程序中，大多会采用一种常见的大转盘抽奖方式，这种方式能直观展现出这个抽奖活动的形式和内容，且能直接吸引人参与。那么这个功能是如何实现的呢？

效果图：

解决方案

（1）首先要实现这个大转盘的样式设计，通过canvas画布和animation动画来实现。（这两个api的用法小编在前面的实战文章有过讲解，感兴趣可以去看一看。）

wxml代码示例：

<view>          <view>                    <view>                             <view  animation="{{animationData}}" >                                      <canvas  style="width: 300px; height: 300px;"  canvas-id="lotteryCanvas"></canvas>                                      <view>                                                <view wx:for="{{awardsList}}"  wx:key="unique" style="-webkit-transform:  rotate({{item.lineTurn}});transform:  rotate({{item.lineTurn}})"></view>                                      </view>                                      <view>                                                <view wx:for="{{awardsList}}"  wx:key="unique">                                                      <view style="-webkit-transform:  rotate({{item.turn}});transform:  rotate({{item.turn}})">{{item.award}}</view>                                                </view>                                      </view>                             </view>                             <view  bindtap="getLottery" class="canvas-btn  {{btnDisabled}}">抽奖</view>                                </view>          </view> </view>

（2）wxss中需要实现的则是几种不同颜色效果以及这个圆盘样式的效果。

这其中需要实现一个圆的效果，和圆上的平分六条分割线的样式。中间的抽奖样式，实际上是由下面一个圆上面一个三角形进行重合来展现的，当然，这里也可以直接换成一张类似抽奖样式的图片更方便。

部分代码示例：

//转盘 .canvas-container{    margin: 0 auto;    position: relative;    width: 300px;    height: 300px;     border-radius: 50%; } .canvas-content{    position: absolute;    left: 0;    top: 0;    z-index: 1;    display: block;    width: 300px;    height: 300px;    border-radius: inherit;    background-clip: padding-box;    background-color: #ffcb3f; } .canvas-element{    position: relative;    z-index: 1;    width: inherit;    height: inherit;    border-radius: 50%; } .canvas-list{    position: absolute;    left: 0;    top: 0;    width: inherit;    height: inherit;    z-index: 9999; } .canvas-item{    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    color: #e4370e;    font-weight: bold;    text-shadow: 0 1px 1px rgba(255,255,255,.6); }

（3）js中需要实现转盘转动的六个分区，需要用Math的相关属性，其用法类似于时钟（小编前面的《动态时钟》的文章中也有相关介绍，可以去了解一下）；然后转盘旋转需要调用wx.createAnimation，设置旋转参数，包括转速和频率等；中奖提示调用wx.showModal，在里面设置中奖内容即可。

// 旋转抽奖      app.runDegs = app.runDegs || 0      console.log('deg', app.runDegs)      app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum  - awardIndex * (360 / 6))      console.log('deg', app.runDegs)      var animationRun = wx.createAnimation({        duration: 4000,        timingFunction: 'ease'      })      that.animationRun = animationRun      animationRun.rotate(app.runDegs).step()      that.setData({        animationData: animationRun.export(),       btnDisabled: 'disabled'      })      // 中奖提示      setTimeout(function() {        wx.showModal({          title: '恭喜',          content: '获得' +  (awardsConfig.awards[awardIndex].name),          showCancel: false        })        if (awardsConfig.chance) {          that.setData({            btnDisabled: ''          })         }      }, 4000);    },    onReady: function (e) {      var that = this;      // getAwardsConfig      app.awardsConfig = {        chance: true,        awards:[          {'index': 0, 'name': '1元红包'},          {'index': 1, 'name': '5元话费'},          {'index': 2, 'name': '6元红包'},          {'index': 3, 'name': '8元红包'},          {'index': 4, 'name': '10元话费'},          {'index': 5, 'name': '10元红包'}        ]      }      // 绘制转盘      var awardsConfig = app.awardsConfig.awards,          len = awardsConfig.length,          rotateDeg = 360 / len / 2 + 90,          html = [],          turnNum = 1 / len  // 文字旋转 turn 值      that.setData({        btnDisabled: app.awardsConfig.chance ? '' : 'disabled'       })      var ctx = wx.createContext()      for (var i = 0; i < len; i++) {        // 保存当前状态        ctx.save();        // 开始一条新路径        ctx.beginPath();        // 位移到圆心，下面需要围绕圆心旋转        ctx.translate(150, 150);        // 从(0, 0)坐标开始定义一条新的子路径        ctx.moveTo(0, 0);        // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。        ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);        // 绘制圆弧        ctx.arc(0, 0, 150, 0,  2 *  Math.PI / len, false);        // 颜色间隔        if (i % 2 == 0) {            ctx.setFillStyle('rgba(255,184,32,.1)');        }else{            ctx.setFillStyle('rgba(255,203,63,.1)');        }

END

编  辑   |   王楠岚

责  编   |   吴怡辰

 where2go 团队

---

微信号：算法与编程之美