Útmutatók · 08

Teljesítmény és lejátszás

Hogyan kerüli el az Animated a képkockánkénti munkát, hogyan ellenőrizheti, melyik utat használja egy elem, és hogyan mértük a kezdőlap számait.

Három lejátszási út

Az Animated tulajdonságonként választ utat. Az API nem változik az út szerint.

Út	Mikor	Képkockánkénti munka
browser	Véges transform- és opacity-mozgás `Animated.<tag>` elemeken, rugókkal együtt	Semmi az oldal JavaScript-kódjában
css	Pontos görbék, amelyeket a böngésző közös CSS-kulcskockákkal ki tud fejezni	Semmi az oldal JavaScript-kódjában
js	Sima stílusváltozók, bemenet, saját számítás és szekvenciahatárok	Értékenként egy írás, React-renderelés nélkül

Egy érték, sok elem

Egy hookérték származékai calc() kifejezések. A scope használatakor képkockánként egyetlen változóírás vezérli a tárolóelem összes elemét.

A példa előkészítése…

A JavaScript ki van kapcsolva. Az alábbi kód a teljes példa.

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

Ellenőrizze az utat

Az inspect(element) valódi futás közben minden animált tulajdonság driverét és tartalékútvonal-okát visszaadja.

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

Az első képkockától indul

Ha a mozgást indító feladat lefoglalja a fő szálat, például hidratálás vagy egy nagy commit, a mozgás a munka végeztével újraindul, ahelyett hogy már előrehaladottnak tűnne. Rejtett oldalon indított mozgás a háttérben fejeződik be.

Hogyan mértük a kezdőlap számait

Minden forgatókönyv friss oldalon futott egy bemelegítés után, három rögzített mintával, és a mediánt közöljük. A JavaScript-idő a mozgás közben az animation-frame callbackekben töltött idő. Nem tartalmazza a stílust, az elrendezést és a festést, amelyeket a böngésző minden megközelítésnél elvégez, ezért nem a teljes CPU vagy a képkockasebesség mérőszáma.

A böngészős lejátszás nem teszi ingyenessé az elrendezést, a festést, a kompozitálást vagy a memóriát. Mérje a valódi képernyőt a támogatott eszközökön.

Forgatókönyv	Beállítás	Eredmény
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