先看下效果圖
轉(zhuǎn)盤(pán).png
中獎(jiǎng).png
轉(zhuǎn)盤(pán)要點(diǎn)：
1.獎(jiǎng)品圖片的分布
2.輪盤(pán)轉(zhuǎn)動(dòng)
3.輪盤(pán)停止時(shí)狈孔，中獎(jiǎng)獎(jiǎng)品
說(shuō)下實(shí)現(xiàn)思路
首先根據(jù)設(shè)計(jì)圖紙哺哼，把轉(zhuǎn)盤(pán)布在頁(yè)面上呜舒，圓盤(pán)和轉(zhuǎn)盤(pán)指針要分開(kāi)反璃，一般有兩種轉(zhuǎn)法
1.轉(zhuǎn)盤(pán)轉(zhuǎn)麸塞，指針不轉(zhuǎn)
2.轉(zhuǎn)盤(pán)不轉(zhuǎn)秃臣，指針轉(zhuǎn)
這里我選擇第一種，轉(zhuǎn)盤(pán)轉(zhuǎn)動(dòng)
獎(jiǎng)品圖片的分布
當(dāng)轉(zhuǎn)盤(pán)布局好之后哪工，我們要把獎(jiǎng)品放入大轉(zhuǎn)盤(pán)當(dāng)中奥此。假設(shè)轉(zhuǎn)盤(pán)上有8個(gè)獎(jiǎng)品。以12點(diǎn)鐘方向設(shè)為0°雁比，按照順時(shí)針?lè)较蛎總€(gè)獎(jiǎng)品的角度如下圖顯示
獎(jiǎng)品分布角度.jpg
頁(yè)面加載時(shí)稚虎，已經(jīng)將用于大轉(zhuǎn)盤(pán)內(nèi)容的信息 ， 包括獎(jiǎng)品旋轉(zhuǎn)角度偎捎、 獎(jiǎng)品名稱(chēng)蠢终、 獎(jiǎng)品圖片在頁(yè)面渲染出來(lái)
//頁(yè)面加載
onLoad: function () {
var that = this;
var awardsList = that.data.awardsList;
var awards = that.data.awards;
var html = [];//用于大轉(zhuǎn)盤(pán)內(nèi)容的信息 包括獎(jiǎng)品旋轉(zhuǎn)角度 獎(jiǎng)品名稱(chēng) 獎(jiǎng)品圖片
var len = awards.length;
console.log(len)
var rotateNum = 1 / len;//圓分成幾份
for (var i = 0; i < len; i++) {
var rotateDeg = (360 * rotateNum * i) ;//獎(jiǎng)品旋轉(zhuǎn)角度
html.push({ rotate: rotateDeg, name: awards[i].name, img: awards[i].proimg })
}
that.setData({
awardsList: html
})
},
js
data參數(shù)設(shè)置
data: {
//抽獎(jiǎng)次數(shù)
cjTime: "1",
//轉(zhuǎn)盤(pán)參數(shù)
animationData: {},//轉(zhuǎn)盤(pán)動(dòng)畫(huà)
awardsList: {},//獎(jiǎng)品列表
awards: [
{
id: 0,
name: "iphone x0",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 1,
name: "iphone x1",
proimg: "https://img.alicdn.com/bao/uploaded/i3/1669409267/TB2Alo8dTmWBKNjSZFBXXXxUFXa_!!1669409267.jpg_b.jpg"
},
{
id: 2,
name: "iphone x2",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 3,
name: "iphone x3",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 4,
name: "iphone x4",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 5,
name: "iphone x5",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 6,
name: "iphone x6",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
{
id: 7,
name: "iphone x7",
proimg: "https://img.alicdn.com/bao/uploaded/i7/TB1TZgmGFXXXXb1XFXXxWT0.VXX_082827.jpg_b.jpg"
},
],
Finalawards: [],//最終獲得獎(jiǎng)品
//中獎(jiǎng)彈框
zjMask: true
輪盤(pán)轉(zhuǎn)動(dòng)
點(diǎn)擊抽獎(jiǎng)時(shí)，轉(zhuǎn)盤(pán)以低速開(kāi)始茴她，然后加快寻拂，在結(jié)束前變慢的速度轉(zhuǎn)動(dòng)，通過(guò)生成隨機(jī)數(shù)來(lái)指定中獎(jiǎng)獎(jiǎng)品丈牢〖蓝ぃ可以根據(jù)個(gè)人需要，來(lái)設(shè)定轉(zhuǎn)盤(pán)轉(zhuǎn)動(dòng)的時(shí)長(zhǎng)和圈數(shù)己沛。
//大轉(zhuǎn)盤(pán)抽獎(jiǎng)
getLottery: function () {
var that = this;
var awards = that.data.awards;
var len = awards.length;
var awardIndex = Math.floor(Math.random() * 8);//轉(zhuǎn)盤(pán)中獎(jiǎng)號(hào)碼
//console.log(awardIndex)
//初始化轉(zhuǎn)盤(pán) rotate
var animationInit = wx.createAnimation({
duration: 1
})
this.animationInit = animationInit;
animationInit.rotate(0).step()
this.setData({
animationData: animationInit.export(),
})
// 旋轉(zhuǎn)抽獎(jiǎng)
setTimeout(function () {
var animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'//動(dòng)畫(huà)以低速開(kāi)始朴皆，然后加快帕识，在結(jié)束前變慢
})
that.animationRun = animationRun
animationRun.rotate(360 * 4 - (awardIndex * 360 / len ).step()
that.setData({
animationData: animationRun.export()
})
}, 100)
輪盤(pán)停止時(shí)，彈出中獎(jiǎng)獎(jiǎng)品
//中獎(jiǎng)
var cjTime = this.data.cjTime;
var Finalawards = this.data.Finalawards;
Finalawards.push({ Fname: awards[awardIndex].name, Fimg: awards[awardIndex].proimg });
cjTime--;
console.log(cjTime)
if (cjTime < 0) {
console.log("抽獎(jiǎng)次數(shù)用完")
wx.showModal({
title: '您的抽獎(jiǎng)機(jī)會(huì)用完啦',
content: '',
})
} else {
setTimeout(function () {
that.setData({
zjMask: false,
cjTime: cjTime,
Finalawards: Finalawards
})
}, 5000)
}
},
視圖層頁(yè)面代碼
wxml
<view class="bg-purple">
<view class="zp-wrap">
<view class="zp-pan" animation="{{animationData}}" >
<image src="../../images/zp-bg.png" class="zp-bg"/>
<view class="awardsList">
<view class="item" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform:rotate({{item.rotate}}deg)">
<view class="txt">{{item.name}}</view>
<image mode="widthFix" src="{{item.img}}" />
</view>
</view>
</view>
<image mode="widthFix" src="../../images/zp-pointer.png" class="zp-pointer" bindtap="getLottery" />
</view>
</view>
<view class="mask zj-wrap-mask" hidden="{{zjMask}}">
<view class="zj-wrap">
<image src="../../images/img-guang-big.png" class="guang-big"/>
<image src="../../images/img-zj.png" class="img-zj"/>
<view class="zj-cont" wx:for="{{Finalawards}}" wx:key="unique">
<view class="zj-mes">
獲得"<text>{{item.Fname}}</text>"一部
</view>
<view class="tc">
<image mode="widthFix" src="{{item.Fimg}}" />
</view>
</view>
</view>
</view>
通過(guò)行內(nèi)樣式rotate來(lái)讓獎(jiǎng)品按照一定的角度布局在轉(zhuǎn)盤(pán)上
wxss
page{height: 100%;}
view{box-sizing: border-box;}
.mask{position:fixed; z-index: 9999; top:0; left:0; width: 100%; height:100%; background-color: rgba(0,0,0,.5);}
.bg-purple{ background-color: #37165e;height: 100%;}
.tc{text-align: center}
/*大轉(zhuǎn)盤(pán)*/
.zp-wrap{position:relative; margin:auto; width:618rpx; height:618rpx; }
.zp-pan{height:100%;}
.zp-bg{position:absolute; z-index: 1; top:0; left:0; width: 618rpx; height:618rpx; }
.zp-pointer{position:absolute; z-index: 20; top:50%; left:50%; -webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 200rpx; }
.awardsList{ position:absolute; z-index: 10; top:0rpx; left:0rpx; width: 100%; height:100%;}
.awardsList .item{position:absolute; z-index: 10; top:0rpx; left:0rpx; padding:70rpx; width: 100%; height:100%; text-align: center; -webkit-transform-origin: 50% 310rpx;transform-origin: 50% 310rpx;}
.awardsList .item .txt{ margin-bottom: 10rpx; font-size:26rpx; color:#fa5200;}
.awardsList .item image{ width: 70rpx;}
/*按鈕*/
.zp-btn{margin-top:100rpx;}
.zp-btn button{margin-bottom: 45rpx;}
/*中獎(jiǎng)彈框*/
.zj-wrap-mask{ background-color: #000;}
.zj-wrap{position:relative; margin:auto; margin-top: 50rpx; width: 750rpx; height:750rpx; }
.guang-big{ width:100%; height:100%;}
.img-zj{ position:absolute; top:150rpx; left:110rpx; width:522rpx; height:452rpx;}
.zj-cont{position:absolute; top:300rpx; left:220rpx; width: 300rpx; }
.zj-mes{margin-bottom: 20rpx; color:#0a0a0a; font-size:26rpx; line-height: 40rpx; text-align: center;}
.zj-mes text{color:#ff2e82;}
.zj-cont image{width:140rpx;}
上述三個(gè)要點(diǎn)完成后遂铡，轉(zhuǎn)盤(pán)就可以轉(zhuǎn)起來(lái)了肮疗！
