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

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

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

效果图：

解决方案

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

wxml代码示例：

{{item.award}}

抽奖

（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 团队