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

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 не присваивается значение нигде, сложна сложна слооожна:blink: :blink: :blink:

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

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

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

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