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 TBitmapAnimationCreate New TBitmapListAnimation//Color 屬性:Create New TColorAnimationCreate New TColorKeyAnimation//Gradient 屬性:Create New TGradientAnimation//Width、Height、X、Y、StrokeThickness、XRadius、YRadius、Opacity、RotationAngle 等屬性:Create New TFloatAnimationCreate 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 := 0;  //起點角度  FloatAnimation1.StopValue := 360; //終點角度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 := 0;    StopValue := 360;  end;end;