微信小程序之大专盘抽奖
2018-06-20 本文已影响0人
小福饼
先看下效果图
转盘.png
中奖.png
转盘要点：
1.奖品图片的分布
2.轮盘转动
3.轮盘停止时，中奖奖品
说下实现思路
首先根据设计图纸，把转盘布在页面上，圆盘和转盘指针要分开，一般有两种转法
1.转盘转，指针不转
2.转盘不转，指针转
这里我选择第一种，转盘转动
奖品图片的分布
当转盘布局好之后，我们要把奖品放入大转盘当中。假设转盘上有8个奖品。以12点钟方向设为0°，按照顺时针方向每个奖品的角度如下图显示
奖品分布角度.jpg
页面加载时，已经将用于大转盘内容的信息 ， 包括奖品旋转角度、 奖品名称、 奖品图片在页面渲染出来
//页面加载
onLoad: function () {
var that = this;
var awardsList = that.data.awardsList;
var awards = that.data.awards;
var html = [];//用于大转盘内容的信息 包括奖品旋转角度 奖品名称 奖品图片
var len = awards.length;
console.log(len)
var rotateNum = 1 / len;//圆分成几份
for (var i = 0; i < len; i++) {
var rotateDeg = (360 * rotateNum * i) ;//奖品旋转角度
html.push({ rotate: rotateDeg, name: awards[i].name, img: awards[i].proimg })
}
that.setData({
awardsList: html
})
},
js
data参数设置
data: {
//抽奖次数
cjTime: "1",
//转盘参数
animationData: {},//转盘动画
awardsList: {},//奖品列表
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: [],//最终获得奖品
//中奖弹框
zjMask: true
轮盘转动
点击抽奖时，转盘以低速开始，然后加快，在结束前变慢的速度转动，通过生成随机数来指定中奖奖品。可以根据个人需要，来设定转盘转动的时长和圈数。
//大转盘抽奖
getLottery: function () {
var that = this;
var awards = that.data.awards;
var len = awards.length;
var awardIndex = Math.floor(Math.random() * 8);//转盘中奖号码
//console.log(awardIndex)
//初始化转盘 rotate
var animationInit = wx.createAnimation({
duration: 1
})
this.animationInit = animationInit;
animationInit.rotate(0).step()
this.setData({
animationData: animationInit.export(),
})
// 旋转抽奖
setTimeout(function () {
var animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'//动画以低速开始，然后加快，在结束前变慢
})
that.animationRun = animationRun
animationRun.rotate(360 * 4 - (awardIndex * 360 / len ).step()
that.setData({
animationData: animationRun.export()
})
}, 100)
轮盘停止时，弹出中奖奖品
//中奖
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("抽奖次数用完")
wx.showModal({
title: '您的抽奖机会用完啦',
content: '',
})
} else {
setTimeout(function () {
that.setData({
zjMask: false,
cjTime: cjTime,
Finalawards: Finalawards
})
}, 5000)
}
},
视图层页面代码
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>
通过行内样式rotate来让奖品按照一定的角度布局在转盘上
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}
/*大转盘*/
.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;}
/*中奖弹框*/
.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;}
上述三个要点完成后，转盘就可以转起来了！
