Create simple transition in form ?!?

[majid.ebru]

hi

i am new in Lazarus and i don't anything about  Graphic or open-lg or direct X or ....

i want to create simple  Login Transition in my program.

can help or guide me to create it??

like this : ( i need very simple transition )

[Handoko]

Give me some minutes or maybe hours, I'll take this challenge.

[Thaddy]

Code: Pascal  [Select][+][-]

1. procedure TForm1.Timer1Timer(Sender: TObject);
2. {$push}{$rangechecks off}
3. begin
4.   // timer interval set to 10.
5.   form1.color := Form1.color + 257;
6.   Application.ProcessMessages;
7. end;
8. {$pop}
9. end.

Same can be done with e.g. TImageList;

[majid.ebru]

Thank you

but my mind is something like Panel or image moves up or down or like this it  has many effect 

[Handoko]

That glSlideshow uses a lot of hard to understand calculations and hard to learn OpenGL graphics library. It may be fun to have a look at but not so fun to program it.

Here is the simplify and easy to understand animation:

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   SysUtils, Forms, Dialogs, StdCtrls, ExtCtrls;
9.  
10. type
11.  
12.   { TForm1 }
13.  
14.   TForm1 = class(TForm)
15.     btnLogin: TButton;
16.     lblInformation: TLabel;
17.     lbeName: TLabeledEdit;
18.     lbePassword: TLabeledEdit;
19.     lblLogin: TLabel;
20.     lblInfo: TLabel;
21.     pnlLogin: TPanel;
22.     procedure btnLoginClick(Sender: TObject);
23.     procedure lblInfoClick(Sender: TObject);
24.     procedure lblLoginClick(Sender: TObject);
25.   private
26.     { private declarations }
27.   public
28.     { public declarations }
29.   end;
30.  
31. var
32.   Form1: TForm1;
33.  
34. implementation
35.  
36. const
37.   UserName = 'hello';
38.   Password = 'pascal';
39.  
40. {$R *.lfm}
41.  
42. { TForm1 }
43.  
44. procedure TForm1.lblLoginClick(Sender: TObject);
45. var
46.   OriginalPosX: Integer;
47.   OriginalPosY: Integer;
48.   i:            Integer;
49. begin
50.   // Hide the information
51.   if lblInformation.Visible then
52.   begin
53.     OriginalPosX := lblInformation.Left;
54.     for i := lblInformation.Left to Form1.Width do
55.     begin
56.       lblInformation.Left := i;
57.       Application.ProcessMessages;
58.       Sleep(2);
59.     end;
60.     lblInformation.Visible := False;
61.     lblInformation.Left    := OriginalPosX;
62.   end;
63.   // Show the login box
64.   OriginalPosY     := pnlLogin.Top;
65.   pnlLogin.Top     := Form1.Height;
66.   pnlLogin.Visible := True;
67.   for i := pnlLogin.Top downto OriginalPosY do
68.   begin
69.     pnlLogin.Top := i;
70.     Application.ProcessMessages;
71.     Sleep(2);
72.   end;
73. end;
74.  
75. procedure TForm1.lblInfoClick(Sender: TObject);
76. var
77.   OriginalPosY, i: Integer;
78. begin
79.   // Hide the login box
80.   if pnlLogin.Visible then
81.   begin
82.     OriginalPosY := pnlLogin.Top;
83.     for i := pnlLogin.Top to Form1.Height do
84.     begin
85.       pnlLogin.Top := i;
86.       Application.ProcessMessages;
87.       Sleep(2);
88.     end;
89.     pnlLogin.Visible := False;
90.     pnlLogin.Top     := OriginalPosY;
91.   end;
92.   // Show the information
93.   OriginalPosY           := lblInformation.Top;
94.   lblInformation.Top     := -10;
95.   lblInformation.Visible := True;
96.   for i := lblInformation.Top to OriginalPosY do
97.   begin
98.     lblInformation.Top := i;
99.     Application.ProcessMessages;
100.     Sleep(2);
101.   end;
102. end;
103.  
104. procedure TForm1.btnLoginClick(Sender: TObject);
105. var
106.   OriginalPosX: Integer;
107.   OriginalPosY: Integer;
108.   i:            Integer;
109. begin
110.   // Wrong answer
111.   if (lbeName.Text <> UserName) or (lbePassword.Text <> Password) then
112.   begin
113.     OriginalPosX := pnlLogin.Left;
114.     OriginalPosY := pnlLogin.Top;
115.     for i := 1 to 10 do begin
116.       pnlLogin.Top  := OriginalPosY + Random(20)-10;
117.       pnlLogin.Left := OriginalPosX + Random(20)-10;
118.       Application.ProcessMessages;
119.       Sleep(30);
120.     end;
121.     pnlLogin.Top  := OriginalPosY;
122.     pnlLogin.Left := OriginalPosX;
123.     Exit;
124.   end;
125.   // Correct answer
126.   ShowMessage('Welcome');
127.   Close;
128. end;
129.  
130. end.

[majid.ebru]

@Thaddy
@Handoko

thank-you

but your sample are very very simple ( i apologize) , i know a little about  animation and i know that i can create animation with  change top  or bottom or left or right element.

but this animation(change left top right bottom) is not good and it is Non-uniform.

i want to have a good animation .

@Handoko
i love this your code :

Code: Pascal  [Select][+][-]

1.     for i := 1 to 10 do begin
2.       pnlLogin.Top  := OriginalPosY + Random(20)-10;
3.       pnlLogin.Left := OriginalPosX + Random(20)-10;
4.       Application.ProcessMessages;
5.       Sleep(30);
6.     end;

[Handoko]

What did you mean 'uniform'? Can you provide more info? Creating transition effects without using graphics library is hard. Because standard Lazarus visual components are not optimized for performance. I've just updated glSlideshow with many new transitions, you can learn the code.
http://forum.lazarus.freepascal.org/index.php/topic,35313.msg256719.html#msg256719

If you can show me transitions you want, I may be able to code them using only Lazarus default libraries.

[lainz]

Hi, I know this is old, but still relevant since searching 'lazarus transitions' leads to here.

I've made an animated panel here:
https://github.com/Arandusoft/fpcpaymowidget/blob/master/controls/animatedpanel.pas

How to use it is inside the FPC Paymo Widget code, sorry there is no manual on how to use it yet!

The kind of animation it does is an 'easing animation'

Code: Pascal  [Select][+][-]

1. function easeInOutQuad(t: double): double

Feel free to grab it and implement it in your own way, and you can also grab more animations here:
https://gist.github.com/gre/1650294

Also, I've made an animation with BGRABitmap, also with 'easings'
https://forum.lazarus.freepascal.org/index.php/topic,40719.0.html

Edit: Just to say, that the first post animated gif of this thread, is using an 'ease in out' animation, so nothing special with that.

[BeanzMaster]

Hi in GLScene you can find this unit on Easing functions : https://sourceforge.net/p/glscene/code/HEAD/tree/branches/GLSceneLCL/Source/GLAnimationUtils.pas 

[lainz]

Great. There is also another link here:
https://www.getlazarus.org/forums/viewtopic.php?t=39