Помогите пожалуйста, немогу понять этот пример

[IAmTrying]

var cat = document.querySelector("img");
var angle = 0, lastTime = null;
function animate(time) {
if (lastTime != null)
angle += (time - lastTime) * 0.001;
lastTime = time;
cat.style.top = (Math.sin(angle) * 20) + "px";
cat.style.left = (Math.cos(angle) * 200) + "px";
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Объясните пожалуйста, как эта функция работает lastTime = null, а потом условие if (lastTime != null) как запускается тело после if? Зачем мы передаем в функцию переменную если потом не задаем здесь requestAnimationFrame(animate) ? Почему не объявить ее внутри?
angle += (time - lastTime) * 0.001 как это работает? Незаданная переменная time(которая просто объявлена), и lastTime = null, как оно переходит с null в какое-то значение, я вижу что идет присвоение lastTime = time; но переменной time не присваивается значение нигде, сложна сложна слооожна

[Aetae]

animate - это коллбэк, функция которая не вызывается прямо сейчас, а передаётся в качестве параметра в другую функцию(в данном случае requestAnimationFrame), коея уже в свою очередь внутри себя её вызывает с тем или иным набором параметров(в данном случае с параметром time, содержащим метку времени на момент вызова).

lastTime обявлена выше по скоупу(var angle = 0, lastTime = null;) потому доступна для изменения как внутри функции, так и снаружи. Значение null она имеет только первый раз, потом же происходит присовение текущей метки (lastTime = time;) и в последующих вызовах animate она имеет то значение, что и описывается её названием.

angle += (time - lastTime) * 0.001: угол равен время текущего вызова функции animate минус время предыдущего умножить на 0.001.
Фактически это значит, что независимо от частоты кадров угол изменится ровно на 0.001 за каждую прошедшую милисекнуду.

[IAmTrying]

Спасибо за ответ