# 機能設計書 68-Animation

## 概要

本ドキュメントは、Avaloniaフレームワークにおける**Animation**機能の設計仕様を記述する。Animationは、キーフレームベースのプロパティアニメーションを定義し、UIに動きを与える機能を提供する。

### 本機能の処理概要

Animationは、AvaloniaObjectを継承し、キーフレームを使用してプロパティ値を時間経過とともに変化させる機能を提供する。Duration、IterationCount、PlaybackDirection、FillMode、Easing、Delay等の豊富なパラメータで柔軟なアニメーション定義が可能である。

**業務上の目的・背景**：現代のUIアプリケーションでは、アニメーションはユーザー体験を向上させる重要な要素である。状態遷移の可視化、ユーザー操作へのフィードバック、注意の誘導など、様々な場面でアニメーションが活用される。Animationは、宣言的にアニメーションを定義し、スタイルやトリガーと組み合わせて使用できる柔軟な機能を提供する。

**機能の利用シーン**：
- コントロールの状態変化時のアニメーション（:hover時の拡大等）
- ページ遷移時のトランジション
- ローディングインジケーターのアニメーション
- ユーザー操作へのフィードバック効果

**主要な処理内容**：
1. キーフレームの定義と解釈
2. アニメーターの生成とプロパティへの適用
3. 時間進行に応じた値の補間
4. イージング関数による動きの調整
5. 繰り返し制御と再生方向の管理

**関連システム・外部連携**：AnimationはAvalonia.Base.Animationモジュール内で実装され、Style、ControlTheme、Transition、およびRenderingシステムと連携する。

**権限による制御**：特にアクセス権限による制御は行われない。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | Composition | 補助機能 | キーフレームベースのアニメーション表示 |
| 68 | Animations | 主機能 | アニメーションのデモ。キーフレームベースのアニメーション |
| 70 | Custom Animator | 主機能 | カスタムアニメーターのデモ |
| 71 | Spring Animation | 主機能 | スプリングアニメーションのデモ |

## 機能種別

アニメーション / プロパティ補間 / 時間制御

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| Duration | TimeSpan | No | アニメーションの長さ | - |
| IterationCount | IterationCount | No | 繰り返し回数（デフォルト1） | Infinite時はRunAsync使用不可 |
| PlaybackDirection | PlaybackDirection | No | 再生方向 | - |
| FillMode | FillMode | No | 開始前・終了後の値の維持方法 | - |
| Easing | Easing | No | イージング関数（デフォルトLinear） | - |
| Delay | TimeSpan | No | 開始前の遅延 | - |
| DelayBetweenIterations | TimeSpan | No | 繰り返し間の遅延 | - |
| SpeedRatio | double | No | 速度倍率（デフォルト1） | - |
| Children | KeyFrames | Yes | キーフレームコレクション | - |

### 入力データソース

- XAML定義またはコードでのアニメーション構築
- スタイルのAnimationsコレクション

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| IDisposable | subscription | アニメーションの購読（停止用） |
| Task | completion | アニメーション完了を待つTask |

### 出力先

- ターゲットコントロールのAvaloniaProperty

## 処理フロー

### 処理シーケンス

```
1. Animation定義
   └─ Duration, IterationCount, KeyFrames等の設定
2. Applyメソッド呼び出し
   └─ アニメーションの適用開始
3. キーフレームの解釈
   └─ InterpretKeyframesでAnimatorを生成
4. アニメーターの適用
   └─ 各プロパティにアニメーターを登録
5. 時間進行とイベント発火
   └─ ClockのTick毎に値を補間
6. 完了処理
   └─ onCompleteコールバック実行、購読解除
```

### フローチャート

