Guias · 08

Desempenho e reprodução

Como o Animated evita trabalho a cada quadro, como conferir qual caminho um elemento usa e como os números da página inicial foram medidos.

Três caminhos de reprodução

O Animated escolhe um caminho por propriedade. A API não muda com o caminho.

Caminho	Quando	Trabalho por quadro
browser	Movimento finito de transform e opacity em elementos `Animated.<tag>`, molas incluídas	Nenhum no JavaScript da página
css	Curvas exatas que o navegador consegue expressar com keyframes CSS compartilhados	Nenhum no JavaScript da página
js	Variáveis de style comuns, entrada, cálculos próprios e limites de sequence	Uma gravação por valor, sem render do React

Um valor, muitos elementos

As derivações de um valor de hook são expressões calc(). Com scope, uma gravação de variável por quadro move todos os elementos do contêiner.

Preparando o exemplo…

O JavaScript está desativado. O código abaixo é o exemplo 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;
}

Confira o caminho

inspect(element) retorna o driver e o motivo do fallback de cada propriedade animada durante uma execução 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

Começa no primeiro quadro

Quando a tarefa que inicia um movimento mantém a thread principal ocupada, como a hidratação ou um commit grande, o movimento recomeça assim que esse trabalho termina, em vez de aparecer já adiantado. Um início em uma página oculta termina em segundo plano.

Como os números da página inicial foram medidos

Cada cenário rodou em uma página nova depois de um aquecimento, com três amostras registradas, e informamos a mediana. O tempo de JavaScript é o tempo gasto dentro dos callbacks de animation frame enquanto o movimento roda. Ele não inclui estilo, layout e pintura, que o navegador faz em qualquer abordagem, então não mede a CPU total nem a taxa de quadros.

A reprodução no navegador não torna layout, pintura, composição ou memória gratuitos. Meça a tela real nos dispositivos que você suporta.

Cenário	Configuração	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