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?
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).
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.
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() .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With