废话不多说,直接上图
1.wxml
<view class="canvas-list">
<view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
<view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view>
</view>
</view>
</view>
<view bindtap="playReward" class="canvas-btn {{btnDisabled}}">抽奖</view>
</view>
</view>
2.js
Page({
//奖品配置
awardsConfig: {
chance: true,
awards: [
{ ‘index’: 0, ‘name’: ‘谢谢合作’ },
{ ‘index’: 1, ‘name’: ‘电脑’ },
{ ‘index’: 2, ‘name’: ‘iPhoneX’ },
{ ‘index’: 3, ‘name’: ‘电视机’ },
{ ‘index’: 4, ‘name’: ‘冰箱’ },
{ ‘index’: 5, ‘name’: ‘彩电’ }
]
},
data: {
awardsList: {},
animationData: {},
btnDisabled: ‘’,
},
onReady: function (e) {
this.drawAwardRoundel();
//分享
wx.showShareMenu({
withShareTicket: true
});
},
//画抽奖圆盘
drawAwardRoundel: function () {
var awards = this.awardsConfig.awards;
var awardsList = [];
var turnNum = 1 / awards.length; // 文字旋转 turn 值
// 奖项列表
for (var i = 0; i < awards.length; i++) {
awardsList.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
}
this.setData({
btnDisabled: this.awardsConfig.chance ? '' : 'disabled',
awardsList: awardsList
});
},
//发起抽奖
playReward: function () {
//中奖index
var awardIndex = Math.floor(Math.random()*6);
console.log(awardIndex);
var runNum = 8;//旋转8周
var duration = 4000;//时长
// 旋转角度
this.runDeg = this.runDeg || 0;
this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6))
//创建动画
var animationRun = wx.createAnimation({
duration: duration,
timingFunction: 'ease'
})
animationRun.rotate(this.runDeg).step();
this.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
});
// 中奖提示
var awardsConfig = this.awardsConfig;
setTimeout(function () {
wx.showModal({
title: '恭喜',
content: '获得' + (awardsConfig.awards[awardIndex].name),
showCancel: false
});
this.setData({
btnDisabled: '' //是否重复抽取
});
}.bind(this), duration);
},
onShareAppMessage: function () {
var that = this;
return util.doShare(“大转盘抽奖”, “pages/zp/zp”, that);
}
})
3.WXSS
/* pages/zp/zp.wxss /
page {
/ background: rgb(13, 255, 255); */
background-image: url(“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547284738960&di=1ba875a76061b51922017354527fe545&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161227%2Fd4f67ef183f44d71ab50dd6c89976ff2_th.jpg”);
}
/* 转盘 */
.canvas-container {
margin: 0 auto;
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 0 2px 3px #333, 0 0 2px #000;
}
.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, 0.6);
}
.canvas-item-text {
position: relative;
display: block;
padding-top: 20px;
margin: 0 auto;
text-align: center;
-webkit-transform-origin: 50% 150px;
transform-origin: 50% 150px;
}
/* 分隔线 */
.canvas-line {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
z-index: 99;
}
.canvas-litem {
position: absolute;
left: 150px;
top: 0;
width: 1px;
height: 150px;
background-color: rgba(228, 55, 14, 0.4);
overflow: hidden;
-webkit-transform-origin: 50% 150px;
transform-origin: 50% 150px;
}
/**
- 抽奖按钮
*/
.canvas-btn {
position: absolute;
left: 110px;
top: 110px;
z-index: 400;
width: 80px;
height: 80px;
border-radius: 50%;
color: #f4e9cc;
background-color: #e44025;
line-height: 80px;
text-align: center;
font-size: 20px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
text-decoration: none;
}
.canvas-btn::after {
position: absolute;
display: block;
content: ’ ';
left: 10px;
top: -46px;
width: 0;
height: 0;
overflow: hidden;
border-width: 30px;
border-style: solid;
border-color: transparent;
border-bottom-color: #e44025;
}
.canvas-btn.disabled {
pointer-events: none;
background: #b07a7b;
color: #ccc;
}
.canvas-btn.disabled::after {
border-bottom-color: #b07a7b;
}