Does the requestAnimationFrame loop affect animation playback speed?

Question

JavaScript

Hello! I have a cube and have a requestAnimationFrame loop that moves the cube along the Y axis. Is the playback speed of this animation different on different devices and in different browsers, and if the speed is different, how to fix it?

Answer 1

different frequency of function calls in requestAnimationFrame()- depends on the device, tab activity / inactivity, etc.
But when you call your function , the time elapsed from a certain moment of start, the first call, is passed as a parameter. And the position of the cube should be calculated based not on the number of function calls, but only on the basis of time. So the animation under different conditions will have the same speed of movement of the cube, albeit with a different frame rate: somewhere more smoothly, somewhere in jumps, but, for example, it will touch the floor at the same time on all devices.

Answer 2

Yes, it can affect
https://popmotion.io/blog/20180104-when-ios-thrott...
It can be adjusted in much the same way as it is done in pixi.js https://pixijs.download/release/docs/PIXI. Ticker.h...

const TARGET_FPMS = 0.06; // 60 / 1000
let lastTime, elapsedMS, deltaTime;

function loop(now) {
  requestAnimationFrame(loop);
  lastTime = lastTime || now;
  elapsedMS = now - lastTime;
  lastTime = now;
  
  deltaTime = elapsedMS * TARGET_FPMS;
  
  cube.position.y += 5 * deltaTime;
}

requestAnimationFrame(loop);