UI

老規矩，先看下靜態UI，以便於有個影象概念

初始參考各值參考圖

方案分析-引數配置

核心思路：

將指標和中獎區域劃分兩部分，目前常規的效果，控制中獎區域旋轉，然後停在指標處，當然控制指標也可以，一套思路，dom結構也比較簡單，唯一算是複雜點的kaJKh就是中獎區域，但是如果你足夠懶，像我一樣，你可以傳遞一張圖也可以，完全依賴遠端資料；

關於程式設計客棧旋轉位置

每個移動位置應均分，360/個數 === 每個獎品所佔據的位置，以本文為例8個獎品位置，每個區域應為45deg，每個指標中心位置應為22.5deg（的意思看你是順時針還是逆時針）具體值看下面 實現邏輯 區域

引數配置

• data 給與元件一些系統引數 旋轉的圈數、效果等等配置
• 計算屬性 rotateStyle 旋轉角度，實時調整
• props 提供元件內部介面的引數和一些核心資料，比如轉盤的圖片等等

// 基礎引數
data () {
   return {
     isrun: false,rotateAngle: 0,// 旋轉角度
     config: {
       duration: 4000,// 總旋轉時間 ms級
       circle: 8,// 旋轉圈數
       mode: 'ease-in-out' // 由快到慢 慣性效果都省了
     },cricleAdd: 1,// 第幾次抽獎
     drawIndex: 0 // 中獎索引 轉盤圖片排序 指標右手開始 0-...
   }
 }
 // 計算屬性
 computed: {
   rotateStyle () {
     const _c = this.config
     return `
       -webkit-transition: transform ${_c.duration}ms ${_c.mode};
       transition: transform ${_c.duration}ms ${_c.mode};
       -webkit-transform: rotate(${this.rotateAngle}deg);
           transform: rotate(${this.rotateAngle}deg);`
   }
 }
 // 入參
 props: {
   httpData: {},// 介面呼叫所需引數
   stateData: {
     type: Object,default: () => {
       return {
         coin: 0,// 超級幣數量
         prize_img: '' // 轉盤圖片
       }
     }
   }
 }

實現邏輯

• 咱們要做的事情很簡單，計算出中獎獎品的位置，輸出即可
• 位置即對應圈數，drawIndex對應獎品位置，這個引數裡面說過了

this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
// 圈數位置解析
// this.config.circle * 360 * this.cricleAdd 順時針總圈數/累積總圈數
// 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指標中間位置 === 22.5)

• drawIndex，直接從服務端拿就行了，如果沒有跑出位置，自己可以計算一下
• 為了方便拓展，丟擲了兩個狀態對應抽獎的開始於完成，start和fin

this.$emit('draw_fin','start')
this.$emit('draw_fin','fin')

• 完整程式碼，css就不水字數了，下面附上原始碼地址

  methods: {
      async run () {
        if (this.stateData.coin < 10) {
          console.log('超級幣不足')
          return
        }   
        if (this.isrun) return
        // const data = await this.goDraw()
        // 可以作為彈kaJKh窗等資訊展示
        this.$emit('draw_fin','start')
        this.$set(this.stateData,'coin',0) // 更新資料，此處僅為示例，推薦使用 draw_fin方法的 start/fin 進行相應資料更新
        this.isrun = true
        this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
        // 圈數位置解析
        // this.config.circle * 360 * this.cricleAdd 順時針總圈數/累積總圈數
        // 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指標中間位置 === 22.5)

    this.cricleAdd程式設計客棧++
    setTimeout(() => {
      this.$emit('draw_fin','fin')
      this.isrun = false
    },this.config.duration)
  },goDraw () {
    // 請求介面拿到中獎商品
    // 加下自己專案的樣式 loading 使用者體驗
    return new Promise(async (resolve,reject) => {
      // await 獎品介面
      resolve({
        kaJKhmsg: '抽獎明細'
      })
    })
  }

元件使用

使用

import dialWrap from '../../components/dial/dial.vue'
<dialWrap ref="dialWrap" :stateData="stateData"></dialWrap>

抽獎效果

結語

以上就是大概的實現思路了，比較簡單的效果；再細的一些東西以及拓展，大家可以自行發揮哈~

另附本文-原始碼地址，歡迎探討哈~

以上就是VUE實現大轉盤抽獎的詳細內容，更多關於vue 大轉盤抽獎的資料請關注我們其它相關文章！