当前位置: 首页 > 编程笔记 >

小程序实现抽奖动画

章振
2023-03-14
本文向大家介绍小程序实现抽奖动画,包括了小程序实现抽奖动画的使用技巧和注意事项,需要的朋友参考一下

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

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

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

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍python实现抽奖小程序,包括了python实现抽奖小程序的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现抽奖小程序的具体代码,供大家参考,具体内容如下 设计一个抽奖服务  背景:有x个奖品,要求在y天内发完;每天至少发放z个奖品;每天抽奖人数不定,事先会假设一个范围是m-n 举例:有100个奖品,要求5天内发完,每天至少发15个奖品;每天来抽奖的人估

  • 本文向大家介绍python3实现小球转动抽奖小游戏,包括了python3实现小球转动抽奖小游戏的使用技巧和注意事项,需要的朋友参考一下 最近老师在讲 tkinter,所以我做了一个抽奖小游戏。 一、效果图 先上效果图。红色的小球会围绕蓝色小球做环形运动。我设置的四个角是奖品,其余的都是再接再厉。 二、方法 基于tkinter中的button,text,PIL ,time.Canvas drawPa

  • 本文向大家介绍python实现公司年会抽奖程序,包括了python实现公司年会抽奖程序的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现年会抽奖程序的具体代码,供大家参考,具体内容如下 发一下自己写的公司抽奖程序。 需求:公司年会要一个抽奖程序,转盘上的每一个人名是随机中奖的,中奖后的人不可以再次中奖,按住抽奖,就会一直在转,放开后,要再转一两圈才停。 刚好自己在学py

  • 本文向大家介绍大转盘抽奖小程序版 转盘抽奖网页版,包括了大转盘抽奖小程序版 转盘抽奖网页版的使用技巧和注意事项,需要的朋友参考一下 今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载

  • 嘉宾入场后一一在线拍照,照片入库后,可以对照片进行抽奖。浏览器要支持flash,并要求摄像头的驱动正常。

  • 本文向大家介绍js实现抽奖效果,包括了js实现抽奖效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!