小程序抽獎老虎.機實現原理

運營：提個活動需求，拉新下用戶嘛。

產品：網上demo那麼多隨便拷拷就能用。

開發：

那麼沒作過的首先是google一下看看有沒有好的demo拿來改改。

作過的呢想一想拷貝下就行了吧。

進入正題：

網上老.虎.機.的插件挺多的，實現原理也各不同，
這裏先給個網上找的老.虎.機的效果demo： 點我，emmmm，基本就是這個操做了吧。

而後這裏主要提下本身當初作老.虎.機時想到的一個原理：

劃重點

css的 background-position屬性是設置背景圖像的起始位置，那麼咱們控制背景圖在0-3秒的時間內顯示不一樣的位置，再加上過渡動畫就能夠達到老.虎.機旋轉的效果
第一個版本的在這裏點我
看下效果視頻（第二個版本）
這裏只能上傳圖片 - -而後我視頻轉的gif有十多兆，放這裏有點卡。就上傳視頻了。
視頻效果
該版本定時3秒停，而後彈窗，未作到老.虎.機底部滾動中止後再顯示彈窗。

今天要說的是第三種方案（實現底部滾動中止後顯示彈窗且跟後端返回的中獎碼一致）

 

image.png

 

image.png

先貼一段代碼

WXML

<view class="box-container"> <view class="box-tips">{{boxTips}}</view> <view class="wheel-boxs"> <view class="box-list" wx:for="{{boxStatus}}" wx:key="index"> <view class="box-text" wx:if="{{!isStart}}">{{item}}</view> <view class="box-image" style="background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; background-size: 100% 100%; transition-property: {{isStart ? 'all' : 'none'}}; transition-delay: {{(index + 1) * 100 + 'ms'}}; transition-duration: 3.5s;"> </view> {{item}} </view> </view> <view class="start-box"> <form bindsubmit="startDraw" report-submit="true" wx:if="{{pageVo.remainCount !== 0}}"> <button class="start-draw" formType="submit" /> </form> </view> <view class="last-tips">當前剩餘 <text>{{pageVo.remainCount || 0}}</text> 次攢碼機會</view> </view> 

WXSS

