一步一步学习使用FireMonkey动画（2）使用TAnimator类创建动画

最新推荐文章于 2025-11-06 13:57:05 发布

转载最新推荐文章于 2025-11-06 13:57:05 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/lincats/p/19054370

文章标签：

#it

在开始研究FireMonkey提供的动画组件前，回顾一下多数时候，只是想给控件加一些突出的提醒或点缀，所以无须真的添加一个动画组件。FMX（FireMonkey的简称）提供了一系列便利的操作。

本节将介绍：

使用TFmxObject的动画函数。
使用TAnimator对象快速创建动画。
TAnimator与其他的TAnimation动画组件的区别。

1. 使用FmxObject创建动画。

TFmxObject是位于TComponent和TControl类之间的一个提供组件呈现的中间类，这是将控件的视觉部分与行为部分进行分离的一个中间类。

TFmxObject 是 FireMonkey (FMX) 框架中几乎所有可视和非可视组件的基类。它不负责具体的渲染（那是 TControl 及其子类的工作），而是提供了构建整个 FMX 应用程序对象模型所需的核心基础功能。

本图来自《Delphi GUI Programming with FireMonkey》

1. 打开Delphi 12.3，在窗体上放一个TRectangle控件和2个Button,表单布局如下图：

2. 分别为按钮1和按钮2添加如下的事件处理代码，来快速实现动画效果。

/* by yours.tools - online tools website : yours.tools/zh/chameta.html */
// 功能：改变一个矩形的透明度，实现淡入淡出效果。
procedure TFormMain.Button1Click(Sender: TObject);
begin
  // 直接调用 Rectangle1 对象的 AnimateFloat 方法（内部实际调用TAnimator.AnimateFloat 类似）
  // 参数1 ('Opacity'): 要动画化的属性名称，这里是透明度属性（0为完全透明，1为完全不透明）
  // 参数2 (0.5): 动画的最终目标值，将透明度变化至 0.5（半透明）
  // 参数3 (2): 动画的持续时间，单位为秒，即动画在 2 秒内缓慢完成
  // 参数4 (TAnimationType.InOut): 动画曲线。InOut 表示动画开始和结束时都较缓慢，中间较快
  // 参数5 (TInterpolationType.Linear): 插值类型。线性插值，变化均匀
  Rectangle1.AnimateFloat('Opacity', 0.5, 2, TAnimationType.InOut,
    TInterpolationType.Linear);
end;

// 功能：改变一个矩形的填充颜色。
procedure TFormMain.Button2Click(Sender: TObject);
begin
  // 调用 Rectangle1 对象的 AnimateColor 方法，专门用于对颜色属性进行动画处理
  // 参数1 ('Fill.Color'): 要动画化的属性名称，这里是填充色的颜色属性
  // 参数2 ($FF0003F3): 动画的最终目标颜色值。这是一个十六进制的 TAlphaColor 值。
  //                    $FF 表示完全不透明（Alpha通道）
  //                    $0003F3 表示 RGB 颜色分量，此代码为一种蓝色
  // 参数3 (2): 动画的持续时间，2秒
  // 参数4 (TAnimationType.InOut): InOut 动画曲线
  // 参数5 (TInterpolationType.Linear): 线性插值，颜色会均匀过渡
  Rectangle1.AnimateColor('Fill.Color', $FF0003F3, 2, TAnimationType.InOut,
    TInterpolationType.Linear);
end;

运行效果如下所示：

AnimateFloat和AnimateColor分别对Trectangle的属性Opacity和Fill.Color设置了新的会睛，Duration指示动画的持续时间为2秒，最后指定了动画曲线和插值算法，在稍后的内容中会介绍。

如果查看这2个方法的定义，可以看到最终还是调用了TAnimator的相应的类方法：

在方法定义部分，可以看到Delphi建议使用TAnimator来替代使用这里的方法，接下来将使用TAnimator来创建折叠动画。

2. 使用TAnimator创建折叠动画。

3. 在主窗体上放一个新的TLayout控件，使其align为left，然后在里边分别放一个TRectangle、TVertScrollBox，几个TLabel组件，以及相应的按钮。Structure和表单结构如下图。

注意：需要为TRectangle容器指定Hight为250，接下来编程时会进行控制。

首先在代码中的uses区中添加“FMX.Ani”,这是TAnimation和TAnimator组件所在的单元。

接下来为按钮事件添加如下的事件处理代码：

/* by yours.tools - online tools website : yours.tools/zh/chameta.html */
procedure TFormMain.BtnActionClick(Sender: TObject);
begin
  // 使用 if 语句判断名为 RctAnimate 的矩形控件的当前高度是否等于 250 像素
  // 这个值代表矩形的"展开"状态高度
  if RctAnimate.Height = 250 then
  begin
    // 如果当前是展开状态（高度为250），则执行折叠动画

    // 使用 FireMonkey 的 TAnimator 类来创建并执行一个浮点属性动画
    // 参数1 (RctAnimate): 指定要应用动画的目标对象，这里是 RctAnimate 矩形
    // 参数2 ('Height'): 指定要动画化的属性名称，这里是高度属性
    // 参数3 (100): 动画的结束值，将高度动画变化到 100 像素（折叠状态）
    // 参数4 (0.8): 动画的持续时间，单位为秒，表示动画将在 0.8 秒内完成
    // 参数5 (TAnimationType.&In): 动画的缓动效果类型。&In 表示动画开始时较慢，然后加速
    //      (& 符号是必需的，因为 'In' 是 Delphi 的保留关键字)
    // 参数6 (TInterpolationType.Linear): 插值类型。Linear 表示线性插值，即数值均匀变化
    TAnimator.AnimateFloat(RctAnimate, 'Height', 100, 0.8,
                          TAnimationType.&In, TInterpolationType.Linear);

    // 动画开始后，同时更新按钮的显示文本为"展开"
    // 这为用户提供了视觉反馈，表明下次点击此按钮将会执行展开操作
    BtnAction.Text := '展开';
  end
  else // 如果 RctAnimate 的高度不等于 250 像素（即当前处于折叠或其他状态）
  begin
    // 执行展开动画，将矩形的高度从当前值动画变化到 250 像素

    // 使用相同的 TAnimator.AnimateFloat 方法，但目标值改为 250
    TAnimator.AnimateFloat(RctAnimate, 'Height', 250, 0.8,
                          TAnimationType.&In, TInterpolationType.Linear);

    // 将按钮的文本更新为"折叠"，提示用户下次点击将会折叠矩形
    BtnAction.Text := '折叠';
  end;
end;

运行效果如下所示：

可以看到简单几行代码应实现了动画的折叠效果。

Show Scroll Bar复选框用来确定是否为TVertScrollBox显示滚动条，代码如下所示：


procedure TFormMain.CheckBox1Change(Sender: TObject);
begin
  if CheckBox1.IsChecked = True then
    VertScrollBoxClient.ShowScrollBars := CheckBox1.IsChecked
  else
    VertScrollBoxClient.ShowScrollBars := CheckBox1.IsChecked;
end;