FMXTimerAnimation (Delphi)

From RAD Studio Code Examples
Jump to: navigation, search

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.

TTimer 1.JPG

After writing one of the following code pieces and running the project, the image moves on a diamond-shaped path around the button.

TTimer 2.JPG

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

See Also