Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

requestAnimationFrame with higher rate than 60 fps

Tags:

javascript

From MDN, I have this:

Be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens.

With this, Can I assume that with a 144hz monitor, for instance, I could have requestAnimationFrame running faster than 60 fps?

like image 843
João Paulo Avatar asked Nov 22 '20 14:11

João Paulo


People also ask

How do you control speed in requestAnimationFrame?

Method 1: Update data via setInterval, and graphics via RAF. Keep those values in an object for each animated element. Assign the transform string to a variable in the object each setInterval 'frame'. Keep these objects in an array. Set your interval to your desired fps in ms: ms=(1000/fps).

Why requestAnimationFrame is better than setInterval?

Another reason requestAnimationFrame is so useful is the fact that it gives you a time variable which you can use to calculate the amount of time between frames. This is not something that setInterval will do and since setInterval is not 100% accurate it is very possible your animation will get messed up over time.

How do I slow down requestAnimationFrame?

If your animation requires a different frames per second (up to 60 fps) or simply doesn't require that high a level of refresh rate, you can slow it down by calling requestAnimationFrame inside setTimeout() .

What is the aim of the requestAnimationFrame method?

requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.


Video Answer


1 Answers

Exactly true.

Here is a simple example to measure:

let i = 0;
const start = Date.now();
const stop = start + 5000;

function raf() {
  requestAnimationFrame(() => {
    const now = Date.now();
    if (now < stop){
      i++;
      raf();
    }else{
      const elapsedSeconds = (now - start) / 1000;
      console.log('Frame rate is: %f fps', i / elapsedSeconds);
    }
  });
}

console.log('Testing frame rate...')
raf();

On my machine, it shows 143.7401178670024. And I am using 144HZ monitor.

like image 50
Drag13 Avatar answered Oct 17 '22 02:10

Drag13