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

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

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

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

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

最新资讯
寺库溢价35.68%提私有化:市值蒸发超八成 联手趣店突围成效不佳

寺库溢价35.68%提私有

在中概股私有化浪潮依旧高涨的环境下,赴美上市三年多的
华南厂将出(bu)售(mai)给立讯精密?知情人士:尚未敲定

华南厂将出(bu)售(mai)给立讯精

针对媒体关于欧菲光华南厂将出(bu)售(mai)给立讯精密的消息,知情
罗永浩回应坚果暂停手机业务:坚果没了是好事

罗永浩回应坚果暂停手

罗永浩在个人微博上对坚果暂停手机业务一事作出评论,他
欧菲光被传出(bu)售(mai)华南厂 传闻当事方立讯精密称不知情

欧菲光被传出(bu)售(mai)华南厂

消息面上,当日下午,有媒体报道称,欧菲光华南厂(欧菲光广州
支付宝、微信支付会被拆分吗?监管划了两条垄断红线

支付宝、微信支付会被

央行表示,对于严重影响市场健康发展的第三方支付机构,可
蚂蚁集团保险事业群尹铭离职,曾带领做出相互宝、定损宝

蚂蚁集团保险事业群尹

1月20日,21世纪经济报道记者获悉,蚂蚁集团副总裁、蚂蚁
最新文章
详解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支持,