Guider · 08

Prestanda och uppspelning

Hur Animated undviker arbete varje bildruta, hur du kontrollerar vilken väg ett element använder och hur siffrorna på startsidan mättes.

Tre uppspelningsvägar

Animated väljer en väg per egenskap. API:t ändras inte med vägen.

Väg	När	Arbete per bildruta
browser	Ändlig transform- och opacity-rörelse på `Animated.<tag>`-element, fjädrar inräknade	Inget i sidans JavaScript
css	Exakta kurvor som webbläsaren kan uttrycka med delade CSS-keyframes	Inget i sidans JavaScript
js	Vanliga style-variabler, inmatning, egna beräkningar och sekvensgränser	En skrivning per värde, ingen React-rendering

Ett värde, många element

Härledningar av ett hookvärde är calc()-uttryck. Med scope styr en variabelskrivning per bildruta varje element i containern.

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kontrollera vägen

inspect(element) returnerar drivern och fallback-orsaken för varje animerad egenskap under en riktig körning.

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

Startar från första bildrutan

När uppgiften som startar en rörelse håller huvudtråden upptagen, som hydrering eller en stor commit, startar rörelsen om när det arbetet är klart i stället för att se redan påbörjad ut. En start på en dold sida slutförs i bakgrunden.

Så mättes siffrorna på startsidan

Varje scenario kördes på en ny sida efter en uppvärmning, med tre registrerade mätningar, och medianen redovisas. JavaScript-tid är tiden i animation frame-callbacks medan rörelsen pågår. Den utesluter style, layout och paint, som webbläsaren gör med alla metoder, så den är inget mått på total CPU eller bildfrekvens.

Webbläsaruppspelning gör inte layout, paint, compositing eller minne gratis. Mät den riktiga skärmen på de enheter du stöder.

Scenario	Uppställning	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