# 画面設計書 83-3D Transformation

## 概要

本ドキュメントは、RenderDemoアプリケーションにおける3D Transformation（3D変換）デモページの画面設計について記載します。

### 本画面の処理概要

このページは、Avaloniaフレームワークの `Rotate3DTransform` を使用した3次元変換機能のデモンストレーションを行う画面です。4つの色付きパネルが連続的に回転するアニメーションと、スライダーで各パラメータを調整可能なインタラクティブな3D変換を提供します。

**業務上の目的・背景**：
開発者がAvaloniaの3D変換機能を理解し、立体的なUIエフェクトやカードフリップアニメーション、3Dカルーセル、視覚的に印象的なトランジションなどを実装する際の参考とすることを目的としています。3D変換はモダンなUIデザインにおいて、要素の回転、深度表現、視点制御などに使用される重要な技術です。

**画面へのアクセス方法**：
RenderDemoアプリケーションを起動後、メインウィンドウ左側のHamburgerMenuから「3D Transformation」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. 左側：4つの異なる色（DarkRed、DarkGreen、DarkBlue、Orange）のパネルが10秒周期で3D回転アニメーション
2. 右側：グラデーション背景のパネルを各種スライダーでリアルタイムに3D変換
3. Depthスライダー：視点の深度を100〜300の範囲で調整
4. Center X/Y/Zスライダー：回転中心を-100〜100の範囲で調整
5. Angle X/Y/Zスライダー：各軸の回転角度を-180〜180度の範囲で調整
6. 各パネル内のSliderで深度値を直接操作可能

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuナビゲーション）
- 遷移先：なし（他のデモページへはHamburgerMenu経由で遷移）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 76 | Transform | 主機能 | Rotate3DTransformによる3次元回転変換 |
| 68 | Animation | 補助機能 | キーフレームアニメーションによる連続回転 |
| 58 | Binding | 補助機能 | スライダー値とRotate3DTransformパラメータのバインディング |

## 画面種別

デモ / インタラクティブ

## URL/ルーティング

HamburgerMenuナビゲーション: "3D Transformation"タブ

## 入出力項目

| 項目名 | 入出力 | 型 | 範囲 | 説明 |
|--------|--------|-----|------|------|
| Depthスライダー | 入力 | double | 100〜300 | 視点の深度値 |
| Center Xスライダー | 入力 | double | -100〜100 | X軸方向の回転中心 |
| Center Yスライダー | 入力 | double | -100〜100 | Y軸方向の回転中心 |
| Center Zスライダー | 入力 | double | -100〜100 | Z軸方向の回転中心 |
| Angle Xスライダー | 入力 | double | -180〜180 | X軸周りの回転角度 |
| Angle Yスライダー | 入力 | double | -180〜180 | Y軸周りの回転角度 |
| Angle Zスライダー | 入力 | double | -180〜180 | Z軸周りの回転角度 |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| アニメーションパネル（B1） | Border | DarkRed背景、10秒周期で3D回転 |
| アニメーションパネル（B2） | Border | DarkGreen背景、B1から90度位相差で回転 |
| アニメーションパネル（B3） | Border | DarkBlue背景、B1から180度位相差で回転 |
| アニメーションパネル（B4） | Border | Orange背景、B1から270度位相差で回転 |
| インタラクティブパネル | Border | Red→Blue線形グラデーション、スライダーで操作 |
| パネル内Slider | Slider | 深度値を直接操作（各パネル内に配置） |
| パネル内Button | Button | デモ用のインタラクティブ要素 |
| パネル内TextBlock | TextBlock | "I'm a text"テキスト表示 |

## イベント仕様

### 1-InitializeComponent

ページ初期化時に発生するイベントです。

- **トリガー**：ページのコンストラクタ呼び出し時
- **処理内容**：
  1. AvaloniaXamlLoaderを使用してXAMLリソースを読み込み
  2. Transform3DPageViewModelをDataContextに設定
  3. アニメーションが自動開始

### 2-アニメーション

4つのパネル（B1〜B4）に対するキーフレームアニメーションです。

- **トリガー**：ページ表示時（自動開始）
- **処理内容**：
  1. B1: 0°→90°→360°の回転（10秒周期、無限ループ）
  2. B2: 90°→180°→450°の回転（B1から位相差あり）
  3. B3: 180°→360°→540°の回転
  4. B4: 270°→360°→630°の回転
  5. ZIndexの動的変更で前後関係を制御

### 3-Sliderスライダー値変更

スライダー操作時のリアルタイム変換更新です。

