# 画面設計書 71-Spring Animation

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるSpring Animation（スプリングアニメーション）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供するSpringEasing（バネ運動イージング）機能を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：アニメーション開発において、自然な物理運動を模倣したバネ運動アニメーションは、UIの操作感や視覚的フィードバックを向上させるために重要な技術です。本画面は、Avaloniaフレームワークが提供するSpringEasingクラスの動作を開発者が確認・学習できるようにすることを目的としています。Mass（質量）、Stiffness（硬さ）、Damping（減衰）、InitialVelocity（初速度）の各パラメータがアニメーションにどのように影響するかを視覚的に理解できます。

**画面へのアクセス方法**：RenderDemoアプリケーションを起動後、左側のHamburgerMenuから「Spring Animation」タブを選択することでアクセスできます。

**主要な操作・処理内容**：
1. 画面表示時に自動的にスプリングアニメーションが開始される
2. 赤い矩形（Border）が左端から中央に向かってバネ運動で移動する
3. アニメーションは無限ループ（IterationCount="Infinite"）で継続する
4. SpringEasingパラメータ（Mass=1, Stiffness=2000, Damping=20）により物理的なバネ運動を再現

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuより選択）
- 遷移先：なし（デモページのため画面遷移機能は持たない）

**権限による表示制御**：本画面はデモ用途のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 68 | Animation | 主機能 | スプリングアニメーションのデモ。バネ運動アニメーション |

## 画面種別

デモ / アニメーション表示

## URL/ルーティング

本アプリケーションはデスクトップアプリケーションのため、URLルーティングは使用しません。
HamburgerMenuのタブ選択により画面切り替えが行われます。

## 入出力項目

本画面はデモ表示専用のため、ユーザー入力項目はありません。

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|-----|------|
| なし | - | - | 表示専用画面 |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| アニメーションBorder | Border | 赤い50x50ピクセルの矩形。スプリングアニメーションにより左右に移動 |

## イベント仕様

### 1-ページ読み込み時

ページがロードされると、XAMLで定義されたStyle.Animationsにより自動的にアニメーションが開始されます。

**処理フロー**:
1. UserControlがロードされ、AvaloniaXamlLoader.Load(this)が実行される
2. Border要素にClasses="spring"が適用される
3. Style Selector "Border.spring" に定義されたAnimationが開始
4. TranslateTransform.XプロパティがKeyFrameに従ってアニメーション
5. IterationCount="Infinite"のため、アニメーションは継続的にループ

**アニメーションパラメータ**:
- Duration: 0.9秒
- Easing: SpringEasing (Mass=1, Stiffness=2000, Damping=20, InitialVelocity=0)
- 開始位置: X=-300
- 終了位置: X=0

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

本画面はデモ表示専用のため、データベース操作は行いません。

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | データベース操作なし |

## メッセージ仕様

本画面はデモ表示専用のため、メッセージ表示機能はありません。

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|---------|
| なし | - | - | - |

## 例外処理

| 例外 | 対処 |
|------|------|
| レンダリングエラー | Avaloniaフレームワークの標準エラーハンドリングに委譲 |

## 備考

- SpringEasingは物理シミュレーションに基づいたイージング関数であり、従来の数学的イージング（CubicEaseOut等）とは異なり、より自然な動きを実現します
- Massパラメータを増加させると、アニメーションがより重く・遅くなります
- Stiffnessを増加させると、バネがより硬くなり素早く戻ります
- Dampingを増加させると、振動が早く収束します

---

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

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

### 推奨読解順序

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

SpringEasingの設定とアニメーション定義を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SpringAnimationsPage.xaml | `samples/RenderDemo/Pages/SpringAnimationsPage.xaml` | SpringEasingリソースの定義とアニメーション設定を確認 |

**読解のコツ**: XAMLのResourcesセクションでSpringEasingが定義され、Style.AnimationsでKeyFrameベースのアニメーションが設定されています。DynamicResourceによりSpringEasingが参照されています。

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

ページのロード処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SpringAnimationsPage.xaml.cs | `samples/RenderDemo/Pages/SpringAnimationsPage.xaml.cs` | コードビハインドでInitializeComponentが呼ばれXAMLがロードされる |

**主要処理フロー**:
1. **行8-11**: コンストラクタでInitializeComponent()を呼び出し
2. **行13-16**: AvaloniaXamlLoader.Load(this)によりXAMLを読み込み

#### Step 3: ホスト画面との関係を理解する

メインウィンドウからの画面遷移を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | HamburgerMenu内のTabItemとして本ページが配置されている（行59） |

**主要処理フロー**:
- **行59**: `<TabItem Header="Spring Animation"><pages:SpringAnimationsPage /></TabItem>` でページが登録

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="Spring Animation"]
                  |
                  +-- SpringAnimationsPage (UserControl)
                         |
                         +-- Grid
                                |
                                +-- Border [Classes="spring"]
                                       |
                                       +-- TransformGroup
                                              |
                                              +-- TranslateTransform (X: -300 -> 0 animated)
```

### データフロー図

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

XAMLリソース
SpringEasing      --> Animation Engine    --> Border位置更新
(Mass,Stiffness,      (KeyFrame処理)          (TranslateTransform.X)
Damping,InitVel)

IterationCount    --> ループ制御          --> 無限ループ継続
(Infinite)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SpringAnimationsPage.xaml | `samples/RenderDemo/Pages/SpringAnimationsPage.xaml` | XAML | UIレイアウトとアニメーション定義 |
| SpringAnimationsPage.xaml.cs | `samples/RenderDemo/Pages/SpringAnimationsPage.xaml.cs` | C# | コードビハインド（初期化処理） |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
