JS关于大转盘旋转角度的问题?

首先我的代码如下:

export default {
  data () {
    return {
      prize_list: ['1000元优惠券', '网红沙发', '1888元定制大礼包', '西门子洗衣机', '谢谢参与', '全棉斜纹四件套'], // 奖品列表
      start_rotating_degree: 0, // 初始旋转角度
      rotateAngle: 0, // 将要旋转的角度
      rotateAnglePointer: 0, // 指针将要旋转的度数
      rotate_transition: 'transform 6s ease-in-out', // 初始化选中的过度属性控制
      rotate_transition_pointer: 'transform 12s ease-in-out', // 初始化指针过度属性控制
      click_flag: true, // 是否可以旋转抽奖
      index: 0,
      during_time: 6
    };
  },
  methods: { // 此方法为处理奖品数据
    rotating () {
      if (!this.click_flag) return;
      this.index = Math.floor(Math.random() * this.prize_list.length);
      let that = this;
      let type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
      this.click_flag = false; // 旋转结束前,不允许再次触发
      if (type === 0) {
        let resultAngle = 360 / this.prize_list.length * this.index;
        let randCircle = 6; // 附加多转几圈,2-3
        let rotateAngle = - (randCircle * 360 + resultAngle);

        // this.start_rotating_degree = rotateAngle;
        this.rotateAngle = 'rotate(' + rotateAngle + 'deg)';
        
        // 旋转结束后,允许再次触发
        setTimeout(() => {
          that.click_flag = true;
        }, this.during_time * 1000 + 1500); // 延时,保证转盘转完
      }
    }
  }
};

现在的问题是这样,我只能保证我初次转动时停止位置准确,当第二次点击触发旋转后就无法准确定位到目标项了。
我的理解如下:
第一次我停留在了3号位置,第二次点击就应该从3号位置开始计算,可是随机到的确实产品下标,这两个数如何关系上,实在没有想明白,还望能得到诸位解答,谢谢!

阅读 3.2k
1 个回答

解决了,可能办法粗糙了些

let resultAngle = 360 / this.prize_list.length * Math.abs(this.prevNum - this.index);
let randCircle = 6; // 附加多转几圈,2-3
let rotateAngle = - (Math.abs(this.start_rotating_degree) + resultAngle + randCircle * 360);
// console.log(this.start_rotating_degree, resultAngle, rotateAngle)
this.start_rotating_degree = rotateAngle;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题