網上老.虎.機.的插件挺多的,實現原理也各不同,
這裏先給個網上找的老.虎.機的效果demo: 點我,emmmm,基本就是這個操做了吧。javascript
而後這裏主要提下本身當初作老.虎.機時想到的一個原理:css
css的 background-position屬性是設置背景圖像的起始位置,那麼咱們控制背景圖在0-3秒的時間內顯示不一樣的位置,再加上過渡動畫就能夠達到老.虎.機旋轉的效果
第一個版本的在這裏點我
看下效果視頻(第二個版本)
這裏只能上傳圖片 - -而後我視頻轉的gif有十多兆,放這裏有點卡。就上傳視頻了。
視頻效果
該版本定時3秒停,而後彈窗,未作到老.虎.機底部滾動中止後再顯示彈窗。html
今天要說的是第三種方案(實現底部滾動中止後顯示彈窗且跟後端返回的中獎碼一致)前端
先貼一段代碼java
<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>
.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; }
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' } } })
最後完整的實現效果在這裏:
點我查看完整的視頻效果ajax
注意兩個點:小程序
<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>
wxssapp
.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應用基礎設施,主導建設前端各類發佈/監控等平臺,指導落實解決方案
三、持續優化前端頁面性能,維護前端代碼規範,鑽研各類前沿技術和創新交互,加強用戶體驗、開拓前端能力邊界