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

Question

我正在尝试设置一个运行循环，每秒执行 60 次 - 在我的示例中，我想在每次循环运行时简单地将 px 移动到 div 的左侧位置，但我认为我'我做错事了。

如果每次循环运行时操作此块有任何帮助，我将不胜感激。

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

您永远不应该使用 setInterval/setTimeout 进行动画，因为您设置的延迟 X 实际上是“当 X 过去时”。动画也可能发生在屏幕的帧更新之间，这使得动画看起来很卡顿。var counter = 0,&nbsp; &nbsp; running = true;function runLoop() {&nbsp; &nbsp; counter = counter + 1;&nbsp; &nbsp; var redBlock = document.getElementById("block");&nbsp; &nbsp; redBlock.style.left = counter + "px";}setInterval(function () {&nbsp; &nbsp; runLoop();}, 60)#block {&nbsp; background-color: red;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; position: absolute;&nbsp; display: block;}<div id="block"></block>我建议使用requestAnimationFramewhich 进行计算，然后等待下一个屏幕更新来绘制新位置。它可能看起来很棘手，但一旦您意识到这只是对自身的回调，它就会比看起来更容易。我添加了两个按钮，以便您可以播放动画。请注意与 相比，动画有多流畅setInterval。此外，在循环之外进行变量声明以提高性能。let counter = 0,&nbsp; &nbsp; isRunning = true;const redBlock = document.getElementById("block");function runLoop() {&nbsp; counter = counter + 1;&nbsp; redBlock.style.left = counter + "px";&nbsp;&nbsp;&nbsp; if (isRunning) {&nbsp; &nbsp; requestAnimationFrame(runLoop);&nbsp; &nbsp;&nbsp;&nbsp; }}function restart() {&nbsp; counter = 0;&nbsp;&nbsp;&nbsp; if (!isRunning) { runLoop(); }&nbsp;}function pause() {&nbsp; isRunning = !isRunning;&nbsp;&nbsp;&nbsp; if (isRunning) { runLoop(); }&nbsp;}requestAnimationFrame(runLoop);#block {&nbsp; background-color: red;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; position: absolute;&nbsp; top: 30px;&nbsp; display: block;}<div id="block"></div><button onclick="pause()">Pause</button><button onclick="restart()">Restart</button>

Answer 2

要让该函数runLoop每秒调用 60 次，需要以 (1000 / 60) 毫秒的间隔调用。另外，还counter需要进行初始化。（您还需要一些条件来确定何时停止计数以避免溢出）。<script>&nbsp; function runLoop(xcoord) {&nbsp; &nbsp; &nbsp; var redBlock = document.getElementById("block");&nbsp; &nbsp; &nbsp; redBlock.style.left = xcoord + "px";&nbsp; }&nbsp; var counter = 0;&nbsp; setInterval(runLoop, 16.7, counter++);</script>

Answer 3

setInterval的参数是错误的，如果你想每秒运行60次，你需要将间隔设置为1000 / 60。现在我猜你正在尝试设置动画循环。您可能想看看为此目的而制作的函数。requestAnimationFrame(someCallback);基本上，它是一个函数，它将注册一个回调，以便在下一个浏览器渲染调用之前执行。这意味着最多 60 次/秒，但如果浏览器难以计算，则可能会更少。应用于您的示例，它可能很简单：function runLoop() {&nbsp; &nbsp; &nbsp; var redBlock = document.getElementById("block");&nbsp; &nbsp; &nbsp; redBlock.style.left = xcoord + "px";&nbsp; &nbsp; &nbsp; requestAnimationFrame(runLoop()); // register recursivaly a call for next animationFrame&nbsp;}&nbsp; var counter = 0;&nbsp; runLoop()