FMXTimerAnimation (C++)
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.
// C++
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.
// C++
void __fastcall TForm2::Button1Click(TObject *Sender) {
Timer1->Enabled = true;
}
// ---------------------------------------------------------------------------
void __fastcall TForm2::FormCreate(TObject *Sender) {
Timer1 = new TTimer(this);
Timer1->Interval = 100;
Timer1->OnTimer = Timer1Timer;
Timer1->Enabled = false;
}
// ---------------------------------------------------------------------------
void __fastcall TForm2::Timer1Timer(TObject *Sender) {
if (Image1->Position->X < 200 && Image1->Position->Y <= 200) {
Image1->Position->X += 10;
Image1->Position->Y -= 10;
}
else if (Image1->Position->X >= 200 && Image1->Position->Y < 200) {
Image1->Position->X += 10;
Image1->Position->Y += 10;
}
else if (Image1->Position->X > 200 && Image1->Position->Y >= 200) {
Image1->Position->X -= 10;
Image1->Position->Y += 10;
}
else {
Image1->Position->X -= 10;
Image1->Position->Y -= 10;
}
}
// ---------------------------------------------------------------------------
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.
// C++
void __fastcall TForm2::Button1Click(TObject *Sender){
if (!FloatAnimation1->Running){
FloatAnimation1->Start();
FloatAnimation2->Start();
}
}
//---------------------------------------------------------------------------
void __fastcall TForm2::FloatAnimation2Finish(TObject *Sender){
FloatAnimation3->Start();
}
//---------------------------------------------------------------------------
void __fastcall TForm2::FormCreate(TObject *Sender){
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";
FloatAnimation3->StartFromCurrent = true;
FloatAnimation3->StopValue = Image1->Position->Y + 200;
FloatAnimation3->Duration = 4;
FloatAnimation3->Loop = true;
FloatAnimation3->AutoReverse = true;
}
//---------------------------------------------------------------------------
Using TPathAnimation
Add FMX.Ani to the uses list.
// C++
void __fastcall TForm2::Button1Click(TObject *Sender) {
PathAnimation1->Start();
}
// ---------------------------------------------------------------------------
void __fastcall TForm2::FormCreate(TObject *Sender) {
PathAnimation1 = new TPathAnimation(this);
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;
}
// ---------------------------------------------------------------------------
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 )