小程序实现抽奖动画
程序员文章站
2024-01-17 12:16:28
本文实例为大家分享了小程序实现抽奖动画展示的具体代码，供大家参考，具体内容如下
所有的抽奖都是由后台计算后得到的，前台只做动画展示
本文实例为大家分享了小程序实现抽奖动画展示的具体代码，供大家参考，具体内容如下
所有的抽奖都是由后台计算后得到的，前台只做动画展示
<view class='top-banner center'> <!-- 轮播展示中奖信息区域 -->
<swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}'>
<block wx:for="{{prizeinfo}}" wx:key="index">
<swiper-item>
<view>{{item.name}}{{item.prize}}</view>
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播结束 抽奖转盘 -->
<view class='turntable' bindtap='dolottery'>
<image class='turntable-bj' style="transition:all {{time?time:'3s ease-in'}}; transform:rotate({{transformdeg + 'deg'}}) " src='../../../img/turntable.png'></image>
<image class='arrow' src='../../../img/arrow.png'>
</image>
</view>
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。