Question

我想使用requestAnimationFrame()制作JavaScript动画需要5秒钟。

我不想要严格而精确的计时，所以任何接近5秒的时间都可以，我希望我的代码简单易读，因此像this这样的解决方案对我不起作用。

我的问题是，假设大多数浏览器以60 fps呈现页面是否安全？即如果我希望我的动画需要5秒钟完成，我会将其分为60 * 5 = 300步，并且每次使用draw()调用函数requestAnimationFrame()，绘制下一步动画。（鉴于动画非常简单，只需移动彩色div。）

顺便说一句，我不能使用jQuery。

修改：让我用这种方式重新解释一下这个问题：所有浏览器“正常”尝试以60 fps呈现页面吗？我想知道Chrome是否以75 fps渲染或Firefox渲染为70 fps。

（正常情况：CPU没有高负载，RAM未满，没有存储故障，房间通风良好，没有人试图将我的笔记本电脑扔出窗外。）

Answer 1

依赖每秒60帧是非常不安全的，因为浏览器并不总是处于相同的条件，即使它尝试以最大fps渲染页面，< strong>总是有可能处理器/ cpu / gpu忙着做其他事情，导致FPS下降。

如果您想依赖FPS（虽然我不建议您这样做），您应该首先检测当前的fps，并调整动画帧的速度帧即可。这是一个例子：

var lastCall, fps;

function detectFps() {
    var delta;

    if (lastCall) {
        delta = (Date.now() - lastCall)/1000;
        lastCall = Date.now();
        fps = 1/delta;
    } else {
        lastCall = Date.now();
        fps = 0;
    }
}

function myFunc() {
    detectFps();

    // Calculate the speed using the var fps
    // Animate...

    requestAnimationFrame(myFunc);
}

detectFps(); // Initialize fps
requestAnimationFrame(myFunc); // Start your animation

Answer 2

正如其他人所说，事实并非如此。

但是如果您需要在大约5秒内结束动画并且不想错过动画中的任何帧，那么您可以使用旧的setTimeout（）方式。这样你可以错过几毫秒的目标，并且由于fps不匹配，动画中的一些帧将被跳过（不渲染），但这可能是一个“足够好”的解决方案，特别是如果你的动画很简单正如你所陈述的那样，用户甚至不会看到故障。

Answer 3

这取决于GPU和显示器的组合。我有一个不错的GPU和一个120赫兹的显示器，因此它以120 fps的速度渲染。在渲染过程中，如果我移动到60赫兹的监视器，它将以60 fps的速度最大输出。

在某些浏览器/操作系统中发生的另一个因素是使用iGPU而不是离散的gpu。

假设浏览器渲染为60 fps是否安全？

3 个答案: