# 画面設計書 70-Custom Animator

## 概要

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

### 本画面の処理概要

本画面は、Avaloniaのアニメーションシステムをカスタム拡張する方法をデモンストレーションするページです。標準のアニメーターでは対応していないプロパティ型（この例ではstring型）に対して、独自の補間ロジックを実装したカスタムアニメーターを使用します。TextBlockのTextプロパティに対して、文字が一文字ずつ表示されるタイプライター効果を実現しています。

**業務上の目的・背景**：
Avaloniaの標準アニメーターは数値型、色、変換など一般的なプロパティ型をサポートしていますが、string型のような非数値型プロパティのアニメーションには対応していません。本デモページは、InterpolatingAnimatorを継承して独自の補間ロジックを実装する方法を開発者に示すことを目的としています。

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

**主要な操作・処理内容**：
1. カスタムアニメーターの適用：CustomStringAnimatorによる文字列アニメーション
2. タイプライター効果：空文字から"0123456789"まで一文字ずつ表示
3. 無限ループ再生：IterationCount="Infinite"で常時アニメーション

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 68 | Animation | 主機能 | カスタムアニメーターのデモ、独自アニメーション実装 |

## 画面種別

デモ / 表示

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| アニメーションテキスト | TextBlock | アニメーション | 空文字→"0123456789"へのタイプライター効果 |

## イベント仕様

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

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

- **トリガー**: 該当なし（常時）
- **対象コントロール**: TextBlock
- **処理内容**: IterationCount="Infinite"で無限ループ再生
- **アニメーション**:
  - Duration: 1秒
  - 開始値: 空文字("")
  - 終了値: "0123456789"
  - 補間: CustomStringAnimatorによる文字数の段階的増加

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

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

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

該当なし

## メッセージ仕様

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

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| 空文字列の場合 | 空文字を返却（CustomStringAnimator.Interpolate内で処理） |

## 備考

- CustomStringAnimatorはInterpolatingAnimator<string>を継承しています
- Interpolateメソッドで進捗率（0〜1）に基づいて表示する文字数を計算します
- progress / step で現在表示すべき文字のインデックスを決定
- Animation.Animator添付プロパティでカスタムアニメーターを指定します
- 各KeyFrameに個別にアニメーターを指定する必要があります

---

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

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

### 推奨読解順序

#### Step 1: カスタムアニメーターを理解する

CustomStringAnimatorの実装を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CustomStringAnimator.cs | `samples/RenderDemo/Pages/CustomStringAnimator.cs` | InterpolatingAnimator<string>の継承（7行目） |
| 1-2 | CustomStringAnimator.cs | `samples/RenderDemo/Pages/CustomStringAnimator.cs` | Interpolateメソッドの実装（9-15行目） |

**読解のコツ**: InterpolatingAnimatorを継承し、Interpolateメソッドをオーバーライドすることでカスタム補間ロジックを実装します。progressは0から1までの値で、アニメーションの進行度を表します。

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

XAMLでのカスタムアニメーター適用方法を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CustomAnimatorPage.xaml | `samples/RenderDemo/Pages/CustomAnimatorPage.xaml` | Animation.Animator添付プロパティ（15-17, 21-23行目） |

**主要処理フロー**:
1. **12行目**: Animation Duration="0:0:1" IterationCount="Infinite"
2. **13-18行目**: KeyFrame Cue="0%" - 開始キーフレーム
3. **14-17行目**: Setter Property="Text" Value="" + Animation.Animator
4. **19-24行目**: KeyFrame Cue="100%" - 終了キーフレーム
5. **21-23行目**: Animation.Animator内にCustomStringAnimatorを指定

#### Step 3: 補間ロジックの詳細を理解する

文字列補間の計算方法を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CustomStringAnimator.cs | `samples/RenderDemo/Pages/CustomStringAnimator.cs` | step計算と文字切り出し（11-14行目） |

**主要処理フロー**:
- **11行目**: `if (newValue.Length == 0) return "";` - 空文字ガード
- **12行目**: `var step = 1.0 / newValue.Length;` - 1文字あたりの進行率
- **13行目**: `var length = (int)(progress / step);` - 現在の文字数
- **14行目**: `var result = newValue.Substring(0, length + 1);` - 表示文字列切り出し

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

```
CustomAnimatorPage (UserControl)
    │
    └─ TextBlock
           │
           └─ TextBlock.Styles
                  │
                  └─ Style Selector="TextBlock"
                         │
                         └─ Style.Animations
                                │
                                └─ Animation
                                       ├─ Duration="0:0:1"
                                       ├─ IterationCount="Infinite"
                                       │
                                       ├─ KeyFrame Cue="0%"
                                       │      ├─ Setter Property="Text" Value=""
                                       │      └─ Animation.Animator
                                       │             └─ CustomStringAnimator
                                       │
                                       └─ KeyFrame Cue="100%"
                                              ├─ Setter Property="Text" Value="0123456789"
                                              └─ Animation.Animator
                                                     └─ CustomStringAnimator
```

### データフロー図

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

Animation開始 ───────────────▶ progress (0.0 → 1.0) ────────────▶ フレームごとに更新
                                      │
                                      ▼
                               CustomStringAnimator.Interpolate()
                                      │
                                      ├─ oldValue = ""
                                      ├─ newValue = "0123456789"
                                      ├─ step = 1.0 / 10 = 0.1
                                      │
                                      ├─ progress = 0.05 → length = 0 → "0"
                                      ├─ progress = 0.15 → length = 1 → "01"
                                      ├─ progress = 0.25 → length = 2 → "012"
                                      │ ...
                                      └─ progress = 0.95 → length = 9 → "0123456789"
                                      │
                                      ▼
                               TextBlock.Text更新 ──────────────▶ タイプライター効果
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CustomAnimatorPage.xaml | `samples/RenderDemo/Pages/CustomAnimatorPage.xaml` | XAML | アニメーション定義、UI配置 |
| CustomAnimatorPage.xaml.cs | `samples/RenderDemo/Pages/CustomAnimatorPage.xaml.cs` | ソース | コードビハインド（最小限） |
| CustomStringAnimator.cs | `samples/RenderDemo/Pages/CustomStringAnimator.cs` | ソース | カスタムアニメーター実装 |
| InterpolatingAnimator.cs | `src/Avalonia.Base/Animation/Animators/InterpolatingAnimator.cs` | ソース | 基底クラス |
| Animation.cs | `src/Avalonia.Base/Animation/Animation.cs` | ソース | Animationクラス定義 |
| KeyFrame.cs | `src/Avalonia.Base/Animation/KeyFrame.cs` | ソース | KeyFrameクラス定義 |
