微信小程序实现抽奖大转盘
Posted 算法与编程之美
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序实现抽奖大转盘相关的知识，希望对你有一定的参考价值。
问题
在抽奖的应用或小程序中，大多会采用一种常见的大转盘抽奖方式，这种方式能直观展现出这个抽奖活动的形式和内容，且能直接吸引人参与。那么这个功能是如何实现的呢？
效果图：
方法
（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)');
|
以上是关于微信小程序实现抽奖大转盘的主要内容，如果未能解决你的问题，请参考以下文章