Sprievodcovia · 08

Výkon a prehrávanie

Ako sa Animated vyhýba práci v každej snímke, ako overiť, ktorú cestu prvok používa, a ako boli namerané čísla na úvodnej stránke.

Tri cesty prehrávania

Animated volí cestu pre každú vlastnosť. API sa s cestou nemení.

Cesta	Kedy	Práca na snímku
browser	Konečný pohyb transform a opacity na prvkoch `Animated.<tag>`, vrátane pružín	Žiadna v JavaScripte stránky
css	Presné krivky, ktoré prehliadač vie vyjadriť zdieľanými CSS keyframes	Žiadna v JavaScripte stránky
js	Bežné premenné style, vstup, vlastné výpočty a hranice sekvencií	Jeden zápis na hodnotu, žiadny render Reactu

Jedna hodnota, mnoho prvkov

Odvodeniny hodnoty hooku sú výrazy calc(). So scope jeden zápis premennej na snímku riadi všetky prvky v kontajneri.

Príprava príkladu…

JavaScript je vypnutý. Kód nižšie je celý prí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;
}

Overenie cesty

inspect(element) vracia driver a dôvod fallbacku pre každú animovanú vlastnosť počas skutočného behu.

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čína od prvej snímky

Keď úloha, ktorá pohyb spúšťa, zamestná hlavné vlákno, napríklad hydratácia alebo veľký commit, pohyb sa po skončení tej práce spustí znova, namiesto aby sa objavil už rozbehnutý. Spustenie na skrytej stránke dobehne na pozadí.

Ako boli namerané čísla na úvodnej stránke

Každý scenár bežal na novej stránke po jednom zahriatí s tromi zaznamenanými vzorkami a uvádza sa medián. Čas JavaScriptu je čas strávený v callbackoch animation frame počas pohybu. Nezahŕňa style, layout a paint, ktoré prehliadač robí pri každom prístupe, takže to nie je miera celkového CPU ani snímkovej frekvencie.

Prehrávanie v prehliadači nerobí layout, paint, compositing ani pamäť zadarmo. Merajte skutočnú obrazovku na zariadeniach, ktoré podporujete.

Scenár	Nastavenie	Výsledok
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