Canvas: Jak sprawdzić ile czasu upłyneło od momentu startu animacji?

Pisząc w Canvas w JavaScript do tworzenia animacji zaleca się używanie funkcji: requestAnimationFrame.

I za pomocą niej dowiemy się, ile upłynęło czasu od jej uruchomienia.

Ile upłynęło czasu od startu animacji?

Poniżej przykład:

  let start;
  const render = (timestamp) => {
    if (start === undefined) {
      start = timestamp;
    }
		
    const elapsed = parseInt((timestamp - start) / 1000);

    console.log(`elapsed: ${elapsed}`);
    requestAnimationFrame(render);
  }

  render();

Więc mamy funkcję render. Posiada ona jeden parametr: timestamp. To znacznik czasu, który będzie przekazany poprzez wywołanie funkcji requestAnimationFrame.

Przy pierwszym wywołaniu przypisujemy zmiennej start wartość. Jest to znacznik czasu pierwszego wywołania animacji. A później w zmiennej elapsed zapisujemy, ile czasu upłynęło od startu. Ponieważ znacznik czasu jest podany w milisekundach więc żeby wiedzieć ile to sekund, dzielimy różnicę między znacznikami przez 1000. 1 sekunda = 1000 milisekund.

Restart animacji

Załóżmy, że chcemy, żeby nasza animacji trwała 3 sekundy. Po upływie tego czasu chcemy zacząć wszystko od nowa. Oto przykład:

  let start;
  const animationTime = 3;
  const render = (timestamp) => {

    if (start === undefined) {
      start = timestamp;
    }

    const elapsed = parseInt((timestamp - start) / 1000);

    if (elapsed >= animationTime) {
      start = timestamp;
    }

    console.log(`elapsed: ${elapsed}`);
    requestAnimationFrame(render);
  }

  render();

Została dodana nowa zmienna animationTime, która przechowuje liczbę, mówiącą ile czasu ma trwać animacja. Sprawdzamy warunek: elapsed >= animationTime jeśli jest spełniony, to znaczy, że czas animacji się skończył, więc resetujemy znacznik czasu.

Tak na marginesie: nie tworzymy tutaj żadnej animacji. Ale możemy wykorzystać czas, jaki upłynął do stworzenia ciekawych efektów.