```mermaid
flowchart TD
    A[Animation.Apply呼び出し] --> B[InterpretKeyframes]
    B --> C[AnimatorKeyFrame生成]
    C --> D[ハンドラーリスト構築]
    D --> E{アニメーター数}
    E -->|1つ| F[単一アニメーター適用]
    E -->|複数| G[複数アニメーター適用]
    F --> H[Animator.Apply]
    G --> I[各Animator.Apply]
    I --> J[Task.WhenAll]
    H --> K[時間進行]
    J --> K
    K --> L{Tick処理}
    L --> M[値の補間計算]
    M --> N[プロパティ更新]
    N --> O{完了判定}
    O -->|継続| L
    O -->|完了| P[onComplete実行]
    P --> Q[購読解除]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-68-01 | Infinite制限 | IterationCount.Infinite時はRunAsyncメソッド使用不可 | RunAsync呼び出し時 |
| BR-68-02 | Setter Property必須 | KeyFrameのSetterにはPropertyが必要 | InterpretKeyframes時 |
| BR-68-03 | Animator登録必須 | プロパティにAnimatorが登録されている必要がある | InterpretKeyframes時 |
| BR-68-04 | FillMode適用 | Forward/Both時は最後のキーフレーム、Backward/Both時は最初のキーフレームの値を維持 | アニメーション開始・終了時 |

### 計算ロジック

- Cue計算: KeyTime使用時は `keyframe.KeyTime.TotalSeconds / Duration.TotalSeconds`
- イージング適用: `Easing.Ease(progress)`

## データベース操作仕様

本機能はデータベースを使用しない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | InvalidOperationException | SetterにPropertyがない場合 | Propertyを設定する |
| - | InvalidOperationException | Animatorが登録されていない場合 | Animation.Animatorsに登録する |
| - | InvalidOperationException | Infinite時にRunAsync使用 | Applyメソッドを使用する |

### リトライ仕様

リトライ処理は行わない。

## トランザクション仕様

本機能はトランザクションを使用しない。

## パフォーマンス要件

- アニメーションはGPUアクセラレーションを活用
- 60fps以上のフレームレートを目標

## セキュリティ考慮事項

特段のセキュリティ要件はない。

## 備考

- XAMLでは`<Animation>`要素で定義
- スタイルの`<Style.Animations>`内に配置

---

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

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

### 推奨読解順序

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

Animationクラスの構造とプロパティを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Animation.cs | `src/Avalonia.Base/Animation/Animation.cs` | 主要プロパティとApply/RunAsyncメソッドを確認 |

**読解のコツ**: AnimationはAvaloniaObjectを継承し、DirectPropertyを多用している。Childrenプロパティ（KeyFrames）が[Content]属性でマークされ、XAMLでの直接子要素として扱われる。

**主要処理フロー (Animation.cs)**:
1. **21-89行目**: プロパティ定義（Duration, IterationCount, PlaybackDirection, FillMode, Easing, Delay, SpeedRatio）
2. **91-98行目**: _duration等のフィールド定義
3. **100-170行目**: プロパティのゲッター・セッター
4. **176行目**: Children プロパティ（KeyFrames）- [Content]属性付き
5. **195-269行目**: InterpretKeyframes - キーフレームからAnimatorを生成
6. **275-318行目**: Apply - アニメーション適用の内部実装
7. **320-361行目**: RunAsync - 非同期でアニメーション実行

#### Step 2: キーフレームを理解する

KeyFrameとKeyFramesの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | KeyFrame.cs | `src/Avalonia.Base/Animation/KeyFrame.cs` | Cue, KeyTime, Settersを確認 |
| 2-2 | KeyFrames.cs | `src/Avalonia.Base/Animation/KeyFrames.cs` | KeyFrameコレクション |

#### Step 3: アニメーターを理解する

Animatorインターフェースと実装を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | IAnimator.cs | `src/Avalonia.Base/Animation/IAnimator.cs` | アニメーターインターフェース |
| 3-2 | Animator`1.cs | `src/Avalonia.Base/Animation/Animator`1.cs` | ジェネリックアニメーター |

#### Step 4: イージング関数を理解する

Easing関数の構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Easing.cs | `src/Avalonia.Base/Animation/Easings/Easing.cs` | イージング基底クラス |
| 4-2 | LinearEasing.cs | `src/Avalonia.Base/Animation/Easings/LinearEasing.cs` | 線形イージング |

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

```
Style.Animations または 直接呼び出し
    │
    └─ Animation.Apply(control, clock, match, onComplete)
           │
           ├─ InterpretKeyframes(control)
           │      │
           │      ├─ KeyFrame解釈
           │      │
           │      ├─ Animator生成
           │      │
           │      └─ AnimatorKeyFrame追加
           │
           └─ animator.Apply(animation, control, clock, match, onComplete)
                  │
                  └─ 時間進行とプロパティ更新
                         │
                         ├─ Easing.Ease(progress)
                         │
                         └─ 値の補間計算
```

### データフロー図

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

Animation定義 ─────────────▶ Animation.Apply() ──────────────▶ プロパティ更新
    │                              │                                  │
    │ Duration                     │ InterpretKeyframes()             │ 補間値
    │ KeyFrames                    │ Animator.Apply()                 │
    │ Easing                       │ Tick処理                         │
    └──────────────────────────────┘                                  │
                                                                      ▼
                                                              AvaloniaProperty更新
                                                                      │
                                                                      ▼
                                                              UI描画更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Animation.cs | `src/Avalonia.Base/Animation/Animation.cs` | ソース | アニメーションメインクラス |
| Animation.AnimatorRegistry.cs | `src/Avalonia.Base/Animation/Animation.AnimatorRegistry.cs` | ソース | アニメーター登録 |
| AnimationInstance`1.cs | `src/Avalonia.Base/Animation/AnimationInstance`1.cs` | ソース | アニメーションインスタンス |
| KeyFrame.cs | `src/Avalonia.Base/Animation/KeyFrame.cs` | ソース | キーフレーム定義 |
| KeyFrames.cs | `src/Avalonia.Base/Animation/KeyFrames.cs` | ソース | キーフレームコレクション |
| Cue.cs | `src/Avalonia.Base/Animation/Cue.cs` | ソース | キューポイント |
| IAnimator.cs | `src/Avalonia.Base/Animation/IAnimator.cs` | ソース | アニメーターインターフェース |
| Easing.cs | `src/Avalonia.Base/Animation/Easings/Easing.cs` | ソース | イージング基底クラス |
| IClock.cs | `src/Avalonia.Base/Animation/IClock.cs` | ソース | クロックインターフェース |
| IterationCount.cs | `src/Avalonia.Base/Animation/IterationCount.cs` | ソース | 繰り返し回数 |
| PlaybackDirection.cs | `src/Avalonia.Base/Animation/PlaybackDirection.cs` | ソース | 再生方向列挙型 |
| FillMode.cs | `src/Avalonia.Base/Animation/FillMode.cs` | ソース | フィルモード列挙型 |
