Почему анимация через функцию не плавная?

Question

[rd100]

Как сделать анимацию плавной и там явно больше?
И почему ее продолжительность более 3 сек.?
https://jsfiddle.net/72y368q9/

Answer 1

[Роман]

setTimeout не дает точного запуска функции через указанное количество миллисекунд,
поэтому для анимаций, вместо setTimeout используйте window.requestAnimationFrame;

плюс ко всему, смещение на момент времени должно расчитываться на основании времени, прошедшего с момента старта.

Comments

[rd100]

Спасибо!
Я так понял, что timestamp обязательный аргумент для функции, которая будет вызываться для анимации и в нее Анимейшнфрейм будет передавать время при вызове?
Почему она не хочет работать от события?
https://jsfiddle.net/w46d52ot/

[Роман]

rd100, frameTime содержит время, прошедшее с момента запуска страницы, поэтому на момент клика frameTime уже больше чем duration. Исправить этом можно так https://jsfiddle.net/gdpe83t4/