微信小程序-开心大转盘(圆盘指针)代码分析
生活随笔
收集整理的這篇文章主要介紹了
微信小程序-开心大转盘(圆盘指针)代码分析
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
大轉(zhuǎn)盤是比較常見的抽獎(jiǎng)活動(dòng) 。以前做過h5的大轉(zhuǎn)盤,最近小程序比較火,客戶要求做小程序的大轉(zhuǎn)盤。我們就來分析下代碼。先上幾個(gè)圖:
? ?
?
界面效果還是很不錯(cuò)的。
做界面還是比較容易的,只要有前端基礎(chǔ)沒啥難度。
關(guān)鍵是 抽獎(jiǎng)的動(dòng)畫,我們就是要小程序本身的動(dòng)畫:
界面加載的時(shí)候定義一個(gè)動(dòng)畫對(duì)象:
onLoad(opt) {this.setPlateData(); //執(zhí)行設(shè)置轉(zhuǎn)盤表面的文字let that = this;let aniData = wx.createAnimation({ //創(chuàng)建動(dòng)畫對(duì)象duration: 2000,timingFunction: 'ease'});this.aniData = aniData; //將動(dòng)畫對(duì)象賦值給this的aniData屬性}, View Codewx.createAnimation(OBJECT) 方法要是不懂,可以查看官方的文檔:
https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html
?
接下來,點(diǎn)擊“開始抽獎(jiǎng)”,執(zhí)行動(dòng)畫:
html代碼:<view class="plate-btn-wrap" bindtap="startRollTap"><image src='/images/start@3x.png' class='start-img'></image></view> js代碼:
startRollTap() { //開始轉(zhuǎn)盤let that = this;if (canRoll) {canRoll = false;let aniData = this.aniData; //獲取this對(duì)象上的動(dòng)畫對(duì)象let rightNum = ~~(Math.random() * lotteryArrLen); //生成隨機(jī)數(shù) console.log(`隨機(jī)數(shù)是${rightNum}`);console.log(`獎(jiǎng)品是:${lottery[rightNum]}`);aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); //設(shè)置轉(zhuǎn)動(dòng)的圈數(shù)this.setData({aniData: aniData.export()})setTimeout(function () {that.setData({ShowZheZhao: true,zjname: lottery[rightNum],zjnamepic: that.data.lottery_img[rightNum],});}, 2500);num++;canRoll = true;}},
?
若想獲得詳細(xì)地址:請(qǐng)點(diǎn)擊下面的鏈接:
https://www.huzhan.com/code/goods281833.html
?
轉(zhuǎn)載于:https://www.cnblogs.com/puzi0315/p/9539681.html
總結(jié)
以上是生活随笔為你收集整理的微信小程序-开心大转盘(圆盘指针)代码分析的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: w7系统怎么把字体放大 如何在W7系统中
- 下一篇: 军用0开头是什么意思?