Время лечит

Как правильно сделать анимацию линий на графике или полет снаряда в игре, чтобы на всех устройствах скорость была одинаковой?

В примерах даже от таких библиотек, как PixiJS, можно встретить неправильный код: размер или позиция элемента меняются на определенную величину при каждом тике — колбэке setInterval или requestAnimationFrame. Это упрощенные примеры, и важно не перенести такое же поведение в production.

Использование setInterval приведет к тормозам на слабых устройствах. Может не хватить ресурсов для отрисовки каждые N миллисекунд.

Движение на фиксированную величину при каждом requestAnimationFrame приведет к разной скорости. На мощных устройствах requestAnimationFrame будет срабатывать часто и скорость анимации будет большой, а на слабых — наоборот. В зависимости от производительности и нагрузки, у одних пользователей объект может двигаться на пиксель каждые 15 мс, а в других — только 2 раза в секунду.

Решение — работать со временем. Если мы знаем, что за секунду элемент должен сдвинуться на 100 пикселей, а с момента прошлого вызова прошло полсекунды, то нужно сместить объект на 50 пикселей. Все просто.