小程序实现抽奖动画


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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 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
我的论坛源代码(七)
2006/10/09 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Django静态文件加载失败解决方案
2020/08/26 Python
医学专业个人求职自荐信格式
2013/09/23 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
英文求职信写作小建议
2014/02/16 职场文书
安全责任书范本
2014/04/15 职场文书
教师考核材料
2014/05/21 职场文书
小学运动会口号
2014/06/07 职场文书
公务员年度个人总结
2015/02/12 职场文书
病房管理制度范本
2015/08/06 职场文书
市级三好生竞选稿
2015/11/21 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
Docker官方工具docker-registry案例演示
2022/04/13 Servers