Delphi XE2 之 FireMonkey 入门(12) - 动画(上)

在 HD 窗体上添加一个 TAniIndicator, 修改其 Enabled 属性为 True, 动画完成了.

这是最简单的动画相关的控件了, 只有两个值得注意的属性:

---

Enabled: Boolean;          //
Style: TAniIndicatorStyle; //TAniIndicatorStyle = (aiLinear, aiCircular);
 
{例}
AniIndicator1.Style := TAniIndicatorStyle.aiCircular;

---

它是怎么动起来的? 追源码, 发现它有一个 FAni: TFloatAnimation; 内部变量.
再就追出 TFloatAnimation 的父类 TAnimation; TAnimation 在 FMX.Types 单元, 看来是核心成员了.

TAnimation 的子类们都在 FMX.Ani 单元:

---

TFloatAnimation      //
TFloatKeyAnimation   //
TColorAnimation      //
TColorKeyAnimation   //
TGradientAnimation   //
TPathAnimation       //
TRectAnimation       //
TBitmapAnimation     //
TBitmapListAnimation //
TFloatKeyAnimation   //
TColorKeyAnimation   //

---

早在 TFmxObject(FMX 们的祖先)就有了一些动画相关的方法:

---

StartAnimation();            //
StopAnimation();             //
StartTriggerAnimation();     //
StartTriggerAnimationWait(); //
StopTriggerAnimation();      //
AnimateFloat();              //
AnimateColor();              //
AnimateFloatDelay();         //
AnimateFloatWait();          //
StopPropertyAnimation();     //

---

另在 FMX.Types 单元还有一些动画插入算法的一些公用函数(应该主要是内部使用):

---

InterpolateSingle();   //
InterpolateRotation(); //
InterpolateColor();    //
InterpolateLinear();   //
InterpolateSine();     //
InterpolateQuint();    //
InterpolateQuart();    //
InterpolateQuad();     //
InterpolateExpo();     //
InterpolateElastic();  //
InterpolateCubic();    //
InterpolateCirc();     //
InterpolateBounce();   //
InterpolateBack();     //

---

很多动画应该在设计时就可以方便完成, 在选择某些属性值时可直接添加动画, 如:

---

//Bitmap 属性:
Create New TBitmapAnimation
Create New TBitmapListAnimation
 
//Color 属性:
Create New TColorAnimation
Create New TColorKeyAnimation
 
//Gradient 属性:
Create New TGradientAnimation
 
//Width、Height、X、Y、StrokeThickness、XRadius、YRadius、Opacity、RotationAngle 等属性:
Create New TFloatAnimation
Create New TFloatKeyAnimation

---

先尝试一个让控件转起来的动画吧:

添加一个 TRectangle, 从其 RotationAngle 属性 Create New TFloatAnimation (需要删除时, 选定后按 Delete),

然后调整自动建立的 FloatAnimation1 的属性值:

---

//一般在设计时取值即可, 下面是运行时的代码:
procedure TForm1.FormCreate(Sender: TObject);
begin
  FloatAnimation1.Enabled := True;
  FloatAnimation1.Loop := True;
  FloatAnimation1.Duration := 2.5;  //一个动画周期的长度(秒)
  FloatAnimation1.StartValue := ;  //起点角度
  FloatAnimation1.StopValue := ; //终点角度
end;

---

在设计时制作上面动画的另一方法:

1、添加 TRectangle(Rectangle1);
2、选定 Rectangle1 后添加 TFloatAnimation(FloatAnimation1);
3、修改 FloatAnimation1 的属性 PropertyName 值为 RotationAngle;
4、如上设置 FloatAnimation1 的其它属性.

---

完全在运行时实现上面动画的代码:

---

uses FMX.Objects, FMX.Ani; //添加, 但不要重复添加
 
var
  rect: TRectangle;
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  rect := TRectangle.Create(Self);
  rect.Parent := Self;
  rect.Align := TAlignLayout.alCenter;
 
  with TFloatAnimation.Create(Self) do
  begin
    Parent := rect;
    PropertyName := 'RotationAngle';
    Enabled := True;
    Loop := True;
    Duration := 2.5;
    StartValue := ;
    StopValue := ;
  end;
end;

---