c语言摇奖小程序,小程序实现抽奖动画

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

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

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

js:

const app = getApp();

var index = {

data:{

prizeInfo:[

{

name:'qiphon',

prize:'5元'

},

{

name:'qiphon23423',

prize:'53元'

},

{

name:'qipsdfhon',

prize:'35元'

}

],

transformDeg:0, // 旋转角度

transition:'all 3s cubic-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:'100s ease'

})

setTimeout(function(){

console.log('请求完成'+_this.data.transformDeg) // setTimeout 模拟ajax请求

_this.setData({

transformDeg:-360*4,

time:'3s ease'

})

setTimeout(function(){

console.log('返回结果'+_this.data.transformDeg)

_this.setData({

transformDeg:360*2 + 0,

time:'6s cubic-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-banner swiper{

height: 50rpx;

line-height: 50rpx;

}

/* 转盘 */

.turntable{

position: relative;

width: 100%;

height: 530rpx;

}

.turntable-bj{

display: block;

margin:0 auto;

width:600rpx;

height: 530rpx;

}

.turntable .arrow{

position: absolute;

top:0;

right:0;

left:0;

bottom:110rpx;

margin:auto;

width:93.5rpx;

height: 212rpx;

}

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