requestAnimationFrame(): движение според времето между кадрите

Полезно е да знаеш

requestAnimationFrame() моли браузъра да извика функция преди следващото прерисуване. Честотата обикновено следва честотата на дисплея; не е обещание за точно 60 извиквания в секунда. В много браузъри работата се паузира за фонови раздели. [1]

Ако местиш обект с по един пиксел на кадър, скоростта зависи от броя кадри. При условни 60 кадъра в секунда това е 60 пиксела за секунда, а при 120 — двойно повече. По-добре изчислявай разстоянието от изминалото време: скорост × интервал.

Например при желана скорост 100 пиксела в секунда и интервал 0,02 секунди стъпката е 2 пиксела. Това е аритметичен пример, а не измерване на конкретен монитор.

За продължаваща анимация функцията трябва отново да поиска следващ кадър. Спирай цикъла, когато вече няма какво да се анимира. Така времевата логика остава ясна и не се поддържа ненужна работа.