Влияет ли цикл requestAnimationFrame на скорость воспроизведения анимации?

Question

[IliaNeverov]

Здравствуйте! У меня есть куб и есть цикл requestAnimationFrame, который смещает куб по оси Y . Разная ли скорость воспроизведения этой анимации на разных устройствах и в разных браузерах и если скорость разная то как это исправить?

Comments

[Александр]

Будет разная, если таких requestAnimationFrame у Вас много.

Answer 1

[Сергей Соколов]

разная частота вызовов функции в requestAnimationFrame() – зависит от устройства, активности/неактивности вкладки и др.

Но в вашу функцию параметром при вызове передаётся время, прошедшее с некого момента старта, первого вызова. И положение куба стоит расчитывать исходя не из числа вызовов функции, а только исходя из времени.

Так анимация в разных условиях будет иметь идентичную скорость перемещения куба, хоть и с разной частотой кадров: где-то плавнее, где-то скачками, но, например, коснётся пола он одновременно на всех устройствах.

Answer 2

[RAX7]

Да может влиять
https://popmotion.io/blog/20180104-when-ios-thrott...
Можно скорректировать примерно так же, как это сделано в 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);