- **トリガー**：各スライダーのValue変更時
- **処理内容**：
  1. ViewModelのプロパティが更新
  2. RaiseAndSetIfChangedで変更通知
  3. Rotate3DTransformのバインディングが自動更新
  4. パネルの3D表示がリアルタイムで反映

## データベース更新仕様

本画面はデータベースを使用しません。

## メッセージ仕様

本画面はメッセージを表示しません。

## 例外処理

本画面はXAMLとViewModelによる宣言的な実装のため、特別な例外処理はありません。

## 備考

- Rotate3DTransformのCenterZ=-100は、回転軸を画面奥側に設定しています
- Depthパラメータは遠近法の強さを制御（値が小さいほど強いパースペクティブ）
- アニメーションのIterationCount="Infinite"で無限ループを実現
- ZIndexの動的変更により、回転中のパネルの前後関係を適切に表現

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

ViewModelのプロパティ定義を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Transform3DPageViewModel.cs | `samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs` | 行9-53で全プロパティ定義を確認 |

**読解のコツ**: RaiseAndSetIfChangedパターンはMVVMの標準的な変更通知メカニズムです。ViewModelBaseを継承しています。

#### Step 2: エントリーポイントを理解する

コードビハインドでのViewModel設定を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Transform3DPage.axaml.cs | `samples/RenderDemo/Pages/Transform3DPage.axaml.cs` | 行13でDataContext設定を確認 |

**主要処理フロー**:
- **行10-14**: コンストラクタでInitializeComponentとDataContext設定

#### Step 3: XAMLレイアウトとスタイルを理解する

アニメーション定義とRotate3DTransformの使用方法を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Transform3DPage.axaml | `samples/RenderDemo/Pages/Transform3DPage.axaml` | 行9-45でスタイルとアニメーション定義を確認 |

**主要処理フロー**:
- **行12-23**: TestContentテンプレート定義（パネル内コンテンツ）
- **行26-33**: Border.Testスタイル定義（共通スタイル）
- **行46-64**: B1のアニメーション定義（0%→25%→100%のキーフレーム）

#### Step 4: Rotate3DTransformのバインディングを理解する

実際のRotate3DTransform適用とデータバインディングを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Transform3DPage.axaml | `samples/RenderDemo/Pages/Transform3DPage.axaml` | 行137-160でRotate3DTransformの使用を確認 |

**主要処理フロー**:
- **行138-141**: B1のRotate3DTransform（CenterZ=-100、Depthバインディング）
- **行180-188**: インタラクティブパネルの全パラメータバインディング

### プログラム呼び出し階層図

```
Transform3DPage (UserControl)
    │
    ├─ コンストラクタ
    │      ├─ InitializeComponent()
    │      └─ DataContext = new Transform3DPageViewModel()
    │
    ├─ Transform3DPageViewModel
    │      ├─ Depth (double) ←→ Slider
    │      ├─ CenterX/Y/Z (double) ←→ Slider
    │      └─ AngleX/Y/Z (double) ←→ Slider
    │
    └─ XAML定義
           │
           ├─ Style Selector="Border#B1"
           │      └─ Animation (AngleX: 0→90→360, 10秒)
           │
           ├─ Style Selector="Border#B2"
           │      └─ Animation (AngleX: 90→180→450, 10秒)
           │
           ├─ Style Selector="Border#B3"
           │      └─ Animation (AngleX: 180→360→540, 10秒)
           │
           ├─ Style Selector="Border#B4"
           │      └─ Animation (AngleX: 270→630, 10秒)
           │
           ├─ Border#B1〜B4
           │      └─ Rotate3DTransform (CenterZ=-100, Depth=Binding)
           │
           └─ インタラクティブBorder
                  └─ Rotate3DTransform
                         ├─ Depth={Binding Depth}
                         ├─ CenterX/Y/Z={Binding}
                         └─ AngleX/Y/Z={Binding}
```

### データフロー図

```
[入力]               [処理]                    [出力]

Sliderドラッグ  ─▶ ViewModel更新            ─▶ プロパティ変更通知
                        │
                        ▼
                   Binding更新
                        │
                        ▼
                   Rotate3DTransform      ─▶ 3Dレンダリング
                        │
                        ▼
                   画面描画                ─▶ 3D変換表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Transform3DPage.axaml | `samples/RenderDemo/Pages/Transform3DPage.axaml` | テンプレート | 3D変換デモのUIレイアウト・アニメーション定義 |
| Transform3DPage.axaml.cs | `samples/RenderDemo/Pages/Transform3DPage.axaml.cs` | ソース | コードビハインド、ViewModel設定 |
| Transform3DPageViewModel.cs | `samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs` | ソース | 3D変換パラメータのViewModel |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | テンプレート | HamburgerMenuナビゲーションを提供 |
