Przewodniki · 08

Wydajność i odtwarzanie

Jak Animated unika pracy w każdej klatce, jak sprawdzić, której ścieżki używa element, i jak zmierzono liczby na stronie głównej.

Trzy ścieżki odtwarzania

Animated wybiera ścieżkę dla każdej właściwości. API nie zmienia się wraz ze ścieżką.

Ścieżka	Kiedy	Praca na klatkę
browser	Skończony ruch transform i opacity na elementach `Animated.<tag>`, łącznie ze sprężynami	Brak w kodzie JavaScript strony
css	Dokładne krzywe, które przeglądarka może wyrazić wspólnymi CSS keyframes	Brak w kodzie JavaScript strony
js	Zwykłe zmienne style, wejście, własne obliczenia i granice sekwencji	Jeden zapis na wartość, bez renderu React

Jedna wartość, wiele elementów

Pochodne wartości hooka to wyrażenia calc(). Z scope jeden zapis zmiennej na klatkę steruje każdym elementem w kontenerze.

Przygotowywanie przykładu…

JavaScript jest wyłączony. Kod poniżej to pełny przykład.

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;
}

Sprawdź ścieżkę

inspect(element) zwraca sterownik i powód fallbacku dla każdej animowanej właściwości podczas rzeczywistego działania.

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

Startuje od pierwszej klatki

Gdy zadanie uruchamiające ruch zajmuje główny wątek, jak hydratacja czy duże zatwierdzenie, ruch startuje od nowa po zakończeniu tej pracy, zamiast pojawić się już zaawansowany. Start na ukrytej stronie kończy się w tle.

Jak zmierzono liczby na stronie głównej

Każdy scenariusz uruchomiono na świeżej stronie po jednej rozgrzewce, z trzema zarejestrowanymi próbkami; podajemy medianę. Czas JavaScriptu to czas spędzony w callbackach animation frame, gdy trwa ruch. Nie obejmuje style, layout i paint, które przeglądarka wykonuje przy każdym podejściu, więc nie jest miarą całkowitego CPU ani liczby klatek.

Odtwarzanie w przeglądarce nie sprawia, że layout, paint, compositing i pamięć są darmowe. Mierz prawdziwy ekran na urządzeniach, które wspierasz.

Scenariusz	Konfiguracja	Wynik
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