Руководства · 08

Производительность и воспроизведение

Как Animated избегает работы на каждом кадре, как проверить, какой путь использует элемент, и как измерялись цифры на главной странице.

Три пути воспроизведения

Animated выбирает путь для каждого свойства. API от пути не меняется.

Путь	Когда	Работа за кадр
browser	Конечное движение transform и opacity на элементах `Animated.<tag>`, включая пружины	Нет в JavaScript страницы
css	Точные кривые, которые браузер может выразить общими CSS keyframes	Нет в JavaScript страницы
js	Обычные переменные style, ввод, собственные вычисления и границы последовательностей	Одна запись на значение, без рендера React

Одно значение, много элементов

Производные от значения хука — выражения calc(). Со scope одна запись переменной за кадр управляет всеми элементами контейнера.

Подготовка примера…

JavaScript отключён. Код ниже — полный пример.

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

Проверка пути

inspect(element) возвращает драйвер и причину fallback для каждого анимируемого свойства во время реального запуска.

debug.js

import { inspect } from '@kkwaenggwari/animated';

console.table(inspect(element));
// property   driver     reason
// transform  browser    null
// opacity    css        null
// --level    js         css-variable-requires-js

Старт с первого кадра

Когда задача, запускающая движение, занимает главный поток — например, гидратация или большой коммит, — движение перезапускается после окончания этой работы, а не появляется уже продвинутым. Старт на скрытой странице завершается в фоне.

Как измерялись цифры на главной

Каждый сценарий запускался на новой странице после одного прогрева, с тремя записанными замерами; приводится медиана. Время JavaScript — это время внутри колбэков animation frame, пока идёт движение. Оно не включает style, layout и paint, которые браузер выполняет при любом подходе, поэтому это не мера общей нагрузки CPU или частоты кадров.

Воспроизведение браузером не делает layout, paint, compositing и память бесплатными. Измеряйте реальный экран на устройствах, которые вы поддерживаете.

Сценарий	Условия	Результат
400 Animated.div elements move translateX and fade in (timing, 1800 ms)	seed/pose/tempo on Animated.div; 800 browser animations	0.00 ms
One useAnimated value drives 10,000 elements in ordinary style (loop, 1200 ms)	transform and opacity as calc() of one CSS variable written on a scope element	0.13 ms

2026-09-28 · Chrome 153.0.8010.52 (headless) · Windows_NT x64 · Intel(R) Core(TM) i7-14700K