RequestAnimationFrame Fps 稳定
RequestAnimationFrame (rAF) 已在动画中变得流行,可提供流畅且高效的执行。然而,控制帧速率 (FPS) 以确保一致性可能具有挑战性。
将 rAF 限制为特定 FPS
要将 rAF 限制为特定 FPS,您可以自上一帧执行以来经过的杠杆时间。仅当您所需的 FPS 间隔过去后,您的绘图代码才会执行。
代码片段
初始化计时器变量并开始动画:
var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;
function startAnimating(fps) {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
animate();
}
以指定的 FPS 进行绘制的 rAF 循环:
function animate() {
requestAnimationFrame(animate);
now = Date.now();
elapsed = now - then;
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
// Your drawing code goes here
}
}
通过合并此逻辑,您可以有效地限制 rAF 以达到所需的 FPS,从而确保一致的动画满足您的特定要求。
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3