所以我有一台 120hz 显示器和一台 60hz 显示器。如果我在第一个显示器上运行游戏，它会运行得非常快，但是当我在第二个显示器上运行它时，它会变慢。我知道也有很多 30hz 显示器，但速度会更慢（还有一些 240hz 显示器，速度快如闪电）。有没有办法将游戏的帧速率锁定为 60fps（这是最常见的），这样问题就不会发生？
No, requestAnimationFrame应该在下一次屏幕刷新之前触发，这使得它与屏幕刷新率相关联。
你需要的是一个增量时间 https://en.wikipedia.org/wiki/Delta_timing.
不要在每个刻度处将对象位置增加一个静态值，而是测量自上次刻度以来已经过去了多长时间，并根据经过的时间和预设的持续时间更新您的值。
这样，无论显示器的刷新率如何，或者即使页面受到计算机等的限制，您的动画对象都会以相同的速度在任何地方行走给定的距离。
这是一个示例，显示即使我们“暂停”动画，当我们“恢复”动画时，对象仍将处于其应在的位置，而无需暂停。
const it = document.getElementById( "it" );
const checkbox = document.querySelector( "input" );
const maxLeft = window.innerWidth - 50;
const duration = 2000; // time to traverse the screen (ms)
const start = performance.now();
function anim( now ) {
// 'now' passed by rAF is the time the last VSync event has been sent by the monitor
// it may not be the real "now" time, for this one could use
// performance.now() instead
const delta = ((now - start) % duration) / duration;
// determine if we should go to left or to right
const direction = Math.sign( ((now - start) % (duration * 2)) - duration );
let position;
if( direction < 0 ) {
position = delta * maxLeft;
}
else {
position = maxLeft - (delta * maxLeft);
}
it.style.transform = `translateX(${ position }px)`;
if( checkbox.checked ) {
requestAnimationFrame( anim );
}
}
requestAnimationFrame( anim );
checkbox.oninput = anim;
#it {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
position: fixed;
top: 50px;
will-change: transform;
}
<div id="it"></div>
<label>pause/resume<input type="checkbox" checked></label>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
