好资源导航 » 文章资讯 » 小程序实现抽奖动画

小程序实现抽奖动画

2023-09-02 04:38:04 440

本文实例为大家分享了小程序实现抽奖动画展示的具体代码，供大家参考，具体内容如下

所有的抽奖都是由后台计算后得到的，前台只做动画展示





{{item.name}}{{item.prize}}

js:

constapp=getApp();

varindex={
data:{
prizeInfo:[
{
name:'qiphon',
prize:'5元'
},
{
name:'qiphon23423',
prize:'53元'
},
{
name:'qipsdfhon',
prize:'35元'
}
],
transformDeg:0,//旋转角度
transition:'all3scubic-bezier(0.005,1.340,1.000,0.865)',
time:'999s'
},
onLoad(opt){
console.log(opt)

},
onReady(){
this.animation=wx.createAnimation({
timingFunction:'esse-in-out',
duration:2000
});
this.animationDeg=360;
},
loadCoupons(){//加载获奖信息

},
doLottery(){//抽奖
var_this=this;
if(this.aniRotate)return;
this.aniRotate=true;
this.setData({
transformDeg:this.data.transformDeg+360*900,
time:'100sease'
})
setTimeout(function(){
console.log('请求完成'+_this.data.transformDeg)//setTimeout模拟ajax请求
_this.setData({
transformDeg:-360*4,
time:'3sease'
})
setTimeout(function(){
console.log('返回结果'+_this.data.transformDeg)
_this.setData({
transformDeg:360*2+0,
time:'6scubic-bezier(0.000,0.765,0.000,0.955)'
})
setTimeout(function(){
_this.aniRotate=false;
wx.showModal({
title:'中奖信息',
content:'恭喜获得奖品'
})
},6000)
},2000)
},3000)
},
}
Page(index);

css:

.top-banner{
background:#fff;
padding:20rpx;
}
.top-bannerswiper{
height:50rpx;
line-height:50rpx;
}
/*转盘*/
.turntable{
position:relative;
width:100%;
height:530rpx;
}
.turntable-bj{
display:block;
margin:0auto;
width:600rpx;
height:530rpx;
}
.turntable.arrow{
position:absolute;
top:0;
right:0;
left:0;
bottom:110rpx;
margin:auto;
width:93.5rpx;
height:212rpx;
}

想要学习更多关于抽奖功能的实现，请参考此专题：抽奖功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

小程序实现抽奖动画

热门推荐

随机推荐