运行 以 60fps 运行

Question

我目前使用 setInterval( () => {}, 16 ) 到 运行 我的代码为 60fps，但这使得代码 运行 为 62.5fps，这使得游戏动作向前跳跃的速度提高了两倍每秒几帧。使用interval 17让游戏运动每隔一段时间就卡住一帧。

我怎样才能运行 代码真正以 60fps 的速度获得最大的平滑度？

Answer 1

使用Window.requestAnimationFrame([callback])

这样，无论显示器是 30hz、60hz 还是 120hz 或更高，您的应用程序都会在渲染时被调用。

如果 MDN 文档不够清楚，请参阅 https://css-tricks.com/using-requestanimationframe/ 中的示例了解如何使用它。

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

  globalID = requestAnimationFrame(repeatOften);

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});
$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

div {
  width: 10px;
  height: 10px;
  background: orange;
  float: left;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
}
#stop {
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">start</button>
<button id="stop">stop</button>