当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序实现抽奖动画

小程序实现抽奖动画

2019年01月07日  | 移动技术网IT编程  | 我要评论

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

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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网