Animating rectangle position in code using fmx

[xorpas 4]

hello

I want to move a rectangle using animate option need when mouse enter rectangle is move to a specific position  and when mouse leave return to a first position , I have 2 rectangle one is a child I use this code when mouse enter a rectangle is move to top but when mouse leave the rectagle fix in their  new place

code

procedure TForm2.Rectangle1MouseEnter(Sender: TObject);
begin
  Rectangle2.AnimateFloat('Position.y', 1.0, 5, TAnimationType.InOut,
    TInterpolationType.Linear);
  Rectangle2.Position.y := Rectangle2.Height + 52;

end;

procedure TForm2.Rectangle1MouseLeave(Sender: TObject);
begin
  Rectangle2.AnimateFloat('Position.y', 1.0, 5, TAnimationType.InOut,
    TInterpolationType.Linear);
  Rectangle2.Position.y := 52;
end;

 

how can do it ?

[programmerdelphi2k 237]

 

implementation

{$R *.fmx}

var
  LImComingOrGoing: boolean = true;

procedure TForm1.FormCreate(Sender: TObject);
begin
  FloatAnimation1.StartValue := Rectangle2.Position.Y;
  FloatAnimation1.StopValue  := (Rectangle2.Position.Y - 100);
  //
  FloatAnimation1.Trigger        := 'IsMouseOver=True';
  FloatAnimation1.TriggerInverse := 'IsMouseOver=False';
  FloatAnimation1.PropertyName   := 'Position.Y';
  //
  FloatAnimation1.Duration    := 0.5;
  FloatAnimation1.AutoReverse := false;
  //
  FloatAnimation1.StartValue := Rectangle2.Position.Y;
  FloatAnimation1.StopValue  := (FloatAnimation1.StartValue - 100);
end;

procedure TForm1.FloatAnimation1Finish(Sender: TObject);
begin
  FloatAnimation1.Stop;
  //
  if LImComingOrGoing then
    begin
      FloatAnimation1.StartValue := Rectangle2.Position.Y;
      FloatAnimation1.StopValue  := (FloatAnimation1.StartValue - 100);
    end
  else begin
      FloatAnimation1.StartValue := Rectangle2.Position.Y;
      FloatAnimation1.StopValue  := (FloatAnimation1.StartValue + 100);
    end;
  //
  LImComingOrGoing := not LImComingOrGoing;
end;

 

Edited January 19, 2023 by programmerdelphi2k

[xorpas 4]

Thank's for replay  but not what i need please see my project hier

 

 

project.rar

[Lajos Juhász 293]

When the user moves outside the rect you want to move the rectangle to the first position thus the AnimateFloat should be corrected:

 

procedure TForm2.Rectangle2MouseLeave(Sender: TObject);
begin
   Rectangle2.AnimateFloat('Position.y', 222.0, 5, TAnimationType.InOut,
    TInterpolationType.Linear);
//  Rectangle2.Position.y := (Rectangle1.Position.Y + 200);
end;

Now you can easily see the real problem. As the rectangle is moved the mouse will get outside the rectangle and that will trigger the mouse leave event. To solve this you can change the height of the rectangle to 300.

[xorpas 4]

not work as i want see this gif 

 

 

i want it like this one hier

 

 

 

[programmerdelphi2k 237]

• Rectangle2 into Rectangle1 or any other.... Rectangle2.Align = BOTTOM!
• LStart = Height or any other value!

{$R *.fmx}

var
  LStart : single;
  LStop  : single;
  LImInUp: boolean = false;

  // note: moving the mouse very fast, you will get a kind of "flicker"

procedure TForm1.FormCreate(Sender: TObject);
begin
  FloatAnimation1.PropertyName := 'Height';
  FloatAnimation1.Duration     := 0.3;
  FloatAnimation1.AutoReverse  := false;
  //
  LStart := Rectangle2.Height;
  LStop  := LStart + 100;
  //
  Rectangle2.ClipChildren := true;
end;

