本課將介紹如何使用TAnimation的子類，比如TFloatAnimation、TColorAnimation來創建動畫。
本課的主要內容：
- 認識TAnimation的子類
- 使用TAnimation的動畫子類創建動畫。
- 使用TFloatKeyAnimation關鍵幀創建彈跳球動畫
- 使用TColorKeyAnimation關鍵幀動畫眩目背景變換
事實上多數動畫是通過在指定時間範圍（Duration）內操控目標控件的屬性來實現的，TAnimation對象具有一個TCustomPropertyAnimation子類，它是多數動畫控件的祖先。這個類在被分配給控件時，會通過Rtti反射的方式來獲取或設置控件的屬性。
1. 認識TAnimation子類
本質上,TCustomPropertyAnimation 類僅向 TAnimation 添加一個 PropertyName 屬性，並通過名稱實現目標屬性的查找（以支持點語法，同時用於引用對象和組件的子字段）。如果定義的名稱無效或無法解析，在 TAnimation 上調用 Start 方法將無效。進一步的子類（如 TFloatAnimation ）將使用引用的屬性在動畫運行時通過 RTTI 設置其值。
| 子類名稱 | 主要用途 | 關鍵特性/屬性 |
|---|---|---|
| TFloatAnimation | 用於對浮點數屬性（如寬度、高度、透明度、位置等）進行動畫處理。 | StartValue, StopValue, PropertyName |
| TColorAnimation | 用於對顏色屬性（如填充色、描邊色等）進行動畫處理。 | StartValue, StopValue, PropertyName |
| TGradientAnimation | 用於對漸變屬性進行動畫處理。 | StartValue, StopValue, PropertyName |
| TRectAnimation | 用於對與矩形邊界相關的屬性（如 Margins, Padding）進行動畫處理。 | StartValue, StopValue, PropertyName |
| TFloatKeyAnimation | 用於創建基於多個關鍵幀的浮點數屬性動畫，比 TFloatAnimation 只有起止兩個值更復雜。 | Keys (集合屬性，用於定義多個關鍵幀) |
| TColorKeyAnimation | 用於創建基於多個關鍵幀的顏色屬性動畫。 | Keys (集合屬性，用於定義多個關鍵幀) |
| TBitmapAnimation | 用於對位圖屬性進行動畫處理，通常實現兩張圖片之間的切換動畫。 | StartValue (起始位圖), StopValue (結束位圖), PropertyName (通常為 'Bitmap') |
| TBitmapListAnimation | 用於實現幀動畫，將一張包含多幀的圖片進行劃分並按順序播放。 | AnimationCount (動畫幀數), AnimationBitmap (源圖片) |
| TPathAnimation | 用於使對象沿一條預設的路徑運動。 | Path (路徑數據，使用 SVG Path 格式標準), Rotate (是否沿路徑旋轉) |
一般情況下，要為FMX對象添加動畫，只需從IDE的組件面板中選擇一個 TCustomPropertyAnimation 子類並將其添加到項目中。確保目標組件作為動畫組件的父級（通常通過Structure窗口完成此操作）。
通過這種方式，可以通過為動畫的PropertyName屬性提供的組件編輯器列出所有兼容的屬性。以下屏幕截圖展示了通過使用 TRectangle和 TFloatAnimation 組件的行為：
幾個關鍵的屬性如下：
- PropertyName：指定要動畫化的目標屬性名（如 'Opacity', 'Position.X', 'Fill.Color'）。23
- StartValue 和 StopValue：定義動畫的起始值和結束值
- Duration：設置動畫持續的秒數。
- Enabled：設置為 True 可在設計時預覽，或在運行時通過代碼 YourAnimation.Enabled := True 來啓動動畫，也可以利用 Trigger 和 TriggerInverse 屬性綁定一些條件（如 'IsMouseOver=true'）。
- Loop：是否重複動畫。
- AutoReverse：動畫結束後反向回放。
對於 TFloatKeyAnimation 和 TColorKeyAnimation，則通過 Keys 屬性設置關鍵幀,每一個屬性由Key和Value組成，Key取值範圍為0-1之間的時間範圍,Value則是指屬性值，允許添加多個關鍵幀值，如下圖所示：
2. TAnimation的子類使用示例
下面分別使用這些動畫類創建了一些效果，如下圖所示：
上圖中的上面第一行的在一個例子，均使用 TFloatAnimation控件對浮點類型的控件屬性進行了動畫。
- 第一個案例是一個TEllipse控件，TFloatAnimation將使用RotationAngle屬性，其屬性設置如下：
AutoReverse = True
Enabled = True
Duration = 2
Interpolation = Back
Loop = True
PropertyName = 'RotationAngle'
StartValue = 0
StopValue = 360
- 第二個案例是一個圓角的TRectangle控件，TFloatAnimation將使用Opacity屬性，其屬性設置如下：
AutoReverse = True
Enabled = True
Duration = 1
Loop = True
PropertyName = 'Opacity'
StartValue = 1
StopValue = 0.2
- 第三個案例是一個圓角的TRectangle控件，TFloatAnimation將使用Position.X屬性，其屬性設置如下：
AutoReverse = True
Enabled = True
Duration = 0.8
Loop = True
PropertyName = 'Position.X'
StartValue = 480
StopValue = 520
- 第四個案例使用TColorAnimation控件，它的PropertyName為Fill.Color，關聯到填充顏色，其設置如下圖所示：
- 第五個案例使用了TBitmapAnimation控件，它的PropertyName設置為TImage組件的Bitmap屬性。它的StartValue設置為原圖，StopValue設置為一個新的圖形。通過設置Trigger屬性為IsMouseOver=true表示在鼠標經過時動畫運行，會看到新的圖片。而TriggerInverse則指定停止動畫的事件，在設置該事件後，圖片會恢復為原圖，使用的表達式如下：IsMouseOver=false。
設置如下圖所示：
- 第六個案例使用了TGradientAnimation控件，必須將其Parent控件TRectange的Fill設置為Graident。它的StartValue和StopValue分別指定起始和結束的漸變色。
3.使用TFloatKeyAnimation關鍵幀動畫打造彈跳球
關鍵幀是指某個時間點的屬性變化，TFloatKeyAnimation可以添加多個關鍵幀，實現類似於簡單的彈跳球的效果。
在桌面上放一個TCircle控件，指定其Fill.Kind為Gradient，然後定義漸變效果實現一個類似小球的顯示特效。
在桌面上放一個按鈕，Text指定為“彈跳球動畫”，這個按鈕將用來啓動彈跳球。
從工具面板拖一個TFloatKeyAnimation到TCircle上面，在Structure面板上可以看到它成為TCircle的子項。
在Structure面板選中TFloatKeyAnimation組件，在屬性面板，指定Interpolation插值動畫屬性為Bounce，PropertyName為Position.Y，Duration為2。
單擊Keys，添加6個鍵值對，其值分別如下所示：
object FloatKeyAnimation1: TFloatKeyAnimation
Duration = 2
Interpolation = Bounce
Keys = <
item
Value = 50
end
item
Key = 0.3
Value = 350
end
item
Key = 0.5
Value = 200
end
item
Key = 0.7
Value = 300
end
item
Key = 0.9
Value = 250
end
item
Key = 1
Value = 300
end>
PropertyName = 'Position.Y'
StartFromCurrent = False
end
最後為按鈕添加如下的事件處理代碼：
procedure TForm1.Button1Click(Sender: TObject);
begin
FloatKeyAnimation1.Start; // 開始動畫
end;
運行效果如下：
下面是彈跳球的代碼實現：
procedure TForm1.Button2Click(Sender: TObject);
var
BounceAnimation: TFloatKeyAnimation;
KeyFrame: TFloatKey; // 聲明關鍵幀變量
begin
// 1. 創建動畫對象，Self 負責釋放
BounceAnimation := TFloatKeyAnimation.Create(Self);
// 2. 鏈接到目標控件
BounceAnimation.Parent := CircleBall; // 指定父級，建立關聯
// 3. 配置基本屬性
BounceAnimation.PropertyName := 'Position.Y'; // 動畫化Y座標
BounceAnimation.Duration := 2.0; // 動畫持續2秒
BounceAnimation.Loop := False; // 不循環
BounceAnimation.Interpolation:=TInterpolationType.Bounce; //彈跳插值
// 4. 清空並添加關鍵幀 (這是核心)
BounceAnimation.Keys.Clear; // 確保從空開始
// 添加關鍵幀: (Key, Value)
// 第0秒，Y座標在50（起始位置）
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.0;
KeyFrame.Value := 50;
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.3;
KeyFrame.Value := 350;
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.5;
KeyFrame.Value := 200;
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.7;
KeyFrame.Value := 300;
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.7;
KeyFrame.Value := 200;
KeyFrame := TFloatKey(BounceAnimation.Keys.Add);
KeyFrame.Key := 0.1;
KeyFrame.Value := 50;
// 5. 啓動動畫
BounceAnimation.Start;
end;
運行示例可以看到，通過代碼實現了同樣的彈跳效果。當然真實的應用中，可能小球會沿着一定的路徑進行運動，這就需要使用TPathAnimation動畫。
4.使用TColorKeyAnimation關鍵幀動畫眩目背景變換
添加一個新的按鈕，Text屬性指定為“背景顏色過渡”,在單擊事件處理代碼中，使用類似TFloatKeyAnimation類似的代碼模式創建背景顏色過渡效果。
代碼如下所示：
procedure TForm1.Button3Click(Sender: TObject);
var
BgAnim: TColorKeyAnimation;
Key: TColorKey;
begin
BgAnim := TColorKeyAnimation.Create(Self);
BgAnim.Parent := Self; // 動畫化窗體本身
BgAnim.PropertyName := 'Fill.Color'; // 如果窗體使用Fill
// 或者使用：BgAnim.PropertyName := 'Color'; // 對於傳統背景色
BgAnim.Duration := 10.0;
BgAnim.Loop := True;
Self.Fill.Kind:=TBrushKind.Solid; //指定背景色模式為實色
BgAnim.Keys.Clear;
// 清晨藍色
Key := TColorKey(BgAnim.Keys.Add);
Key.Key := 0.0;
Key.Value := TAlphaColors.Skyblue;
// 中午白色
Key := TColorKey(BgAnim.Keys.Add);
Key.Key := 0.3;
Key.Value := TAlphaColors.White;
// 傍晚橙色
Key := TColorKey(BgAnim.Keys.Add);
Key.Key := 0.6;
Key.Value := TAlphaColors.Orange;
// 夜晚深藍色
Key := TColorKey(BgAnim.Keys.Add);
Key.Key := 0.9;
Key.Value := TAlphaColors.Navy;
// 回到清晨藍色
Key := TColorKey(BgAnim.Keys.Add);
Key.Key := 1.0;
Key.Value := TAlphaColors.Skyblue;
BgAnim.Enabled := True;
BgAnim.Start;
end;
運行效果如下所示：
總結
本節首先介紹了TAnimation的幾個子類的動畫效果，接下來為常用的幾種類型進行了舉例説明。最後使用2個例子，介紹瞭如何創建彈跳球和背景過渡效果的關鍵幀動畫。
在下一節，將介紹TRectAnimation、TPathAnimation動畫以及TBitmapListAnimation動畫。
