javascript - JS-财富轮

Question

我想用javascript开发一种命运之轮。我想定义输出和开始。如果用户以最小速度转动轮子，则轮子应根据旋转速度旋转几次，然后才会停在所需的字段上。

到目前为止，我只能实现基础，但我希望有人能帮助我实现完整的过程，因为我现在不能再进一步了。

HOW TO MAKE WHEEL ROTATING A SERVERAL TIMES ENDING WITH THE targetAngle ?

let element = document.getElementById("wheel");
let region = new ZingTouch.Region(element);

let currentAngle = 0, // this is the current angle of the wheel by the rotate gesture
  targetAngle = 0; // blue field is the target where the wheel should stop
let minimumAngle = 30, // minimumAngle to make the wheel spinning
  rotatedAngle = 0, // total spinned angle of the wheel by the rotate gesture
  spinning = false

setInterval(() => {
  rotatedAngle = 0;
}, 200)

region.bind(element, 'rotate', function(e) {
  if (rotatedAngle > minimumAngle && rotatedAngle > 180) {
    spinning = true;
    document.getElementById("spinning").innerHTML = "spinning = true"
    // HOW TO MAKE WHEEL ROTATING A SERVERAL TIMES ENDING WITH THE targetAngle ? 
  } else if (!spinning) {
    currentAngle += e.detail.distanceFromLast;
    rotatedAngle += e.detail.distanceFromLast;
    element.style.transform = 'rotate(' + currentAngle + 'deg)';
  }
})

#wheel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/zingtouch/1.0.6/zingtouch.min.js"></script>
<img id="wheel" src="https://reel-mkt.com/templates/fortune_reel_lp/img/wheel.png">
<p id="spinning">spinning = false</p>

Answer 1

我会这样做:

1. 我需要一个像“click”这样的事件来开始旋转
2. 我将 targetAngle 计算为随机 Angular :targetAngle = currentAngle + Math.random() * 360 + minimumAngle;
3. 我正在为动画使用 requestAnimationFrame。
4. 我将速度计算为 targetAngle 和 currentAngle 之间距离的 1/10>
5. 我没有按照您的预期使用 ZingTouch；我也不使用 rotatedAngle。

希望这就是您所需要的。

let element = document.getElementById("wheel");
/*let region = new ZingTouch.Region(element);*/

let currentAngle = 0, // this is the current angle of the wheel by the rotate gesture
  targetAngle = 0; // blue field is the target where the wheel should stop
let minimumAngle = 30, // minimumAngle to make the wheel spinning
  //rotatedAngle = 0, // total spinned angle of the wheel by the rotate gesture
  spinning = false;

let rid = null;

element.addEventListener("click", () => {
  targetAngle = currentAngle + Math.random() * 360 + minimumAngle;

  if (spinning) {
    spinning = false;
     if (rid) {
      cancelAnimationFrame(rid);
      rid = null;
    }
  } else {   
    spinning = true;
    Animation();
  }
  
  is_spinning.innerHTML = spinning;
});

function Animation() {
  rid = requestAnimationFrame(Animation);
  if (currentAngle <= targetAngle) {
    let speed = (targetAngle - currentAngle)/10;
    currentAngle += speed;
    element.style.transform = `rotate(${currentAngle}deg)`;
        if(speed <= 1){// if the speed is < 1 stop the wheel
          cancelAnimationFrame(rid);
          spinning = false;
        }
    
  } else {//stop the wheel
    cancelAnimationFrame(rid);
    spinning = false;
  }
  
  is_spinning.innerHTML = spinning;
}

#wheel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
}

<img id="wheel" src="https://reel-mkt.com/templates/fortune_reel_lp/img/wheel.png">
<p>spinning = <span  id="is_spinning">false</span></p>

**观察“”:您的问题被标记为 canvas 但在您的代码中您将图像定位在屏幕中央。所以我假设你想旋转图像。