小程式實現抽獎動畫
阿新 • • 發佈:2019-01-01
所有的抽獎都是由後臺計算後
<!-- 輪播展示中獎資訊區域 --> <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>得到的,前臺只做動畫展示
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);
.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; }
以上就是本文的全部內容,希望對大家的學習有所幫助
本次給大家推薦一個交流圈,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入:582735936,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。