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:
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.
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.
