Guides · 08

Ydeevne og afspilning

Hvordan Animated undgår arbejde i hver frame, hvordan du tjekker, hvilken vej et element bruger, og hvordan tallene på forsiden blev målt.

Tre afspilningsveje

Animated vælger en vej pr. egenskab. API'et ændrer sig ikke med vejen.

Vej	Hvornår	Arbejde pr. frame
browser	Endelig transform- og opacity-bevægelse på `Animated.<tag>`-elementer, fjedre inklusive	Intet i sidens JavaScript
css	Eksakte kurver, som browseren kan udtrykke med delte CSS-keyframes	Intet i sidens JavaScript
js	Almindelige style-variabler, input, egne beregninger og sekvensgrænser	Én skrivning pr. værdi, ingen React-rendering

Én værdi, mange elementer

Afledninger af en hook-værdi er calc()-udtryk. Med scope styrer én variabelskrivning pr. frame alle elementer i containeren.

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Tjek vejen

inspect(element) returnerer driveren og fallback-årsagen for hver animeret egenskab under en rigtig kørsel.

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

Starter fra første frame

Når opgaven, der starter en bevægelse, holder hovedtråden optaget, som hydrering eller en stor commit, starter bevægelsen forfra, når det arbejde er færdigt, i stedet for at se allerede fremskreden ud. En start på en skjult side gøres færdig i baggrunden.

Sådan blev tallene på forsiden målt

Hvert scenarie kørte på en frisk side efter én opvarmning med tre registrerede målinger, og medianen rapporteres. JavaScript-tid er tiden i animation frame-callbacks, mens bevægelsen kører. Den udelader style, layout og paint, som browseren udfører med enhver tilgang, så den er ikke et mål for samlet CPU eller billedhastighed.

Browserafspilning gør ikke layout, paint, compositing eller hukommelse gratis. Mål den rigtige skærm på de enheder, du understøtter.

Scenarie	Opsætning	Resultat
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