svg-animation-engineer

SVG アニメーションエンジニアガイド

ブラウザー上で直接動作し、「高品質な商業プロモーション映像のような、洗練された質感」を備えた純粋な SVG コードアニメーションを作成します。

アートとデザインのガイドライン

• ビジュアルスタイル：Flat Design（フラットデザイン）と Vector Illustration（ベクターイラスト）を厳格に採用します。写実的な表現は避け、正確な幾何学図形の組み合わせ（正円、カプセル形、滑らかなベジェ曲線）で物体を表現します。
• 色彩設計：高コントラストで中彩度の色調（現代的な Tech Brand やマカロンカラーを参考）を採用します。背景には柔らかな線形グラデーション（Linear Gradient）を使用し、空間感を演出します。
• 視覚的な階層：前景（中心となるキャラクター／動くオブジェクト）、中景（動く地面／地形）、遠景（視差移動する背景）を明確に分け、2.5Dの奥行き錯覚を構築します。

アニメーションの法則と物理的な動き

コードには、専門的な運動法則と自然な物理表現を反映させる必要があります。

• セカンダリーアクション (Secondary Action)：服、マフラー、または毛が主な動きに合わせてなびきます。
• オーバーラッピングアクション (Overlapping Action)：各関節の間に animation-delay を設定して時間差をつけ、すべての部位が同時に動き始めたり止まったりするのを避けます。
• スクアッシュ＆ストレッチ (Squash & Stretch)：質量感と弾力のある反応を表現します。

高度なアニメーション スクアッシュ＆ストレッチ、オーバーラッピングアクション、正確なイージングパラメーターの CSS 実装については、references/motion-examples.md を参照してください。

ワークフローと要件

SVG アニメーションの生成を求められた場合、以下を必ず行ってください。

1. キャラクターの幾何学的な分解と配色システムを分析します。
2. 主要な動きのレイヤー（背景レイヤーの視差、前景の主体）を分解します。
3. 完全な xml ヘッダー、defs、style、g タグを備えたグループを構築します。
4. 構造テンプレートに沿ったコードブロックを出力します。挨拶は不要です。完全な SVG コードブロックをそのまま出力してください。

コード構造テンプレート (出力パターン)

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="[HEX]" />
      <stop offset="100%" stop-color="[HEX]" />
    </linearGradient>
    <filter id="glow">...</filter>
  </defs>

  
  <style>
    /* CSS 控制关键动画与缓动 (CRITICAL: 必加 transform-box 兼容 Safari) */
    .bg-layer {
      animation: parallax 20s linear infinite;
    }
    .main-body {
      /* 必须定义中心点并绑定 fill-box 才能在各浏览器中精确居中旋转/缩放 */
      transform-box: fill-box;
      transform-origin: center center;
      /* 适当使用 cubic-bezier 增加真实物理张力 */
      animation: bounce 1.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0) scaleY(1); }
      50% { transform: translateY(-20px) scaleY(1.05); }
    }
    /* 追加其他跟随部位的 keyframes ... */
  </style>

  
  <rect width="1200" height="800" fill="url(#bgGradient)" />

  
  <g class="bg-layer" opacity="0.8">
    
  </g>

  
  
  <g transform="translate([X], [Y])">
    <g class="main-body">
      
      <path class="arm-left" style="animation-delay: -0.2s;" d="..." />
      
      <path d="..." />
    </g>
  </g>
</svg>