小程序制作大轉盤抽獎功能，巨簡約的代碼！！

TesterHome 發布于2019-08-23 13:00 / 3351人閱讀

摘要：公司說要做個活動，迎接雙十一。。大概的思路就是頁面有個轉盤，然后轉盤是一個背景。轉盤的指針也是用圖片。如下圖然后第二步，翻查小程序文檔。最后根據小程序文檔說，這個參數需要輸出。為真的時候運行正常旋轉的方法，為假的時候。

公司說要做個活動，迎接雙十一。。然后最怕的事情出現了，就是做轉盤。以前沒怎么寫過動畫，特別怕這些東西。。。好了，廢話不說。直入正題。

首先，先構圖。大概的思路就是頁面有個轉盤，然后轉盤是一個背景。轉盤的指針也是用圖片。如下圖：

然后第二步，翻查小程序文檔。發現有個wx.createAnimation（創建動畫的參數），參數如下。

好了，開始js和界面結合一起用了。

記住，animation這個屬性放在你想添加動畫的view。至于animationData等下解釋.

let that
const app = getApp()
Page({
  data: {
    animationData:{},//初始動畫數據
    Prize:[45,90,135]//45度安慰獎，90度二等獎，135度一等獎
  },
  start() {
    let animation = wx.createAnimation({    //創建動畫實例
      duration: 3000,
      timingFunction:"ease"
    })
      animation.rotate(360*3+Prize[i]).step()  //因為公司項目轉盤分為8個區域，所以每個區域就是45°了.先設置必定轉3圈，然后加上后臺返回來的標識，假設這個是安慰獎，隨意，這個旋轉最后就是到45度這個位置。
      that.setData({
        animationData: animation.export()//最后根據小程序文檔說，這個參數需要export輸出。
      })

  },
  onLoad() {
    that = this
  },
  onShow() {
  }
})

好了，大功告成，試一試吧。。。
特別說明一些坑位，動畫只運行一次。怎么點擊start方法動畫都不會再重運行。。解決方法，在data里面定義個isTrue布爾值，判斷該值。為真的時候運行正常旋轉的方法，為假的時候。需要將旋轉的度數變為0.再去旋轉新的度數。

云服務器 GPU云服務器 php大轉盤抽獎代碼大轉盤抽獎活動大轉盤抽獎算法小程序的功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99152.html

一起抽圣誕的驚喜盒子吧！（小程序起手式）

摘要：平安夜圣誕節總是讓人聯想到平安果圣誕襪圣誕樹圣誕老人圣誕櫥窗等等讓人歡喜滿滿期望滿滿的詞語。禮物祝福笑臉驚喜溫暖都伴隨而來，最近課程輕松，便想著做一個有關圣誕的小程序，來當作對小程序的初步學習。 Christmas is coming! 平安夜/圣誕節總是讓人聯想到平安果、圣誕襪、圣誕樹、圣誕老人、圣誕櫥窗等等讓人歡喜滿滿、期望滿滿的詞語。禮物、祝福、笑臉、驚喜、溫暖都伴隨而來，最...

codecook 2019-08-21 18:20 評論0 收藏0
轉盤抽獎腳本自己擼

摘要：效果需求很多場景都需要做各種活動，抽獎最是司空見慣了，跑馬燈的，轉盤的，下面先花幾分鐘擼出一個轉盤的吧，當然網上至少有一打的可供參考。但是我們只差一個定時器循環了接下里實現這個主循環，不斷更新值就可以了。 demo 效果需求很多場景都需要做各種活動，抽獎最是司空見慣了，跑馬燈的，轉盤的，下面先花幾分鐘擼出一個轉盤的吧，當然網上至少有一打的 demo 可供參考。真的只需要一點點時間而...

趙春朋 2019-08-23 11:01 評論0 收藏0
微信小程序營銷組件wxapp-market

摘要：是基于微信小程序的營銷組件，用于快速開發營銷玩法類小程序項目頁面，包含大轉盤刮刮樂老虎機水果機九宮格翻紙牌搖一搖手勢解鎖等多種營銷組件。 wxapp-market 是基于微信小程序的營銷組件，用于快速開發營銷玩法類小程序項目頁面，包含大轉盤、刮刮樂、老虎機、水果機、九宮格翻紙牌、搖一搖、手勢解鎖等多種營銷組件。使用 1.拉取倉庫 git clone git@github.com:o2...

william 2019-08-23 12:25 評論0 收藏0
jQuery帶次數帶彈窗的大轉盤抽獎代碼（支持h5）

摘要：您已擁有次抽獎機會，點擊立刻抽獎開始抽獎初始次數，由后臺傳入為隨機出來的結果，根據概率后的結果如果在執行就退出標志為在執行先判斷是否登錄未登錄則執行下面的函數請先登錄登錄了就執行下面當抽獎次數為的時候執行沒有次數了還有次 showImg(https://segmentfault.com/img/bVbqAdu); showImg(https://segmentfault.com/img...

lemon 2019-08-02 16:10 評論0 收藏0