Guías · 08

Rendimiento y reproducción

Cómo evita Animated trabajo en cada fotograma, cómo comprobar qué camino usa un elemento y cómo se midieron las cifras de la portada.

Tres caminos de reproducción

Animated elige un camino por propiedad. La API no cambia según el camino.

Camino	Cuándo	Trabajo por fotograma
browser	Movimiento finito de transform y opacity en elementos `Animated.<tag>`, resortes incluidos	Ninguno en el JavaScript de la página
css	Curvas exactas que el navegador puede expresar con keyframes CSS compartidos	Ninguno en el JavaScript de la página
js	Variables de style normales, entrada, cálculos propios y límites de sequence	Una escritura por valor, sin render de React

Un valor, muchos elementos

Las derivaciones de un valor de hook son expresiones calc(). Con scope, una escritura de variable por fotograma mueve todos los elementos del contenedor.

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo 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;
}

Comprueba el camino

inspect(element) devuelve el driver y el motivo de fallback de cada propiedad animada durante una ejecución real.

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

Empieza desde el primer fotograma

Cuando la tarea que inicia un movimiento mantiene ocupado el hilo principal, como la hidratación o un commit grande, el movimiento se reinicia en cuanto termina ese trabajo en lugar de aparecer ya avanzado. Un inicio en una página oculta termina en segundo plano.

Cómo se midieron las cifras de la portada

Cada escenario se ejecutó en una página nueva tras un calentamiento, con tres muestras registradas, y se informa la mediana. El tiempo de JavaScript es el que se pasa dentro de los callbacks de animation frame mientras dura el movimiento. Excluye el estilo, el layout y el pintado, que el navegador hace con cualquier enfoque, así que no mide la CPU total ni la tasa de fotogramas.

La reproducción en el navegador no hace gratis el layout, el pintado, la composición ni la memoria. Mide la pantalla real en los dispositivos que soportas.

Escenario	Configuración	Resultado
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