本文實例為大家分享了小程序實現抽獎動畫展示的具體代碼，供大家參考，具體內容如下

所有的抽獎都是由后臺計算后得到的，前臺只做動畫展示

{{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;

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的c语言摇奖小程序,小程序实现抽奖动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。