时间戳

首页 > 解决方案 > JS - 财富之轮

javascript - JS - 财富之轮

问题描述

我想用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>

标签： javascripthtmlcsscanvas2d

解决方案

我会这样做：

  1. 我需要一个"click"开始旋转的活动
  2. 我正在计算targetAngle随机角度：targetAngle = currentAngle + Math.random() * 360 + minimumAngle;
  3. 我requestAnimationFrame用于动画。
  4. 我将速度计算为之间距离的targetAngle1/10 currentAngle
  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但在您的代码中，您将图像定位在屏幕中央。所以我假设你想旋转图像。

推荐阅读