BACK
Use casesAnimation frame — плавные UI обновления
Use cases · 59

Animation frame — плавные UI обновления

Паттерн

Drag, scroll, resize эмитят события чаще 60 раз в секунду — чаще, чем экран рисует кадры. Все лишние render calls — это потраченные впустую вычисления. Синхронизируем updates с requestAnimationFrame.

Какую проблему решаем

Каждый pointermove обновляет DOM-позицию, и браузер пытается рендерить чаще, чем нужно. Jank, дёрганая анимация, перегрев батареи. Императивный requestAnimationFrame queue быстро становится сложным.

Операторы и зачем они нужны

  • throttleTime(16, animationFrameScheduler, {leading, trailing}) — ограничиваем эмиссию кадрами браузера (~60fps).
  • observeOn(animationFrameScheduler) — переносит downstream-работу на animation frame.
  • map — формирует render command.

Подводные камни

  • debounceTime — drag будет запаздывать, потому что ждёт паузу. Используется только для конечных событий.
  • Без trailing config последняя позиция может потеряться — элемент «застрянет» не в той точке.
  • animationFrameScheduler не работает на SSR. Под browser guard, иначе билд упадёт.

Что в итоге получаем

Renderer получает обновления ровно с частотой кадров браузера. Плавная анимация без лишних вычислений.

script.ts // TypeScript
CONSOLE · Console Output
Нажмите на запуск, чтобы увидеть результат...