小程序实现抽奖动画


Posted in Javascript onApril 16, 2020

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

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

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

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

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

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 #Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 #Javascript
小程序文字跑马灯效果
Dec 28 #Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 #Javascript
Angular使用Restful的增删改
Dec 28 #Javascript
原生js实现公告滚动效果
Jan 10 #Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
You might like
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
如何离线执行php任务
2017/02/21 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JS判定是否原生方法
2013/07/22 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python3如何将docx转换成pdf文件
2018/03/23 Python
PyQt5实现简易电子词典
2019/06/25 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python实现ftp文件传输功能
2020/03/20 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
安全责任协议书
2014/04/21 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
手残删除python之后的补救方法
2021/06/26 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python