Průvodci · 08

Výkon a přehrávání

Jak se Animated vyhýbá práci v každém snímku, jak ověřit, kterou cestu prvek používá, a jak byla změřena čísla na úvodní stránce.

Tři cesty přehrávání

Animated volí cestu pro každou vlastnost. API se s cestou nemění.

Cesta	Kdy	Práce na snímek
browser	Konečný pohyb transform a opacity na prvcích `Animated.<tag>`, včetně pružin	Žádná v JavaScriptu stránky
css	Přesné křivky, které prohlížeč umí vyjádřit sdílenými CSS keyframes	Žádná v JavaScriptu stránky
js	Běžné proměnné style, vstup, vlastní výpočty a hranice sekvencí	Jeden zápis na hodnotu, žádný render Reactu

Jedna hodnota, mnoho prvků

Odvozeniny hodnoty hooku jsou výrazy calc(). Se scope jeden zápis proměnné na snímek řídí všechny prvky v kontejneru.

Příprava příkladu…

JavaScript je vypnutý. Kód níže je celý příklad.

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

Ověření cesty

inspect(element) vrací driver a důvod fallbacku pro každou animovanou vlastnost během skutečného běhu.

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

Začíná od prvního snímku

Když úloha, která pohyb spouští, zaměstná hlavní vlákno, například hydratace nebo velký commit, pohyb se po skončení té práce spustí znovu, místo aby se objevil už rozběhnutý. Spuštění na skryté stránce doběhne na pozadí.

Jak byla změřena čísla na úvodní stránce

Každý scénář běžel na nové stránce po jednom zahřátí se třemi zaznamenanými vzorky a uvádí se medián. Čas JavaScriptu je čas strávený v callbackech animation frame během pohybu. Nezahrnuje style, layout a paint, které prohlížeč dělá při každém přístupu, takže to není míra celkového CPU ani snímkové frekvence.

Přehrávání v prohlížeči nedělá layout, paint, compositing ani paměť zadarmo. Měřte skutečnou obrazovku na zařízeních, která podporujete.

Scénář	Nastavení	Výsledek
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