Lazarus

Programming => Graphics and Multimedia => Graphics => Topic started by: majid.ebru on August 16, 2017, 01:15:42 pm

Title: Create simple transition in form ?!?
Post by: majid.ebru on August 16, 2017, 01:15:42 pm
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 )
Title: Re: Create simple transition in form ?!?
Post by: Handoko on August 16, 2017, 01:23:49 pm
Give me some minutes or maybe hours, I'll take this challenge.
Title: Re: Create simple transition in form ?!?
Post by: Thaddy on August 16, 2017, 01:25:37 pm
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;
Title: Re: Create simple transition in form ?!?
Post by: majid.ebru on August 16, 2017, 01:45:08 pm
Thank you

but my mind is something like Panel or image moves up or down or like this (http://forum.lazarus.freepascal.org/index.php/topic,35313.msg249731.html#msg249731) it  has many effect  :o :o
Title: Re: Create simple transition in form ?!?
Post by: Handoko on August 16, 2017, 02:30:08 pm
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.
Title: Re: Create simple transition in form ?!?
Post by: majid.ebru on August 16, 2017, 08:29:33 pm
@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;
Title: Re: Create simple transition in form ?!?
Post by: Handoko on August 18, 2017, 04:17:49 am
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.
Title: Re: Create simple transition in form ?!?
Post by: lainz on May 04, 2018, 02:07:09 am
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.
Title: Re: Create simple transition in form ?!?
Post by: BeanzMaster on May 04, 2018, 10:23:18 pm
Hi in GLScene you can find this unit on Easing functions : https://sourceforge.net/p/glscene/code/HEAD/tree/branches/GLSceneLCL/Source/GLAnimationUtils.pas  :D
Title: Re: Create simple transition in form ?!?
Post by: lainz on May 05, 2018, 04:34:31 pm
Great. There is also another link here:
https://www.getlazarus.org/forums/viewtopic.php?t=39
TinyPortal © 2005-2018