Stories

Detail Return Return

一步一步學習使用FireMonkey動畫（3） 使用Delphi的基本動畫組件類 - Stories Detail

本課將介紹如何使用TAnimation的子類，比如TFloatAnimation、TColorAnimation來創建動畫。

本課的主要內容：

  1. 認識TAnimation的子類
  2. 使用TAnimation的動畫子類創建動畫。
  3. 使用TFloatKeyAnimation關鍵幀創建彈跳球動畫
  4. 使用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 組件的行為：

img

幾個關鍵的屬性如下：

  • 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則是指屬性值，允許添加多個關鍵幀值，如下圖所示：

img

2. TAnimation的子類使用示例

下面分別使用這些動畫類創建了一些效果，如下圖所示：

img

上圖中的上面第一行的在一個例子，均使用 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，關聯到填充顏色，其設置如下圖所示：

img

  • 第五個案例使用了TBitmapAnimation控件，它的PropertyName設置為TImage組件的Bitmap屬性。它的StartValue設置為原圖，StopValue設置為一個新的圖形。通過設置Trigger屬性為IsMouseOver=true表示在鼠標經過時動畫運行，會看到新的圖片。而TriggerInverse則指定停止動畫的事件，在設置該事件後，圖片會恢復為原圖，使用的表達式如下：IsMouseOver=false。
    設置如下圖所示：

img

  • 第六個案例使用了TGradientAnimation控件，必須將其Parent控件TRectange的Fill設置為Graident。它的StartValue和StopValue分別指定起始和結束的漸變色。

img

3.使用TFloatKeyAnimation關鍵幀動畫打造彈跳球

關鍵幀是指某個時間點的屬性變化，TFloatKeyAnimation可以添加多個關鍵幀，實現類似於簡單的彈跳球的效果。

在桌面上放一個TCircle控件，指定其Fill.Kind為Gradient，然後定義漸變效果實現一個類似小球的顯示特效。

img

在桌面上放一個按鈕，Text指定為“彈跳球動畫”，這個按鈕將用來啓動彈跳球。

img

從工具面板拖一個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;

運行效果如下：

img

下面是彈跳球的代碼實現：

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;

運行效果如下所示：

img

總結

本節首先介紹了TAnimation的幾個子類的動畫效果，接下來為常用的幾種類型進行了舉例説明。最後使用2個例子，介紹瞭如何創建彈跳球和背景過渡效果的關鍵幀動畫。

在下一節，將介紹TRectAnimation、TPathAnimation動畫以及TBitmapListAnimation動畫。

Delphi
Favorites

Add a new Comments

Some HTML is okay.