Синхронизация анимации — введение в циклы по времени

Зачем нужна анимация с учётом времени

Имитация rAF

// requestFrame: simulate ~60 FPS with setTimeout
function requestFrame(fn) {
  // ~16ms between frames for ~60fps
  return setTimeout(function () { fn(Date.now()); }, 16);
}

function cancelFrame(id) {
  clearTimeout(id);
}

// Tiny demo: schedule one frame
requestFrame(function (ts) {
  console.log("frame at", ts);
});

Основы разницы во времени

// Time-based loop: compute delta time in seconds
let running = true;
let last = Date.now();

function loop() {
  if (!running) { return; }
  const now = Date.now();
  const dt = (now - last) / 1000; // seconds
  last = now;

  // Print a tiny delta preview
  console.log("dt", dt.toFixed(3), "s");

  requestFrame(loop);
}

// Start the loop and stop after a few frames
loop();
setTimeout(function () {
  running = false;
  console.log("stop");
}, 60);

Единицы в секунду

// Move with a speed in units/second
let x = 0;               // position
const speed = 50;        // units per second

let lastT = Date.now();
let frames = 0;

function moveLoop() {
  const now = Date.now();
  const dt = (now - lastT) / 1000;
  lastT = now;

  // Distance = speed * time
  x = x + speed * dt;
  frames = frames + 1;

  console.log("x", Math.round(x));

  if (frames < 5) {
    requestFrame(moveLoop);
  } else {
    console.log("final x", Math.round(x));
  }
}

moveLoop();

Небольшая демонстрация сглаживания

// Ease from 0 to 1 over duration using easeOutQuad
function easeOutQuad(t) {
  // t in [0,1]
  return 1 - (1 - t) * (1 - t);
}

async function tween(durationMs) {
  let start = Date.now();
  let id = null;

  function step() {
    const now = Date.now();
    const t = Math.min(1, (now - start) / durationMs);
    const eased = easeOutQuad(t);
    console.log("eased", eased.toFixed(2));

    if (t < 1) {
      id = requestFrame(step);
    } else {
      cancelFrame(id);
      console.log("done");
    }
  }

  step();
}

tween(60);

Знакомство с фиксированным шагом

// Fixed-step taste: step a physics tick and catch up using an accumulator
let acc = 0;                  // accumulated time
const step = 1 / 30;          // 30 FPS fixed step in seconds
let lastTime = Date.now();
let value = 0;
let fixedFrames = 0;

function fixedLoop() {
  const now = Date.now();
  const dt = (now - lastTime) / 1000;
  lastTime = now;
  acc = acc + dt;

  // Run zero or more fixed steps to catch up
  while (acc >= step) {
    // Update logic at a fixed rate
    value = value + 1;        // pretend physics
    acc = acc - step;
  }

  console.log("value", value);

  fixedFrames = fixedFrames + 1;
  if (fixedFrames < 5) {
    requestFrame(fixedLoop);
  } else {
    console.log("fixed stop");
  }
}

fixedLoop();

Тест по разнице во времени и фиксированному шагу

Итоги