因为这是中间按钮点击抽奖,所以实际奖品只有8个。
详细注释都在代码中写了注释
state = {
//这是奖品,只有8个,图是我在网上找的
LotteryData:
[
{
url:"https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_10.png",
name: "10积分",
indexKey : 0
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-666.png",
name: "666元现金",
indexKey : 1
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/renrenzuan/lottery/money_88.png",
name: "88元现金",
indexKey : 2
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-money_10.png",
name: "10元优惠券",
indexKey : 3
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-thanks.png",
name: "谢谢参与",
indexKey : 4
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_100.png",
name: "100积分",
indexKey : 5
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/renrenzuan/lottery/money_168.png",
name: "168优惠券",
indexKey : 6
},
{
url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_50.png",
name: "50积分",
indexKey : 7
},
],
// 被选中的格子的ID
activedId: '',
// 中奖ID
prizeId: null,
// 获得prizeId之后计算出的动画次数
times: 0,
// 当前动画次数
actTimes: 0,
// 是否正在抽奖
isRolling: false
handleBegin() {
// this.state.isRolling为false的时候才能开始抽,不然会重复,报错。
if (!this.state.isRolling) {
// 点击抽奖之后,可以将于九宫格有关的状态都还原默认。然后
this.setState({
activedId: '',
prizeId: null,
times: 0,
actTimes: 0,
isRolling: true
}, () => {
// 状态还原再开始真正的抽奖
this.handlePlay()
})
}
}
handlePlay() {
//此处可以调用后台。一般抽奖都是后台返回前端
// 中将indexKey ,可随机,可自己设定,我这里暂且定为5
let prize = 5
this.setState({
prizeId: prize,
activedId: 0
})
// 随机算出一个动画执行的最小次数,这里可以随机变更数值,按自己的需求来
let times = 20
this.setState({
times: times
})
// 抽奖正式开始
this.begin = setInterval(() => {
let num;
if (this.state.activedId === this.state.prizeId && this.state.actTimes > this.state.times) {
// 符合上述所有条件时才是中奖的时候,两个ID相同并且动画执行的次数大于(或等于也行)设定的最小次数
clearInterval(this.begin)
//将抽奖状态转为false。
this.setState({
isRolling: false
})
//这里可以加一些modol等一些东西。转盘结束,告诉用户此次抽奖中否
return
}
// 以下是动画执行时对id的判断,每40秒执行一次
if (this.state.activedId === '') {
//从0开始转动
num = 0
this.setState({
activedId: num
})
} else {
num = this.state.activedId
//从0开始转动,转到到7的时候,也就意味是最后一个,将num置为0.重新开始转
if (num === 7) {
num = 0
this.setState({
activedId: num
})
} else {
num = num + 1
this.setState({
activedId: num
})
}
}
this.setState({
actTimes: this.state.actTimes + 1
})
}, 40)
}
render() {
const { LotteryData,activedId } = this.state;
return (
{LotteryData&&LotteryData.length> 0 &&
<View className='lottery_box'>
<View className='lottery_box_s'>
// 当选中的id和indexKey相等时给加上active
<View className={activedId === LotteryData[0].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[0].indexKey}`} >
<Image className='lottery_box_view_img' src={LotteryData[0].prizeImageUrl} />
</View>
<View className={activedId === LotteryData[1].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[1].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[1].prizeImageUrl} />
</View>
<View className={activedId === LotteryData[2].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[2].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[2].prizeImageUrl} />
</View>
</View>
<View className='lottery_box_s'>
<View className={activedId === LotteryData[7].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[7].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[7].prizeImageUrl} />
</View>
<View className='lottery_box_view' onClick={this.handleBegin.bind()}>
<Image className='lottery_box_view_img' src={choujiang} />
</View>
<View className={activedId === LotteryData[3].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[3].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[3].prizeImageUrl} />
</View>
</View>
<View className='lottery_box_s'>
<View className={activedId === LotteryData[6].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[6].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[6].prizeImageUrl} />
</View>
<View className={activedId === LotteryData[5].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[5].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[5].prizeImageUrl} />
</View>
<View className={activedId === LotteryData[4].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[4].indexKey}`}>
<Image className='lottery_box_view_img' src={LotteryData[4].prizeImageUrl} />
</View>
</View>
</View>
}
)
}
我的CSS如下,css也可以自己随意发挥。
.lottery_box{
margin-top: 20px;
padding: 20px;
border-color: #fff;
border-style: solid;
border-width: 2px;
border-radius: 16px;
}
.lottery_box_view{
width: 33.3%;
padding: 4px;
border-radius:16px ;
}
.lottery_box_view_img{
width: 100%;
height: 160px;
border-radius:16px ;
}
.lottery_box_view_active{
background-color: black;
opacity: .8;
}
.lotterys{
background: #fff001;
width: 100%;
height: 420px;
min-height: 420px;
border-bottom-left-radius: 80px;
border-bottom-right-radius: 80px;
}
这只是简易的效果。如果有兴趣的话可以
可以研究一下转盘运动刚开始加速,慢慢匀速,到最后减速并且停止的过程。
或者可以去看react-native-supper-lottery开源组件完成了布局和动画等核心功能,之后的封装组件提供start、stop等抽奖函数就很简单了,这里不再详述,详细代码可以参考组件react-native-supper-lottery,也可以直接使用。