一步一步学习使用FireMonkey动画（3） 使用Delphi的基本动画组件类

本课将介绍如何使用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 组件的行为：

几个关键的属性如下：

• 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属性，其属性设置如下：

/* by 01022.hk - online tools website : 01022.hk/zh/formatruby.html */
      AutoReverse = True
      Enabled = True
      Duration = 2
      Interpolation = Back
      Loop = True
      PropertyName = 'RotationAngle'
      StartValue = 0
      StopValue = 360

• 第二个案例是一个圆角的TRectangle控件，TFloatAnimation将使用Opacity属性，其属性设置如下：

/* by 01022.hk - online tools website : 01022.hk/zh/formatruby.html */
      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动画。