# 画面設計書 68-Animations

## 概要

本ドキュメントは、Avalonia UIフレームワークのRenderDemoサンプルアプリケーションにおけるAnimationsデモページの画面設計書です。キーフレームベースのアニメーション機能を実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、Avaloniaのキーフレームアニメーション機能を包括的にデモンストレーションするページです。回転、スケール、平行移動、スキュー、色変化、影効果、ブラー効果、グラデーションアニメーションなど、様々なアニメーション効果を視覚的に確認できます。多くのアニメーションはホバー時にトリガーされ、一部は常時再生されます。

**業務上の目的・背景**：
モダンなユーザーインターフェースでは、アニメーションは重要なUX要素です。本デモページは、Avaloniaが提供する豊富なアニメーション機能（Easingカーブ、キーフレーム、反復、再生方向など）の使用方法を開発者に示すことを目的としています。

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

**主要な操作・処理内容**：
1. ホバーアニメーション：要素にマウスを乗せるとアニメーションが開始
2. 常時アニメーション：ページ表示中は常に再生されるアニメーション
3. 回転アニメーション：RotateTransformによる回転効果
4. スケールアニメーション：ScaleTransformによる拡大縮小効果
5. 平行移動アニメーション：TranslateTransformによる移動効果
6. スキューアニメーション：SkewTransformによる傾斜効果
7. 色変化アニメーション：Background色の変化
8. 影アニメーション：BoxShadowの変化
9. ブラーアニメーション：blur効果の変化
10. グラデーションアニメーション：Linear/Radial/Conicグラデーションの変化

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 68 | Animation | 主機能 | アニメーションのデモ、キーフレームベースのアニメーション |
| 72 | Easings | 補助機能 | アニメーションの加速・減速曲線 |

## 画面種別

デモ / 表示

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| 説明テキスト | TextBlock | 静的 | "Hover to activate Keyframe Animations." |
| Rect1 | Border | 静的 | 回転・スケールアニメーション（ホバー） |
| Rect2 | Border | 静的 | スケールアニメーション（ホバー） |
| Rect3 | Border | 静的 | スケールアニメーション（常時、ハート） |
| Rect4 | Border | 静的 | 平行移動・色変化アニメーション（ホバー） |
| Rect5 | Border | 静的 | スキューアニメーション（ホバー） |
| Rect6 | Border | 静的 | 色変化アニメーション（常時、レインボー） |
| Shadow | Border | 静的 | BoxShadowアニメーション（常時）x2 |
| Rect7 | Border | 静的 | 単色→グラデーションアニメーション（常時） |
| Rect8 | Border | 静的 | LinearGradientアニメーション（常時） |
| Rect9 | Border | 静的 | ConicGradientアニメーション（常時） |
| Rect10 | Border | 静的 | RadialGradientアニメーション（常時） |
| Blur | Border | 静的 | ブラーアニメーション（常時） |
| DropShadow | Border | 静的 | ドロップシャドウアニメーション（常時） |

## イベント仕様

### 1-PointerOver（ホバー）

マウスホバー時にアニメーションを開始します。

- **トリガー**: :pointerover擬似クラス
- **対象コントロール**: Rect1, Rect2, Rect4, Rect5
- **処理内容**: Style.Animationsで定義されたアニメーションを再生

### 2-常時再生アニメーション

ページ表示中は常にアニメーションが再生されます。

- **トリガー**: 該当なし（常時）
- **対象コントロール**: Rect3, Rect6, Shadow, Rect7-10, Blur, DropShadow
- **処理内容**: IterationCount="Infinite"で無限ループ再生

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

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

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

該当なし

## メッセージ仕様

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

## 例外処理

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

## 備考

- アニメーションはすべてXAMLのStyle.Animationsで定義されています
- Easingカーブには SineEaseInOut, QuadraticEaseInOut, BounceEaseInOut, CircularEaseInOut などが使用されています
- PlaybackDirectionには Normal, Alternate, AlternateReverse が使用されています
- FillMode="None"でアニメーション終了後に元の状態に戻ります
- テンプレートリソースとして Acorn（どんぐり）と Heart（ハート）のPathデータが定義されています

