# 画面設計書 69-Transitions

## 概要

本ドキュメントは、Avalonia UIフレームワークのRenderDemoサンプルアプリケーションにおけるTransitionsデモページの画面設計書です。プロパティ変更時のトランジション（遷移）アニメーション機能を実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、Avaloniaのトランジション機能を包括的にデモンストレーションするページです。キーフレームアニメーションとは異なり、トランジションはプロパティの値が変更されたときに自動的に滑らかな遷移を行います。回転、スケール、高さ、角丸、パディング、影、背景色、グラデーションなど、様々なプロパティのトランジションを視覚的に確認できます。

**業務上の目的・背景**：
トランジションは、ユーザーインタラクションに応じたスムーズなUI変化を実現するための機能です。キーフレームアニメーションより宣言的で、プロパティの開始値と終了値を指定するだけで滑らかな遷移が実現できます。本デモページは、各種トランジションクラスの使用方法を開発者に示すことを目的としています。

**画面へのアクセス方法**：
RenderDemoアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「Transitions」タブを選択することでアクセスします。

**主要な操作・処理内容**：
1. TransformOperationsTransition：RenderTransformプロパティの遷移（回転、スケール、平行移動、スキュー）
2. DoubleTransition：Heightプロパティの遷移
3. CornerRadiusTransition：CornerRadiusプロパティの遷移
4. ThicknessTransition：Paddingプロパティの遷移
5. BoxShadowsTransition：BoxShadowプロパティの遷移
6. BrushTransition：Backgroundプロパティの遷移（単色、グラデーション）

**画面遷移**：
- 遷移元：RenderDemoメインウィンドウ（HamburgerMenuナビゲーション経由）
- 遷移先：なし（デモページのため他画面への遷移機能なし）

**権限による表示制御**：
なし（デモアプリケーションのため権限管理は実装されていません）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 69 | Transition | 主機能 | トランジションのデモ、プロパティ変更時の遷移 |

## 画面種別

デモ / 表示

## URL/ルーティング

RenderDemoアプリケーション内のHamburgerMenuナビゲーションで「Transitions」タブを選択

## 入出力項目

本画面に入出力項目はありません。すべてスタイルとトランジションによる表示のみです。

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| 説明テキスト | TextBlock | 静的 | "Hover to activate Transitions." |
| Rect1 | Border | 静的 | 回転・スケールトランジション |
| Rect2 | Border | 静的 | スケールトランジション |
| Rect3 | Border | 静的 | 回転トランジション（1回転） |
| Rect4 | Border | 静的 | 平行移動トランジション |
| Rect5 | Border | 静的 | スキュートランジション |
| Rect6 | Border | 静的 | 遅延付きスケールトランジション |
| Rect7 | Border | 静的 | 高さトランジション |
| Rect8 | Border | 静的 | 角丸トランジション |
| Rect9 | Border | 静的 | パディングトランジション |
| Shadow | Border | 静的 | BoxShadowトランジション x2 |
| Rect10 | Border | 静的 | 単色間ブラシトランジション |
| Rect11 | Border | 静的 | 単色→グラデーションブラシトランジション |
| Rect12 | Border | 静的 | LinearGradient間ブラシトランジション |
| Rect13 | Border | 静的 | ConicGradient間ブラシトランジション |
| Rect14 | Border | 静的 | RadialGradient間ブラシトランジション x4 |

## イベント仕様

### 1-PointerOver（ホバー）

マウスホバー時にトランジションを開始します。

- **トリガー**: :pointerover擬似クラス
- **対象コントロール**: すべてのデモ要素
- **処理内容**: Transitionsで定義された遷移プロパティが滑らかに変化

### 2-PointerLeave（ホバー解除）

マウスがコントロールから離れると元の値に遷移します。

- **トリガー**: :pointerover擬似クラスの解除
- **対象コントロール**: すべてのデモ要素
- **処理内容**: 元のプロパティ値に滑らかに戻る

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

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

### 操作別データベース影響一覧

該当なし

## メッセージ仕様

本画面にはメッセージ表示機能はありません。

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| 特になし | - |

## 備考

- トランジションはキーフレームアニメーションと異なり、開始値と終了値を指定するだけで滑らかな遷移が実現できます
- TransformOperationsTransitionはrotate(), scale(), translateY(), skewX()などのCSS-likeな変換構文をサポートします
- Delayプロパティで遷移開始の遅延を設定できます（Rect6の例）
- すべてのトランジションはDuration="0:0:0.5"または"0:0:1"で設定されています
- テンプレートリソースとしてAcorn（どんぐり）とHeart（ハート）のPathデータが定義されています

---

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

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

### 推奨読解順序

