小程序实现抽奖动画


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 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP生成树的方法
2015/07/28 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
企业宣传口号
2014/06/12 职场文书
单位消防安全责任书
2014/07/23 职场文书
单位在职证明书
2014/09/11 职场文书
地道战观后感
2015/06/04 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
Python安装使用Scrapy框架
2022/04/12 Python