在运行 60fps 的循环内移动对象

Question

我正在尝试设置一个运行循环，它将每秒执行 60 次——在我的示例中，我想简单地移动添加一个 px 到 [=23 的左侧位置=] 每次循环运行s，但我认为我做错了什么。

对于每次循环运行s 时操作此块的任何帮助，我们将不胜感激。

function runLoop() {
    var counter = counter + 1;
    var redBlock = document.getElementById("block");
    redBlock.style.left = counter + "px";
}

setInterval(function () {
    runLoop();
}, 60)

#block {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  display: block;
}

<div id="block"></block>

Answer 1

要使函数 runLoop 每秒调用 60 次，需要以 (1000 / 60) 毫秒的间隔调用它。

此外，counter需要初始化。

（您还需要一些条件来确定何时停止计数以避免溢出）。

<script>
  function runLoop(xcoord) {
      var redBlock = document.getElementById("block");
      redBlock.style.left = xcoord + "px";
  }

  var counter = 0;
  setInterval(runLoop, 16.7, counter++);

</script>

Answer 2

setInterval参数错误，如果要运行每秒60次需要设置间隔为1000 / 60

现在我猜你正在尝试设置动画循环。您可能想看看为此目的制作的函数。

requestAnimationFrame(someCallback);

基本上它是一个函数，它将注册一个回调，以便在下一次浏览器渲染调用之前执行。这意味着最多 60 times/sec，但如果浏览器正在努力计算，它可能会更少。

应用于您的示例，它可以像这样简单：

function runLoop() {
      var redBlock = document.getElementById("block");
      redBlock.style.left = xcoord + "px";
      requestAnimationFrame(runLoop()); // register recursivaly a call for next animationFrame
 }
  var counter = 0;

  runLoop()

Answer 3

你不应该为动画使用 setInterval/setTimeout 因为你设置的延迟 X 实际上是“当 X 已经过去时”。动画也可能发生在屏幕的帧更新之间，这使得动画看起来很卡。

var counter = 0,
    running = true;

function runLoop() {
    counter = counter + 1;
    var redBlock = document.getElementById("block");
    redBlock.style.left = counter + "px";
}

setInterval(function () {
    runLoop();
}, 60)

#block {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  display: block;
}

<div id="block"></block>

我建议使用 requestAnimationFrame 进行计算，然后等待下一次屏幕更新来绘制新位置。它可能看起来很棘手，但它比看起来更容易，只要您意识到它只是对自身的回调。

我添加了两个按钮，这样您就可以玩转动画了。

请注意与 setInterval 相比动画的流畅程度。

此外，在循环之外进行变量声明以提高性能。

let counter = 0,
    isRunning = true;

const redBlock = document.getElementById("block");

function runLoop() {
  counter = counter + 1;
  redBlock.style.left = counter + "px";
  
  if (isRunning) {
    requestAnimationFrame(runLoop);    
  }
}

function restart() {
  counter = 0;
  
  if (!isRunning) { runLoop(); } 
}

function pause() {
  isRunning = !isRunning;
  
  if (isRunning) { runLoop(); } 
}

requestAnimationFrame(runLoop);

#block {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 30px;
  display: block;
}

<div id="block"></div>

<button onclick="pause()">Pause</button>

<button onclick="restart()">Restart</button>

在运行 60fps 的循环内移动对象

Move an object inside a loop that runs 60fps

javascript

runloop