procedure TForm1.Rectangle2MouseEnter(Sender: TObject);
begin
  if not LImInUp then
    begin
      FloatAnimation1.Stop;
      FloatAnimation1.StartValue := LStart;
      FloatAnimation1.StopValue  := LStop;
      FloatAnimation1.Start;
      LImInUp := true;
    end;
end;

procedure TForm1.Rectangle2MouseLeave(Sender: TObject);
begin
  if LImInUp then
    begin
      FloatAnimation1.Stop;
      FloatAnimation1.StartValue := LStop;
      FloatAnimation1.StopValue  := LStart;
      FloatAnimation1.Start;
      LImInUp := false;
      caption := 'leavin...' + timetostr(now)
    end;
end;

Edited January 19, 2023 by programmerdelphi2k

[xorpas 4]

Thank you and I am sorry for that, The two rectangle is in form2 and when I add from the form1 i add just a rectangle 1 and two without form2 Like a first project  added I create  a form on vertscrollbox like this

 

procedure Tbox.Fillbox(Name: string);
var
  fm: TForm2;

begin

  fm := TForm2.Create(self);
  fm.Rectangle1.Position.X := fm.Rectangle1.Height + 1;
  fm.text1.Text := name;

  self.AddObject(fm.Rectangle1);


end;

 

 

Edited January 19, 2023 by xorpas

[programmerdelphi2k 237]

Rectangle2.ClipChildren := True; --> for dont show any control into Rect2 in area > rect2.height

------

RectangleXXX.OnMoveEnter = myOnMoveEnter;

RectangleXXX.OnMoveLeave = myOnMoveLeave;

 

note: any other control-on-focus into "Rectangle2" do the rectangle2-lost-focus = OnMouseLeave!!!

• xx.HitTest = False  = dont receive the focus mouse!

Edited January 19, 2023 by programmerdelphi2k

[xorpas 4]

???!!!

Rectangle2.ClipChildren is equal  True

rectangle1 is inside rectangle2

text1  hittest is false and locked is true

 

Please see my project and modify it 

 

[xorpas 4]

I resolve it by using athread and loop if this is a good then animate ?

Edited January 19, 2023 by xorpas

[programmerdelphi2k 237]

hi @xorpas well, if you ok for you, then, it's ok!

 

try my new sample:

• uMyFrameWithRectangle with your Frame and your rectangles or any others
• the "Rectangle2" is just of show "green color", not needs it!!!

type
  TMyFrameRectangle = class(TFrame)
    MyRectangleToMove: TRectangle;
    FloatAnimation1: TFloatAnimation;
    Rectangle2: TRectangle;
  private
    { Private declarations }
  public
    constructor Create(AOwner: TComponent); override;
  end;

implementation

{$R *.fmx}

constructor TMyFrameRectangle.Create(AOwner: TComponent);
begin
  inherited;
  //
  FloatAnimation1.Enabled        := false;
  FloatAnimation1.AutoReverse    := false;
  FloatAnimation1.PropertyName   := 'Height';
  FloatAnimation1.Duration       := 0.5;
  FloatAnimation1.Trigger        := 'IsMouseOver=true';
  FloatAnimation1.TriggerInverse := 'IsMouseOver=false';
  //
  FloatAnimation1.StartValue := MyRectangleToMove.Height;
  FloatAnimation1.StopValue  := FloatAnimation1.StartValue + (FloatAnimation1.StartValue * 1.4); // +140%
end;

 

var
  Form1: TForm1;

implementation

{$R *.fmx}

uses
  uMyFrameWithRectangle;

procedure TForm1.Button1Click(Sender: TObject);
var
  MyFrameRectangle: TMyFrameRectangle;
begin
  for var i: integer := 1 to 5 do
    begin
      MyFrameRectangle := TMyFrameRectangle.Create(nil);
      //
      VertScrollBox1.AddObject(MyFrameRectangle);
    end;
end;

initialization

ReportMemoryLeaksOnShutdown := true;

end.

 

            

Edited January 20, 2023 by programmerdelphi2k