import { Meta } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional-basic/Functions/frame - Циклический requestAnimationFrame'/>

# `frame`

Утилита, которая циклически вызывает `requestAnimationFrame` для выполнения покадровой анимации в браузере.

Она полезна для создания плавных анимаций, поскольку браузер самостоятельно оптимизирует частоту кадров (обычно 60 FPS) и не рисует анимацию, когда вкладка неактивна.

**SSR поведение:**
В средах без DOM (например, SSR) `requestAnimationFrame` не используется. Функция выполняет `callback` один раз синхронно и сразу вызывает `end` (цикл через `next` не запускается), чтобы предотвратить переполнение стека и блокировку потока на сервере.

**Параметры:**
- `callback: () => void` — Функция, которая отрисовывает или обновляет анимацию на каждом кадре.
- `next?: () => boolean` — Функция-условие. Если она возвращает `true` (только в браузере), анимация продолжится в следующем кадре.
- `end?: () => void` — Функция, которая будет вызвана один раз, когда цикл анимации завершен.

**Возвращает:**
`void`

```typescript
import { frame } from '@dxtmisha/functional-basic'

const element = document.getElementById('box')
let position = 0

// Анимация: сдвигаем блок на 1px каждый кадр, пока позиция < 100
frame(
  // callback (обновление кадра)
  () => {
    position += 1
    if (element) {
      element.style.transform = `translateX(${position}px)`
    }
  },
  // next (продолжать ли)
  () => position < 100,
  // end (когда закончено)
  () => console.log('Анимация завершена!')
)
```
