重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
小程序如何實現抽獎動畫
這篇文章主要為大家展示了小程序如何實現抽獎動畫，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
象山網站建設公司創新互聯,象山網站設計制作，有大型網站制作公司豐富經驗。已為象山數千家提供企業網站建設服務。企業網站搭建\外貿網站建設要多少錢，請找那個售后服務好的象山做網站的公司定做！
所有的抽獎都是由后臺計算后得到的，前臺只做動畫展示
{{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;
}以上就是關于小程序如何實現抽獎動畫的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
分享文章：小程序如何實現抽獎動畫
本文地址：http://www.xueling.net.cn/article/jjghed.html