在开始研究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添加如下的事件处理代码,来快速实现动画效果。
Pascal
// 功能:改变一个矩形的透明度,实现淡入淡出效果。
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组件所在的单元。
接下来为按钮事件添加如下的事件处理代码:
Pascal
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显示滚动条,代码如下所示:
Pascal
procedure TFormMain.CheckBox1Change(Sender: TObject);
begin
if CheckBox1.IsChecked = True then
VertScrollBoxClient.ShowScrollBars := CheckBox1.IsChecked
else
VertScrollBoxClient.ShowScrollBars := CheckBox1.IsChecked;
end;
3.TAnimator与其他的动画组件的区别在哪里?
-
TAnimator像一个临时工,你叫他来完成一个一次性任务(动画),他干完活就走,不留痕迹。特点是简单、快捷、无需管理。
-
TAnimation 组件像一个正式员工,你需要雇佣(创建)他,给他安排详细的岗位职责(配置属性),并且要管理他的去留(生命周期)。特点是功能强大、可配置性高、需手动管理。
- 当在如下情形时,选择TAnimator:
-
动画很简单,只是一次性的属性变化。
-
你不想在设计中拖放太多组件。
-
你想保持代码的简洁性,避免管理动画对象的麻烦。
-
动画是动态触发的,且参数可能每次都不一样。
- 当在如下情形时,选择 TAnimation 组件:
-
动画是UI设计的重要组成部分,需要在设计时就预览效果。
-
动画需要循环播放、自动反转、或者与其他动画串联。
-
你需要精确控制动画的起始值、结束值。
-
你需要在动画完成时执行特定的代码(使用 OnFinish 事件)。
-
同一个动画会被多次重复使用。
TAnimator提供了如下的方法:
- AnimateFloat 方法会随时间通过特定的插值方式动画化浮点数属性值。
- AnimateFloatDelay 方法与 AnimateFloat 方法类似,但它会在开始过程前添加一个初始延迟。
- AnimateInt 方法会随时间通过特定的插值方式动画化整数的数值属性值。
- AnimateColor 方法会随时间对颜色属性值进行动画处理,并使用特定的插值方式。
- AnimateFloatWait 方法与 AnimateFloat 方法类似,但它是同步执行的(方法调用只有在动画过程结束后才会返回)。
- AnimateIntWait 方法与 AnimateInt 方法类似,但它是同步执行的(方法调用只有在动画过程结束后才会返回)。
总结
虽然TAnimator非常简洁,但它封装了创建、配置、启动和销毁动画对象的全部细节,只给你留下一个最简单的接口。所以其实满足很多场景需求。
TAnimation组件适合于创建较为复杂的动画效果,就比如在《一步一步学习使用FireMonkey动画(1)》中的案例,你可以在多个动画组件之间进行协调显示,这是TAnimator无法实现的。