mcpField
R
rendering-animate-svg

rendering-animate-svg

github.com/theorcdev開発2.1k108 回インストール2 日前に更新
リポジトリ

rendering-animate-svg について

rendering-animate-svg は、8-bit UI要素のSVGアニメーションに関する実装指針です。SVG自体ではなく外側の要素をアニメーションさせる方法を、変形やトランジションも含めて説明します。

主な機能

  1. 01SVGではなくラッパーをアニメーション
  2. 02CSSの変形とトランジションに対応
  3. 03ピクセルアートアイコンのホバー効果に適用

活用シーン

  1. 01ピクセルアートのスピナー実装
  2. 028-bitアイコンへのホバーアニメーション追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg

インストール後、Claude Code で/rendering-animate-svgを入力して読み込まれたか確認します。

詳細

SVG 要素ではなくラッパーをアニメーションさせる

多くのブラウザーでは、SVG 要素に対する CSS3 アニメーションでハードウェアアクセラレーションが利用できません。SVG を <div> で囲み、ラッパーをアニメーションさせてください。ピクセルアートのアイコンやアニメーションを含む 8 ビットコンポーネントでは特に重要です。

誤り（SVG を直接アニメーションさせる ― ハードウェアアクセラレーションなし）：

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

正しい（ラッパーの div をアニメーションさせる ― ハードウェアアクセラレーションあり）：

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

ホバー効果のある 8 ビットアイコンコンポーネントの場合：

function RetroIcon({ icon: Icon, className }: RetroIconProps) {
  return (
    <div className={cn("transition-transform hover:scale-110", className)}>
      <Icon />
    </div>
  )
}

これは、すべての CSS トランスフォームとトランジション（transform、opacity、translate、scale、rotate）に適用されます。ラッパーの div によってブラウザーが GPU アクセラレーションを利用できるようになり、アニメーションがより滑らかになります。レトロなピクセルアートのアニメーションでは、その効果が特に顕著です。

コメント

Markdown 対応