FMXTimerAnimation (Delphi)
Contents
Description
The following examples show how to move an image on a form, using three different techniques. The first example uses a TTimer object. The last two projects use animations (TFloatAnimation and TPathAnimation, respectively). All three have the same result: when the user presses the button, the image moves in a diamond shape around the button.
To replicate this example, create a new multi-device application and place the following components on your form:
Use the Object Inspector to add a bitmap image to the Bitmap property of the TImage object, and to create event handlers for the OnCreate event of the TForm and the OnClick event of the TButton.
Include the following code in the Form.OnCreate event handler, or set these properties at design time, in the Object Inspector.
// Delphi
Form1.Width := 500;
Form1.Height := 500;
Form1.Caption := 'FMX Timer Animation';
Image1.Width := 100;
Image1.Height := 100;
Image1.Position.X := 0;
Image1.Position.Y := 200;
Button1.Position.X := 200;
Button1.Position.Y := 240;
Button1.Text := 'START';
The form should look like in the following image.
After writing one of the following code pieces and running the project, the image moves on a diamond-shaped path around the button.
Using TTimer
Add the Timer1 and the Timer1Timer declarations before using the code below.
// Delphi
procedure TForm1.Button1Click(Sender: TObject);
begin
Timer1.Enabled := True;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
Timer1 := TTimer.Create(Self);
Timer1.Interval := 100;
Timer1.OnTimer := Timer1Timer;
Timer1.Enabled := False;
end;
procedure TForm1.Timer1Timer(Sender: TObject);
begin
{ Move in diamond, clockwise }
with Image1.Position do
begin
{ Left to Top }
if (X < 200) and (Y <= 200) then
begin
X := X + 10;
Y := Y - 10;
end
{ Top to Right }
else if (X >= 200) and (Y < 200) then
begin
X := X + 10;
Y := Y + 10;
end
{ Right to Bottom }
else if (X > 200) and (Y >= 200) then
begin
X := X - 10;
Y := Y + 10;
end
{ Bottom to Left }
else
begin
X := X - 10;
Y := Y - 10;
end;
end;
end;
end.
Using TFloatAnimation
Use the Object Inspector to create three TFloatAnimation instances having the TImage as parent. Create a handler for the second animation's OnFinish event.
// Delphi
procedure TForm1.Button1Click(Sender: TObject);
begin
if not FloatAnimation1.Running then
begin
FloatAnimation1.Start;
FloatAnimation2.Start;
end;
end;
procedure TForm1.FloatAnimation2Finish(Sender: TObject);
begin
FloatAnimation3.Start;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
FloatAnimation1.PropertyName := 'Position.X';
FloatAnimation1.StartFromCurrent := True;
FloatAnimation1.StopValue := Image1.Position.X + 400;
FloatAnimation1.Duration := 4;
FloatAnimation1.Loop := True;
FloatAnimation1.AutoReverse := True;
FloatAnimation2.PropertyName := 'Position.Y';
FloatAnimation2.StartFromCurrent := True;
FloatAnimation2.StopValue := Image1.Position.Y - 200;
FloatAnimation2.Duration := 2;
FloatAnimation3.PropertyName := 'Position.Y';
FloatAnimation2.StartFromCurrent := True;
FloatAnimation3.StopValue := Image1.Position.Y + 200;
FloatAnimation3.Duration := 4;
FloatAnimation3.Loop := True;
FloatAnimation3.AutoReverse := True;
end;
end.
Using TPathAnimation
Add FMX.Ani to the uses list.
// Delphi
procedure TForm1.Button1Click(Sender: TObject);
begin
PathAnimation1.Start;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
PathAnimation1 := TPathAnimation.Create(Self);
PathAnimation1.Parent := Image1;
PathAnimation1.Path.MoveTo(PointF(0, 0));
PathAnimation1.Path.LineTo(PointF(200,-200));
PathAnimation1.Path.LineTo(PointF(400,0));
PathAnimation1.Path.LineTo(PointF(200,200));
PathAnimation1.Path.ClosePath;
PathAnimation1.Loop := True;
PathAnimation1.Duration := 8;
end;
end.
Uses
- FMX.Types.TTimer ( fr | de | ja )
- FMX.Types.TTimer.Create ( fr | de | ja )
- FMX.Types.TTimer.Enabled ( fr | de | ja )
- FMX.Types.TTimer.OnTimer ( fr | de | ja )
- FMX.Types.TTimer.Interval ( fr | de | ja )
- FMX.Objects.TImage ( fr | de | ja )
- FMX.Controls.TControl.Position ( fr | de | ja )
- FMX.Types.TPosition.X ( fr | de | ja )
- FMX.Types.TPosition.Y ( fr | de | ja )
- FMX.Forms.TCommonCustomForm.OnCreate ( fr | de | ja )
- FMX.Ani.TFloatAnimation ( fr | de | ja )
- FMX.Ani.TFloatAnimation.PropertyName ( fr | de | ja )
- FMX.Ani.TFloatAnimation.StartFromCurrent ( fr | de | ja )
- FMX.Ani.TFloatAnimation.StopValue ( fr | de | ja )
- FMX.Ani.TAnimation.Duration ( fr | de | ja )
- FMX.Ani.TAnimation.Loop ( fr | de | ja )
- FMX.Ani.TAnimation.AutoReverse ( fr | de | ja )
- FMX.Types.TFmxObject.Parent ( fr | de | ja )
- FMX.Controls.TPathAnimation ( fr | de | ja )
- FMX.Controls.TPathAnimation.Create ( fr | de | ja )
- FMX.Controls.TPathAnimation.Start ( fr | de | ja )
- FMX.Controls.TPathAnimation.Path ( fr | de | ja )
- FMX.Graphics.TPathData ( fr | de | ja )
- FMX.Graphics.TPathData.MoveTo ( fr | de | ja )
- FMX.Graphics.TPathData.LineTo ( fr | de | ja )
- FMX.Graphics.TPathData.ClosePath ( fr | de | ja )