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
    }

  }

这个抽奖的好处是  后端返回什么抽奖数据这边轮盘可转到相应的地方