大轉盤是比較常見的抽獎活動 。以前做過h5的大轉盤，最近小程序比較火，客戶要求做小程序的大轉盤。我們就來分析下代碼。先上幾個圖：

? ?

?

界面效果還是很不錯的。

做界面還是比較容易的，只要有前端基礎沒啥難度。

關鍵是 抽獎的動畫，我們就是要小程序本身的動畫：

界面加載的時候定義一個動畫對象：

onLoad(opt) {this.setPlateData(); //執行設置轉盤表面的文字let that = this;let aniData = wx.createAnimation({ //創建動畫對象duration: 2000,timingFunction: 'ease'});this.aniData = aniData; //將動畫對象賦值給this的aniData屬性}, View Code

wx.createAnimation(OBJECT) 方法要是不懂，可以查看官方的文檔：

https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html

?

接下來，點擊“開始抽獎”，執行動畫：

html代碼：
<view class="plate-btn-wrap" bindtap="startRollTap"><image src='/images/start@3x.png' class='start-img'></image></view> js代碼：
startRollTap() { //開始轉盤let that = this;if (canRoll) {canRoll = false;let aniData = this.aniData; //獲取this對象上的動畫對象let rightNum = ~~(Math.random() * lotteryArrLen); //生成隨機數 console.log(`隨機數是${rightNum}`);console.log(`獎品是：${lottery[rightNum]}`);aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); //設置轉動的圈數this.setData({aniData: aniData.export()})setTimeout(function () {that.setData({ShowZheZhao: true,zjname: lottery[rightNum],zjnamepic: that.data.lottery_img[rightNum],});}, 2500);num++;canRoll = true;}},

?

若想獲得詳細地址：請點擊下面的鏈接：

https://www.huzhan.com/code/goods281833.html

?

轉載于:https://www.cnblogs.com/puzi0315/p/9539681.html

總結

以上是生活随笔為你收集整理的微信小程序-开心大转盘（圆盘指针）代码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。