animation-performance-retro

レトロ UI のアニメーションパフォーマンス

ピクセルアートの描画やゲーム風インターフェースを滑らかに表示できるよう、アニメーションを最適化します。

ハードウェアアクセラレーション

GPU アクセラレーションを利用したアニメーションには、CSS の transform を使用します。

<div className="transition-transform hover:scale-110" />
<div className="translate-x-0 translate-y-0" />

アニメーションを避けるプロパティ：

• width、height（レイアウトが再計算されます）
• margin、padding（レイアウトが再計算されます）
• top、left（レイアウトが再計算されます）

アニメーションに適したプロパティ：

• transform（GPU アクセラレーションを利用）
• opacity（GPU アクセラレーションを利用）
• filter（GPU アクセラレーションを利用）

ピクセルアニメーション

ハードウェアアクセラレーションを利用するため、アニメーションする SVG を div で囲みます。

function PixelSpinner() {
  return (
    <div className="animate-spin">
      <svg viewBox="0 0 16 16">
        <rect x="2" y="2" width="4" height="4" fill="currentColor" />
      </svg>
    </div>
  );
}

読み込み状態

レトロな読み込みインジケーターには、パルスアニメーションを使用します。

function RetroSkeleton() {
  return (
    <div className="relative animate-pulse">
      <div className="h-20 bg-muted" />
    </div>
  );
}

カスタムレトロアニメーション

ピクセルアートに特化したアニメーションを定義します。

<div
  className="retro animate-[blink_0.5s_step-end_infinite]"
  style={{
    textShadow: "1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff"
  }}
>
  LEVEL UP!
</div>

<style>{`
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
`}</style>

条件付きアニメーション状態

ゲームの状態に応じてアニメーションを適用します。

<div
  className={cn(
    "transition-all duration-300",
    health <= 25 && "animate-pulse bg-red-500/20",
    isLevelUp && "animate-bounce"
  )}
/>

Radix UI アニメーション

オーバーレイには、Radix の状態に基づくアニメーションを使用します。

<DialogContent
  className={cn(
    "data-[state=open]:animate-in data-[state=closed]:animate-out",
    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
  )}
/>

<AccordionContent
  className={cn(
    "overflow-hidden data-[state=closed]:animate-accordion-up",
    "data-[state=open]:animate-accordion-down"
  )}
/>

主な原則

1. SVG を囲む - ハードウェアアクセラレーションを利用するため、必ず div で囲みます
2. transform を使う - top／left よりも transform を優先します
3. ステップアニメーションを使う - ピクセルアートらしい表現には step-end を使います
4. 条件付きクラスを使う - ゲームの状態に応じてアニメーションを適用します
5. カスタムキーフレームを定義する - レトロな表現に特化したアニメーションを定義します
6. テキストシャドウを使う - 色付きの背景でも読みやすくなるよう、白いシャドウを設定します

パフォーマンスチェックリスト

• アニメーションする要素が div で囲まれている
• レイアウトを再計算させるプロパティをアニメーションしていない
• 読み込み状態で animate-pulse を使用している
• 条件付きアニメーションが適切に制御されている
• カスタムアニメーションでステップタイミング関数を使用している

参考コンポーネント

• components/ui/8bit/spinner.tsx - アニメーションするスピナー
• components/ui/8bit/xp-bar.tsx - カスタムの点滅アニメーション
• components/ui/8bit/skeleton.tsx - 読み込み用スケルトン
• components/ui/8bit/accordion.tsx - Radix の状態アニメーション