小程序实现抽奖动画

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

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

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

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

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