Make a Form show with a Slide Transition

Question

For my application, When showing new forms, I would like for there to be a transition slide when they appear somewhat similar to how Tab items can appear with slide transitions - well, actually in the same manner.

I am unable to find any troubleshooting or examples surrounding the specific matter. The only work around I can think of is just using a tab control for all three forms and placing them within the tab control.

I have also tried Form.animateFloatWait() function as one would normally do with controls on forms, but to no avail.

How do I get my forms to slide in view?

Answer 1

With RAD Studio XE5, either Delphi or C++ Builder, the form is fullScreen displayed.

Therefore, if we need to make some effect with slide transition, we need to use TPanel for perfect performance:

1. Add an TPanel, make it as fullsize, and do not use align to do so. We need to initalize the position and size of TPanel in FormCreate method.

2. Create second TPanel for the form, not let second TPanel be child of first TPanel. Initialize the position and size of the second TPanel, make sure it is placed in the right side of screen.

FormCreate method:

procedure TFormMainView.FormCreate(Sender: TObject);
var
 newLocation : TPosition;
begin
  newLocation := self.btnLogin.Position;
  newLocation.X := screen.Size.Width - self.btnLogin.Width - 5;
  self.btnLogin.Position := newLocation;

  self.PanelMainView.Position.X := 0;
  self.PanelMainView.Position.Y := 0;
  self.PanelMainView.Width := screen.Size.Width;
  self.PanelMainView.Height := screen.Size.Height;

  self.PanelLogin.Position.X := screen.Size.Width;
  self.PanelLogin.Position.Y := 0;
  self.PanelLogin.Width := screen.Size.Width;
  self.PanelLogin.Height := screen.Size.Height;
end;

With Screen.Size, we can make sure the TPanel can fit various size of device, say, Android Phones. And set a button on first and second view, to toggle the slide animation (button on 1st Panel to toggle the animation to slide to left, and button on 2nd Panel to toggle the animation to slide to right.)

Let's name the button on 1st Panel as btnLogin, so the method to handle the btnLoginClick event is: ATTENTION: FloatAnimation1 is for 2nd Panel, FloatAnimation2 is for 1st Panel, and the "Property Name" of both TFloatAnimation is "Position.X", this will make the animation on the X axis:

procedure TFormMainView.btnLoginClick(Sender: TObject);
begin
   self.FloatAnimation2.StartValue := 0;
   self.FloatAnimation2.StopValue := -1 * screen.Size.Width;

   self.FloatAnimation1.StartValue := screen.Size.Width;
   self.FloatAnimation1.StopValue := 0;

   self.FloatAnimation2.start;
   self.FloatAnimation1.Start;
end;

The button of 2nd Panel named "btnBacktoMainView", and the event handler is:

procedure TFormMainView.btnBackToMainScreenClick(Sender: TObject);
begin
   self.FloatAnimation1.StartValue := self.PanelLogin.Position.X;
   self.FloatAnimation1.StopValue := self.PanelLogin.Position.X + self.PanelLogin.Width;

   self.FloatAnimation2.StartValue := self.PanelMainView.Position.X;
   self.FloatAnimation2.StopValue := self.PanelMainView.Position.X + self.PanelMainView.Width;

   self.FloatAnimation1.Start;
   self.FloatAnimation2.Start;
end;

See? what we did is to set the "statValue", "StopValue" of animation object, and invoke the start method, the Panel slide so great.

Maybe this way is not the best way to make view transition, but it works, and perform perfect. I used to use similar way to handle more than one view in Win32 application in this 10 years, and the effect is good.

The only difference is that I have to use TTimer and Application.ProcessMessage to make sure the animation in Win32 work. (Form project, of course).

And I tested this way in XE5 for either iOS or Android, and work in either platform. Share with everybody.