小程序如何实现抽奖动画

这篇文章主要为大家展示了小程序如何实现抽奖动画，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

象山网站建设公司创新互联,象山网站设计制作，有大型网站制作公司丰富经验。已为象山数千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的象山做网站的公司定做！

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

 
 
  
   
    {{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://ybzwz.com/article/jjghed.html

小程序如何实现抽奖动画

其他资讯