.box-container { width: 680rpx; height: 380rpx; background: url(https://qiniu-image.qtshe.com/20190227goddess_02.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 10; margin: auto; overflow: hidden; } .wheel-boxs { width: 680rpx; padding: 0 80rpx; margin-top: 16rpx; } .box-list { width: 90rpx; height: 100rpx; background: url(https://qiniu-image.qtshe.com/20190227goddess_11.png) no-repeat center center; background-size: 100% 100%; display: inline-block; margin-right: 16rpx; overflow: hidden; } .box-list:last-child { margin-right: 0; } .box-tips { width: 500rpx; height: 54rpx; background: url(https://qiniu-image.qtshe.com/20190227goddess_10.png) no-repeat center center; overflow: hidden; background-size: 100% 100%; margin: 20rpx auto; color: #000; font-size: 24rpx; text-align: center; line-height: 54rpx; margin-top: 36rpx; } .box-text { width: 100%; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 44rpx; color: #f8294a; font-weight: 600; } .box-image { height: 1500%; } .start-box { width: 100%; text-align: center; margin: 16rpx 0 8rpx; } .start-box button { width: 290rpx; height: 76rpx; background: url(https://qiniu-image.qtshe.com/20190227startDraw.png) no-repeat center center; background-size: 290rpx 76rpx; margin: 0 auto; } .start-box .start-draw { width: 290rpx; height: 76rpx; background: url(https://qiniu-image.qtshe.com/20190227startDraw.png) no-repeat center center; background-size: 290rpx 76rpx; margin: 0 auto; } 

JS

const app = getApp() Page({ data: { isStart: false, //是否開始抽獎 isDialog: false, //是否顯示中獎彈窗 dialogId: 1, //顯示第幾個中獎彈窗 boxTips: '本場女神碼將在3月8日 19:00截止領取', //頁面中部文案顯示 typeTips: '3月8日20點開獎哦！', boxStatus: ['碼', '上', '有', '紅', '包'], //五個抽獎默認文案 results: [], //抽中的碼 }, onLoad() { this.initData() }, //顯隱藏中獎彈窗或規則彈窗等 handleModel() { this.setData({ isDialog: !this.data.isDialog }) }, onShow() {}, //初始化頁面數據 initData() { let postData = { url: 'xxx' } app.ajax(postData).then((res) => { if (res.success) { this.setData({ pageVo: res.data, }) } else { util.toast( res.msg || '團團開小差啦，請稍後再試') } }, () => { wx.hideLoading() util.toast( '團團開小差啦，請稍後再試') }) }, //收集FormId 發模版消息用 addFormId(e) { if (e.detail.formId !== 'the formId is a mock one') { //開發者工具上顯示這段文案，過濾掉 let formData = { url: 'xxx', data: { formId: e.detail.formId, openId: wx.getStorageSync('openId') || '' } } app.ajax(formData) } }, //開始抽獎 startDraw(e) { //這裏能夠作下節流 this.addFormId(e) //收集formId let postData = { url: 'xxx' } app.ajax(postData).then((res) => { if (res.success) { this.setData({ isStart: true, results: res.data.result.split(','), //假如後端返回[1,2,3,4,5] dialogId: res.data.special ? 3 : 2 //3爲彩蛋狀態，2爲普通狀態 }) } else { util.toast(res.msg || '團團開小差啦，請稍後再試') } }, () => { wx.hideLoading() util.toast( '團團開小差啦，請稍後再試') }) }, onShareAppMessage() { return { title: '碼上有紅包！點我瓜分10萬女神節禮金！', path: '/activity/xxx/xxx', imageUrl: 'https://qiniu-image.qtshe.com/20190227goddess-share.png' } } }) 

最後完整的實現效果在這裏：
點我查看完整的視頻效果

注意兩個點：

• 旋轉的背景圖是雪碧圖。我這裏用到的是這張（https://qiniu-image.qtshe.com/20181113wheels.png）可供參考
• 控制好圖的位移單位，須要計算下，這樣纔可讓後端返回的值與你的圖想匹配。我這裏是15個icon因此計算方式以下

<view class="box-image" style=" background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; background-size: 100% 100%; transition-property: {{isStart ? 'all' : 'none'}}; transition-delay: {{(index + 1) * 100 + 'ms'}}; transition-duration: 3.5s;"> </view> 

這裏能夠封裝成自定義組件，傳入圖片以及數量便可。後面若是有再用到 我會封裝下再發出來。

最後說下彈窗顯示的圖的匹配方法,根據圖片大小計算，比較麻煩：
wxml

<view class="ci-wrapper"> <view wx:if="{{icontype ==='nomal'}}" class="icon-default icon-nomal" style=" background-position-y: {{(-24 - 117.86 * (typeId - 1)) + 'rpx'}};"></view> <view wx:else class="icon-default icon-fade" style=" background-position-y: {{(-20 - 110.73 * (typeId - 1)) + 'rpx'}}; "></view> </view> 

wxss

.ci-wrapper { } .icon-default { width: 70rpx; height: 70rpx; background-repeat: no-repeat; } .icon-nomal { background-image: url(https://qiniu-image.qtshe.com/20181113wheels.png); background-position-x: -17rpx; background-size: 100rpx 1768rpx } .icon-fade { background-image: url(https://qiniu-image.qtshe.com/20181113wheels_fade.png); background-size: 110rpx 1661rpx; background-position-x: -18rpx; } 

Js

Component({ properties: { icontype: { type: String, value: "nomal" }, iconid: { type: Number, value: 1, observer(newVal, oldVal) { this.setData({ typeId: newVal }); } } }, data: { nomalOrigin: { x: -17, y: -24 }, fadeOrigin: { x: -17, y: -24 }, typeId: 1 } }) 

以上就是一個完整小程序的tigerDraw實現方案，有什麼優化點你們能夠指出來，後續會整理一下出個文件拷貝就可以使用。

這裏寫了個代碼片斷 能夠直接導入使用

https://developers.weixin.qq.com/s/1k5eSnmh7z72

青團社招聘：
招聘崗位：資深前端開發工程師

簡歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

一、建設工具、提煉組件、抽象框架，促進前端工程化、服務化，持續提高研發效率，保障線上產品質量

二、構建H5/PC應用基礎設施，主導建設前端各類發佈/監控等平臺，指導落實解決方案

三、持續優化前端頁面性能，維護前端代碼規範，鑽研各類前沿技術和創新交互，加強用戶體驗、開拓前端能力邊界