What is requestAnimationFrame and how does it work?
Hello, I'm learning a bit about canvas and requestAnimationFrame (I want to make a rectangle move), can someone explain what a requestAnimationFrame is please.
I know as its name suggest, we just draw multiple "animations". Is this something related to "FPS" or something like that? Is there a difference here please.
24 Replies
it's akin to
setInterval or setTimeout, but will run on the next frame
for example, if you alt-tab off of the page, the function passed to it won't run if the page is fully hidden
this is great for situations where you need to do something every x time, but it updates the styles/html of the document
for example, animationsyeah I see
the timestamp in the callback function is something that should always be dynamically be calculated?
The timestamp is given to you. I believe it’s the number of MS since the script started
yep will just experiment a bit and came back
The important thing to remember is that RAF is called right before the browser does it's refresh. So whatever function you pass to it will run in time to allow for smooth visual updates. The timestamp is given so you can handle delta time (for games) or any other time-based concern.
it's the number of nanoseconds, if im not mistaken
yep noted, timestamp is also important to adjust logic if I'm on a 60hz display and someone else on a 144hz display?
hmm ms I think
wait
yeah ms
no, it's an high precision time
ah?
I read that:
A DOMHighResTimeStamp indicating the end time of the previous frame's rendering (based on the number of milliseconds since time origin). The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond.however...
The time, given in milliseconds, should be accurate to 5 µs (microseconds), with the fractional part of the number indicating fractions of a millisecond.https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp the fractional part is VERY important
oh ok
this means the accuracy is between 5 microseconds and 1 millisecond
that is pretty decent
specially for animations
yep I see, just tested out a few things, I understand it now, thanks !
you're welcome
The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond.https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#callback
yeah, and the decimal part is nanoseconds
The primary advantage of using requestAnimationFrame over setInterval is that requestAnimationFrame always runs its callback immediately before a repaint. Using setInterval does not gurantee any correlation with when repaints happen. As a consequence using setInterval can cause your code to redraw parts of the view before a repaint and finish after the repaint. This causes jittery motion in animations and can cause intermittent flashing. By synchronizing draws with repaints, this problem is avoided.
also, it is paused automatically if the tab is hidden, in many situations
yep noted
so RAF ensures everything is in sync and it also help us save resources especially if the tap is not the current one being displayed, like hidden in background or switched to another tap ?
RAF ensures visual synchronicity, yes. But shouldn't be used for non-visual things
As it runs based on the refresh rate of the monitor
yeah I see, different users have different display rate, this may become problematic if we assume everyone has a 60fps display? Like animation may be slower/faster on some pcs ?
hmm what do you mean by non-visual things?
You use the timestamp provided to make sure that everything is in sync. Multiply any static number by the delta time and you get smooth animation
background tasks, click handlers, literally anything that's not visually reliant
yep I see