---

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

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

### 推奨読解順序

#### Step 1: リソースとテンプレートを理解する

アニメーション対象となる図形テンプレートを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | Styles.Resources内のAcorn/Heartテンプレート（11-39行目） |

**読解のコツ**: PathのDataプロパティにSVGパスデータが記述されています。Acornはどんぐり形状、Heartはハート形状を定義しています。

#### Step 2: アニメーション定義を理解する

各種アニメーションの定義パターンを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | 基本スタイル定義（41-46行目） |
| 2-2 | AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | Rect1:pointerover アニメーション（47-65行目） |
| 2-3 | AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | Rect6 レインボーアニメーション（111-139行目） |
| 2-4 | AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | グラデーションアニメーション（167-310行目） |

**主要処理フロー**:
1. **41-46行目**: Border.Test共通スタイル（Margin, Width, Height, Child）
2. **47-65行目**: Rect1のホバー時アニメーション（回転、スケール）
3. **111-139行目**: Rect6のレインボー色変化（IterationCount="Infinite"）
4. **233-261行目**: Rect9のConicGradientアニメーション

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

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

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

**主要処理フロー**:
- **349-352行目**: StackPanelで説明テキスト配置
- **353行目**: WrapPanelで各Borderを折り返し配置
- **354-371行目**: 14個のBorder（各種アニメーションデモ）

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

```
AnimationsPage (UserControl)
    │
    └─ UserControl.Styles
           │
           ├─ Styles.Resources
           │      ├─ Template x:Key="Acorn"
           │      │      └─ Path (どんぐり形状)
           │      └─ Template x:Key="Heart"
           │             └─ Path (ハート形状)
           │
           ├─ Style Selector="Border.Test"
           │      └─ 共通プロパティ (Margin, Width, Height, Child)
           │
           ├─ Style Selector="Border.Rect1:pointerover"
           │      └─ Animation
           │             └─ KeyFrame (回転、スケール)
           │
           ├─ Style Selector="Border.Rect2:pointerover"
           │      └─ Animation
           │             └─ KeyFrame (スケール)
           │
           ├─ Style Selector="Border.Rect3"
           │      └─ Animation (IterationCount=Infinite)
           │             └─ KeyFrame (スケール、ハート)
           │
           ├─ ... (他のスタイル定義)
           │
           └─ Style Selector="Border.DropShadow"
                  └─ Animation
                         └─ KeyFrame (drop-shadow効果)
```

### データフロー図

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

PointerOver ─────────────────▶ :pointerover擬似クラス ───────────▶ アニメーション開始
     │                               │
     │                               ▼
     │                        Style.Animations
     │                               │
     │                               ├─ Animation (Duration, Easing, IterationCount)
     │                               │      │
     │                               │      └─ KeyFrame (Cue, Setter)
     │                               │             │
     │                               │             └─ Property変更
     │                               │                    │
     │                               │                    ├─ RotateTransform.Angle
     │                               │                    ├─ ScaleTransform.ScaleX/Y
     │                               │                    ├─ TranslateTransform.Y
     │                               │                    ├─ SkewTransform.AngleX
     │                               │                    ├─ Background
     │                               │                    ├─ BoxShadow
     │                               │                    └─ Effect (blur, drop-shadow)
     │                               │
     │                               ▼
     └────────────────────────── レンダリング更新 ──────────────▶ 視覚効果
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | XAML | アニメーション定義、UI配置 |
| AnimationsPage.xaml.cs | `samples/RenderDemo/Pages/AnimationsPage.xaml.cs` | ソース | コードビハインド（最小限） |
| AnimationsPageViewModel.cs | `samples/RenderDemo/ViewModels/AnimationsPageViewModel.cs` | ソース | ViewModel（使用されているが詳細不明） |
| Animation.cs | `src/Avalonia.Base/Animation/Animation.cs` | ソース | Animationクラス定義 |
| KeyFrame.cs | `src/Avalonia.Base/Animation/KeyFrame.cs` | ソース | KeyFrameクラス定義 |
