Посібники · 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