JavaScript requestAnimationFrame() — плавна анімація на JavaScript

Метод requestAnimationFrame() викликає функцію перед наступним кадром — синхронно з частотою оновлення екрана.

правити

Загальний опис

Анімація через setInterval(fn, 16) завжди трохи смикається: браузер малює кадри за своїм розкладом, а таймер б'є за своїм, і вони не збігаються.

requestAnimationFrame вирішує це в корені — браузер сам каже, коли збирається малювати. Звідси плавність, яку інакше не отримати.

І ще дві переваги, за які його люблять: у прихованій вкладці він зупиняється (не палить батарею намарно) і підлаштовується під екран із частотою 120 Гц, а не тримається за жорсткі 60.

Анімація будується рекурсивно: усередині обробника плануємо наступний кадр.

правити

Порада

Обробник отримує час із моменту завантаження сторінки. Рахуй рух від нього, а не від номера кадру — інакше на екрані зі 120 Гц усе побіжить удвічі швидше.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
requestAnimationFrame	24+	23+	6.1+	15+	12+	10+

Підтримка: мобільні переглядачі

Переглядач
requestAnimationFrame	4.4+	yes	yes	7+

Приклади

+ запропонувати свій приклад у пісочниці

<div id="box" style="width:50px;height:50px;background:#0172ad"></div>

const box = document.getElementById('box');
let start = null;

function step(timestamp) {
    start ??= timestamp;

    const elapsed = timestamp - start;
    // 100px за секунду — незалежно від частоти екрана
    const x = Math.min(elapsed / 10, 300);

    box.style.transform = 'translateX(' + x + 'px)';

    if (x < 300) {
        requestAnimationFrame(step);
    }
}

requestAnimationFrame(step);