小程序抽奖动画实现

﹏ヽ暗。殇╰゛Y 2022-05-09 01:28 268阅读 0赞

\#小程序抽奖动画实现

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

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

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

.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 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css+js实现带有转盘的抽奖小程序

html+css+js实现带有转盘的抽奖小程序简介：html+css+js实现带有转盘的抽奖小程序。效果展示 ![在这里插入图片描述][ceeb7e77bd1f

叁歲伎倆/ 2024年03月27日 08:45/ 0 赞/ 85 阅读

相关 [Redis实现抽奖小demo]

目录前言: Java代码示例，用于实现Redis用户抽奖接口： -------------------- 前言: > 你知道的,这只是一个小笔记而已 AP

深碍√TFBOYSˉ_/ 2023年10月12日 10:42/ 0 赞/ 58 阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 34 阅读

相关 JavaScript 实现抽奖程序

function draw (first = 1, second = 3, third = 5) { let firstPrize = ['1A', '1

快来打我*/ 2022年12月05日 15:15/ 0 赞/ 167 阅读

相关做抽奖活动_如何利用小程序玩转抽奖活动？

![ac13aee126ae69da63c3264f1073c278.png][] 抽奖作为一种古老的运营套路，一直活跃在营销最前沿。无论是线下门店促销，还是线上活动，抽奖被

深藏阁楼爱情的钟/ 2022年11月19日 11:19/ 0 赞/ 216 阅读

相关年会抽奖小游戏java_抽奖小游戏

抽奖 /\ 1、要有随机数 2、创建一个数组 3、点击按钮控制 4、先抽一等奖，再抽二等奖，最后是三等奖 5、一点击停止就会把名字从数组中删除掉，并且把名字放到该

缺乏、安全感/ 2022年11月09日 14:14/ 0 赞/ 247 阅读

相关【Excel】设计简单抽奖小程序

其实我们可以通过excel做一个抽奖的小程序。比如搞活动送奖品，我们就可以通过这个小程序抽中奖名单 ![70][] 中奖名单下面输入“=INDIRECT("A"&RANDB

「爱情、让人受尽委屈。」/ 2022年05月12日 08:16/ 0 赞/ 248 阅读

相关小程序抽奖动画实现

\小程序抽奖动画实现所有的抽奖都是由后台计算后得到的，前台只做动画展示 <view class='top-banner center'> <!-- 轮播展示中奖信

﹏ヽ暗。殇╰゛Y/ 2022年05月09日 01:28/ 0 赞/ 269 阅读

相关小程序旋转动画

做了一个简单的小程序箭头旋转动画效果。 ![20181106103242753.png][] ![20181106103256363.png][] <view c

超、凢脫俗/ 2022年04月18日 00:48/ 1 赞/ 279 阅读

相关微信小程序抽奖

废话不多说，直接上图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

雨点打透心脏的1/2处/ 2022年03月27日 06:56/ 0 赞/ 257 阅读