#### Step 1: 基本構造を理解する

トランジションの基本的な定義パターンを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | Border.Test共通スタイル（42-53行目） |

**読解のコツ**: Transitionsプロパティ内にTransitionオブジェクトを定義し、Propertyで対象プロパティ、Durationで遷移時間を指定します。

#### Step 2: 各種トランジションを理解する

トランジションの種類別の使用方法を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | TransformOperationsTransition（47-53行目） |
| 2-2 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | DoubleTransition（96-102行目） |
| 2-3 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | CornerRadiusTransition（108-114行目） |
| 2-4 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | ThicknessTransition（120-126行目） |
| 2-5 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | BoxShadowsTransition（132-142行目） |
| 2-6 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | BrushTransition（147-245行目） |

**主要処理フロー**:
1. **47-53行目**: TransformOperationsTransitionでRenderTransformを制御
2. **55-56行目**: :pointeroverでRenderTransform値を設定（例："rotate(120deg) scale(1.5)"）
3. **83-94行目**: Delay="0:0:1"で1秒遅延後にトランジション開始
4. **132-145行目**: BoxShadowsTransitionでinsetシャドウを含む複合シャドウを遷移

#### Step 3: UI構造を理解する

実際の要素配置を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | WrapPanel内のBorder配置（249-282行目） |

**主要処理フロー**:
- **250-252行目**: StackPanelで説明テキスト配置
- **253行目**: WrapPanelで各Borderを折り返し配置
- **254-279行目**: 19個のBorder（各種トランジションデモ）

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

```
TransitionsPage (UserControl)
    │
    └─ UserControl.Styles
           │
           ├─ Styles.Resources
           │      ├─ Template x:Key="Acorn"
           │      └─ Template x:Key="Heart"
           │
           ├─ Style Selector="Border.Test"
           │      ├─ Setter Property="Transitions"
           │      │      └─ TransformOperationsTransition
           │      └─ Setter Property="RenderTransform" Value="none"
           │
           ├─ Style Selector="Border.Rect1:pointerover"
           │      └─ Setter Property="RenderTransform" Value="rotate(120deg) scale(1.5)"
           │
           ├─ Style Selector="Border.Rect7"
           │      └─ Setter Property="Transitions"
           │             └─ DoubleTransition Property="Height"
           │
           ├─ Style Selector="Border.Rect8"
           │      └─ Setter Property="Transitions"
           │             └─ CornerRadiusTransition Property="CornerRadius"
           │
           ├─ Style Selector="Border.Rect9"
           │      └─ Setter Property="Transitions"
           │             └─ ThicknessTransition Property="Padding"
           │
           ├─ Style Selector="Border.Shadow"
           │      └─ Setter Property="Transitions"
           │             └─ BoxShadowsTransition Property="BoxShadow"
           │
           └─ Style Selector="Border.Rect10-14"
                  └─ Setter Property="Transitions"
                         └─ BrushTransition Property="Background"
```

### データフロー図

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

PointerOver ─────────────────▶ :pointerover擬似クラス ───────────▶ プロパティ値変更
     │                               │
     │                               ▼
     │                        Transitions検出
     │                               │
     │                               ├─ TransformOperationsTransition
     │                               │      └─ RenderTransform補間
     │                               │
     │                               ├─ DoubleTransition
     │                               │      └─ double値補間
     │                               │
     │                               ├─ CornerRadiusTransition
     │                               │      └─ CornerRadius補間
     │                               │
     │                               ├─ ThicknessTransition
     │                               │      └─ Thickness補間
     │                               │
     │                               ├─ BoxShadowsTransition
     │                               │      └─ BoxShadow補間
     │                               │
     │                               └─ BrushTransition
     │                                      └─ Brush補間
     │                                             │
     │                                             ├─ SolidColorBrush
     │                                             ├─ LinearGradientBrush
     │                                             ├─ ConicGradientBrush
     │                                             └─ RadialGradientBrush
     │                               │
     └───────────────────────────────▼
                               レンダリング更新 ──────────────────▶ 視覚効果
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | XAML | トランジション定義、UI配置 |
| TransitionsPage.xaml.cs | `samples/RenderDemo/Pages/TransitionsPage.xaml.cs` | ソース | コードビハインド（最小限） |
| TransformOperationsTransition.cs | `src/Avalonia.Base/Animation/Transitions/TransformOperationsTransition.cs` | ソース | 変換操作トランジション |
| DoubleTransition.cs | `src/Avalonia.Base/Animation/Transitions/DoubleTransition.cs` | ソース | double型トランジション |
| BrushTransition.cs | `src/Avalonia.Base/Animation/Transitions/BrushTransition.cs` | ソース | ブラシトランジション |
