这篇文章主要为大家详细介绍了小程序实现抽奖动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
Counterpoint:第三季度中国智能手机出货量下滑14%,小米表现最佳

Counterpoint:第三季

据报道,调研公司Counterpoint今日发布报告称,今年第三季
圆通速递:计划非公开发行A股股票募集资金总额不超过37.9亿元

圆通速递:计划非公开发

圆通速递发布公告称,计划非公开发行A股股票的募集资金
想不起来自己的钱是怎么没的?是移动支付让你失忆了

想不起来自己的钱是怎

如果付款的时候是用手机扫一扫二维码来支付,你的心痛程
诺基亚第三季度调整后营业利润4.86亿欧元,低于市场预期

诺基亚第三季度调整后

诺基亚表示,7-9月基本盈利仍为每股0.05欧元,与去年同期
金洲慈航宣布终止收购优胜教育 因后者经营陷入困境

金洲慈航宣布终止收购

基于优胜腾飞书面回复及我方了解的情况来看,目前优胜腾
“营养又美味”的金属“汉堡”

“营养又美味”的金属

中国科学院合肥物质科学研究院方前锋研究员课题组利用
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,