ガイド · 08

パフォーマンスと再生

Animated がフレームごとの処理をどう避けているか、要素がどの経路を使っているかの確かめ方、そしてトップページの数値の計測方法。

3 つの再生経路

Animated はプロパティごとに経路を選びます。経路が変わっても API は変わりません。

経路	いつ	フレームごとの処理
browser	`Animated.<tag>` 要素での、スプリングを含む有限な transform と opacity のモーション	ページの JavaScript では何もしない
css	共有の CSS キーフレームで表現できる正確なカーブ	ページの JavaScript では何もしない
js	普通の style の変数、入力、独自の計算、sequence の境界	値ごとに 1 回の書き込み、React レンダリングなし

ひとつの値で多くの要素を

フックの値から導いたものは calc() 式です。scope を使えば、1 フレームに 1 回の変数の書き込みでコンテナー内のすべての要素が動きます。

サンプルを準備中…

JavaScript がオフになっています。下のコードがサンプルの全体です。

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

経路を確かめる

inspect(element) は、実際の再生中に、アニメーションしている各プロパティのドライバーとフォールバックの理由を返します。

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

最初のフレームから始まる

モーションを開始した処理がハイドレーションや大きなコミットなどでメインスレッドを占有していると、モーションは途中から始まったように見えるのではなく、その処理が終わった時点でやり直されます。非表示のページで開始したモーションはバックグラウンドで完了します。

トップページの数値の計測方法

各シナリオは新しいページで、ウォームアップ 1 回の後に 3 回計測し、その中央値を示しています。JavaScript の時間は、モーションの再生中にアニメーションフレームのコールバック内で費やされた時間です。スタイル計算、レイアウト、ペイントはどの方法でもブラウザーが行うため含めておらず、CPU 全体の負荷やフレームレートの指標ではありません。

ブラウザー再生でレイアウト、ペイント、コンポジット、メモリのコストがなくなるわけではありません。サポートするデバイスで実際の画面を計測してください。

シナリオ	条件	結果
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