小程序实现抽奖动画


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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
vuex存取值和映射函数使用说明
Jul 24 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
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP内核探索:变量概述
2014/01/30 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
大学军训自我鉴定
2013/12/15 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
解析MySQL binlog
2021/06/11 MySQL
Django模型层实现多表关系创建和多表操作
2021/07/21 Python