小程序实现抽奖动画

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

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

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

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

(0)

相关推荐

  • 基于JavaScript实现简单的随机抽奖小程序

    对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效

  • 微信小程序实现多宫格抽奖活动

    最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果 好了,上代码 首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下) <view class="box"> <view class="boxsub {{l

  • 基于PHP实现简单的随机抽奖小程序

    一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身. 然后随即生成一个0到最大数之间的一个数,通过循环查看它属于那个区间,返回该区间的key. 代码如下 $prize = array( 1 => 3.5, //3.5%机率 2 => 2.5, 3 => 6, 4 => 2, 5 => 42, //42%机率 6 => 36, 7 => 2, 8 => 4, 9 =

  • 微信小程序 摇一摇抽奖简单实例实现代码

    微信小程序 摇一摇抽奖 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录 我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,l

  • php抽奖小程序的实现代码

    这个抽奖小程序,在实际的测试环境中也可以用到,比方说测试数据的查询在in条件下,要查询随机的5个id,然后在用ab去压测 复制代码 代码如下: <?php  /**   * "抽奖"函数   *   * @param integer $first    起始编号   * @param integer $last     结束编号   * @param integer $total    获奖人数   *   * @return string   *  */  function i

  • jquery 抽奖小程序实现代码

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序.最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识.(最终结果保存在:http://runjs.cn/detail/rq3bbhto,点击可查看效果) 下面先看一个简单的抽奖小程序的例子: html: <div class="g-lottery-box&quo

  • 微信小程序开发之大转盘 仿天猫超市抽奖实例

    天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些. 注释写了一些,凑合这

  • 大转盘抽奖小程序版 转盘抽奖网页版

    今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.ite

  • 基于C#实现简单的随机抽奖小程序

    废话不多说了,直接给大家贴代码了.具体代码如下所示: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using Sys

  • 微信小程序实现九宫格抽奖

    本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下 效果图比较卡顿,真实运行效果是旋转的 用到的素材: 实现步骤: 实现原理 改变每一项的透明度实现选中效果.利用setTimeOut时间使旋转速度越来越慢.达到慢慢停止的效果.实际应用中可以将9张奖品图片和中奖项均通过接口返回.以方便奖品的调整. 1.布局绘制 <view class="container"> 停止位置:<input value='{{luckPositio

随机推荐