JS - FortuneWheel

Question

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

到目前为止，我只能够实现基本的功能，但是我希望有人能帮助我实现完整的过程，因为我现在不能更进一步。

如何使轮旋转一个服务器的时间结束与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计算成一个随机的角度：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，但在您的代码中，您将图像定位在屏幕的中心。所以我假设你想旋转图像。