小程序如何实现抽奖动画
这篇文章主要为大家展示了小程序如何实现抽奖动画,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
象山网站建设公司创新互联,象山网站设计制作,有大型网站制作公司丰富经验。已为象山数千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的象山做网站的公司定做!
所有的抽奖都是由后台计算后得到的,前台只做动画展示
{{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://azwzsj.com/article/jjghed.html