Guide · 08

Prestazioni e riproduzione

Come Animated evita lavoro a ogni frame, come verificare quale percorso usa un elemento e come sono stati misurati i numeri della home.

Tre percorsi di riproduzione

Animated sceglie un percorso per ogni proprietà. L’API non cambia con il percorso.

Percorso	Quando	Lavoro per frame
browser	Movimento finito di transform e opacity sugli elementi `Animated.<tag>`, molle comprese	Nessuno nel JavaScript della pagina
css	Curve esatte che il browser può esprimere con keyframe CSS condivisi	Nessuno nel JavaScript della pagina
js	Variabili di style normali, input, calcoli personalizzati e confini di sequenza	Una scrittura per valore, nessun render di React

Un valore, molti elementi

Le derivazioni del valore di un hook sono espressioni calc(). Con scope, una sola scrittura di variabile per frame guida ogni elemento del contenitore.

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

Verifica il percorso

inspect(element) restituisce il driver e il motivo del fallback per ogni proprietà animata durante un’esecuzione reale.

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

Parte dal primo frame

Quando l’attività che avvia un movimento tiene occupato il thread principale, come l’idratazione o un commit grande, il movimento riparte appena quel lavoro finisce invece di apparire già avanzato. Un avvio su una pagina nascosta termina in background.

Come sono stati misurati i numeri della home

Ogni scenario è stato eseguito in una pagina nuova dopo un riscaldamento, con tre campioni registrati, riportando la mediana. Il tempo di JavaScript è quello trascorso nei callback di animation frame mentre il movimento è in corso. Esclude style, layout e paint, che il browser esegue con qualsiasi approccio, quindi non è una misura della CPU totale né del frame rate.

La riproduzione nel browser non rende gratuiti layout, paint, compositing o memoria. Misura la schermata reale sui dispositivi che supporti.

Scenario	Configurazione	Risultato
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