angular 實作輪盤抽獎

以下為html中部分  圖檔需要一張轉盤和指針

<div class="turntable">
 <img class="turnbg" src="assets/turntableimg/bg.jpg" alt="">
    <!-- 點選時候轉動轉盤 指針不轉 -->
    <img class="turntable-top" src="assets/turntableimg/zhibiao.png">
    <img class="turntable-center" [style]="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }" src="assets/turntableimg/turnbg.png">
  </div>
//這裡的html引入内嵌了css 已經可以實作旋轉

    <ion-button (click)="onClick1(5)" expand="small" shape="round">
      立即開獎
    </ion-button>
//此處傳入5是因為我的項目需要  可忽略
           

css部分需要自己定位到相應的地方  圖檔需要自行引入

 以下為ts部分

rotateAngle: any = 0 //将要旋轉的角度
  startRotatingDegree: any = 0 //初始旋轉角度
  rotateTransition: any = ''//控制過渡效果
  click_flag: boolean = true //是否可以旋轉抽獎
  prize_money_array: any = [];
  prize_type5: any = [];
  lottery_draw_period: any;//期數 這個期數主要是後端傳回配合的   可忽略
  total_amount: any;//抽獎獲得金額 這個是後端傳回的金額 可忽略
 data: any = {
    period_id: '',
    type: ''
  };
//這裡是請求時後端所需要傳入的參數



  constructor(
    private nav: NavController,
    private router: Router,
    private api: Api,
    private native: NativeService,
    public modalController: ModalController
  ) { }



 //抽獎點選
  pointer(price) {

    // 抽獎函數
    this.rotate(price)

//此處可添加一些操作  如無添加可忽略 直接使用下面函數
  }



// 輪盤轉動
  rotate(prize: any) {//目前是隻轉動轉盤

    var type = 0; // 預設為 0  轉盤轉動
    var randCircle = 50; // 附加旋轉的圈數
    var duringTime = 5; // 預設為 5s 轉動時間
    var rotateAngle = 10;//初始值
    console.log(prize);

    switch (prize) {
      //此處prize傳入的值是多少 那麼轉盤就會轉到相應的角度
      case 0: rotateAngle = randCircle * 360 + 55; break;
      case 10: rotateAngle = randCircle * 360 + 20; break;
      case 20: rotateAngle = randCircle * 360 + -15; break;
      case 50: rotateAngle = randCircle * 360 + -50; break;
      case 100: rotateAngle = randCircle * 360 + -85; break;
      case 200: rotateAngle = randCircle * 360 + -120; break;
      case 500: rotateAngle = randCircle * 360 + -165; break;
      case 1000: rotateAngle = randCircle * 360 + -200; break;
      case 2000: rotateAngle = randCircle * 360 + -235; break;
      case 4999: rotateAngle = randCircle * 360 + -270; break;
    }
    this.click_flag = false; // 旋轉結束前，不允許再次觸發
    if (type == 0) {
      // 轉動盤子
      var rotateAngle = this.startRotatingDegree + rotateAngle - this.startRotatingDegree % 360;//将要旋轉的角度
      this.startRotatingDegree = rotateAngle;//改變初始旋轉的角度
      this.rotateAngle = "rotate(" + rotateAngle + "deg)";//真正控制轉動角度
      // 旋轉結束後允許再次觸發
      setTimeout(() => {
        this.click_flag = true;//旋轉結束後可點選
        this.getturntable() //更新資料

        this.presentModal() //轉動後彈窗
      }, duringTime * 1000)

    }
  }




 //開獎
  onClick1(type) {
    if (this.click_flag == true) {  //此處主要為防止重複點選

      if (this.prize_type5.can_lottery_draw) { //此處為後端傳回是否可以點選
      
        this.yindoushow = true //動畫開關 等待動畫效果
        this.click_flag = false //防止轉動時點選，點選後禁止重複點選
        setTimeout(() => {
          this.data.type = type //這裡是因為按鈕裡形參傳入給後端判斷是哪個按鈕點選
          this.api.Get('//', this.data).subscribe(
            (res: any) => {
              console.log(res);
              this.total_amount = res.data.total_amount  //從後端獲得金額
              this.pointer(this.total_amount)//傳入金額
            })
        }, 1000);

      } else {
        this.native.showToast('抽獎次數不足')
      }
    } else {
      return
    }

  }

           

這個抽獎的好處是  後端傳回什麼抽獎資料這邊輪盤可轉到相應的地方