Create simple transition in form ?!?
lazarus / 39-Graphics

----------------------------------------------------------------------
majid.ebru · 2017-08-16 11:15

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 · 2017-08-16 11:23

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

----------------------------------------------------------------------
Thaddy · 2017-08-16 11:25

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.Timer1Timer(Sender: TObject);{$push}{$rangechecks off}begin  //
timer interval set to 10.  form1.color := Form1.color + 257; 
Application.ProcessMessages;end;{$pop}end.
Same can be done with e.g. TImageList;

----------------------------------------------------------------------
majid.ebru · 2017-08-16 11:45

Thank you

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

----------------------------------------------------------------------
Handoko · 2017-08-16 12:30

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  SysUtils, Forms, Dialogs,
StdCtrls, ExtCtrls; type   { TForm1 }   TForm1 = class(TForm)   
btnLogin: TButton;    lblInformation: TLabel;    lbeName:
TLabeledEdit;    lbePassword: TLabeledEdit;    lblLogin: TLabel;   
lblInfo: TLabel;    pnlLogin: TPanel;    procedure
btnLoginClick(Sender: TObject);    procedure lblInfoClick(Sender:
TObject);    procedure lblLoginClick(Sender: TObject);  private    {
private declarations }  public    { public declarations }  end; var 
Form1: TForm1; implementation const  UserName = 'hello';  Password =
'pascal'; {$R *.lfm} { TForm1 } procedure TForm1.lblLoginClick(Sender:
TObject);var  OriginalPosX: Integer;  OriginalPosY: Integer;  i:     
     Integer;begin  // Hide the information  if lblInformation.Visible
then  begin    OriginalPosX := lblInformation.Left;    for i :=
lblInformation.Left to Form1.Width do    begin     
lblInformation.Left := i;      Application.ProcessMessages;     
Sleep(2);    end;    lblInformation.Visible := False;   
lblInformation.Left    := OriginalPosX;  end;  // Show the login box 
OriginalPosY     := pnlLogin.Top;  pnlLogin.Top     := Form1.Height; 
pnlLogin.Visible := True;  for i := pnlLogin.Top downto OriginalPosY
do  begin    pnlLogin.Top := i;    Application.ProcessMessages;   
Sleep(2);  end;end; procedure TForm1.lblInfoClick(Sender:
TObject);var  OriginalPosY, i: Integer;begin  // Hide the login box 
if pnlLogin.Visible then  begin    OriginalPosY := pnlLogin.Top;   
for i := pnlLogin.Top to Form1.Height do    begin      pnlLogin.Top :=
i;      Application.ProcessMessages;      Sleep(2);    end;   
pnlLogin.Visible := False;    pnlLogin.Top     := OriginalPosY;  end; 
// Show the information  OriginalPosY           :=
lblInformation.Top;  lblInformation.Top     := -10; 
lblInformation.Visible := True;  for i := lblInformation.Top to
OriginalPosY do  begin    lblInformation.Top := i;   
Application.ProcessMessages;    Sleep(2);  end;end; procedure
TForm1.btnLoginClick(Sender: TObject);var  OriginalPosX: Integer; 
OriginalPosY: Integer;  i:            Integer;begin  // Wrong answer 
if (lbeName.Text <> UserName) or (lbePassword.Text <> Password) then 
begin    OriginalPosX := pnlLogin.Left;    OriginalPosY :=
pnlLogin.Top;    for i := 1 to 10 do begin      pnlLogin.Top  :=
OriginalPosY + Random(20)-10;      pnlLogin.Left := OriginalPosX +
Random(20)-10;      Application.ProcessMessages;      Sleep(30);   
end;    pnlLogin.Top  := OriginalPosY;    pnlLogin.Left :=
OriginalPosX;    Exit;  end;  // Correct answer 
ShowMessage('Welcome');  Close;end; end.

----------------------------------------------------------------------
majid.ebru · 2017-08-16 18:29

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

Quote from: Handoko on August 16, 2017, 02:30:08 pmCode: Pascal
 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i     for i
:= 1 to 10 do begin      pnlLogin.Top  := OriginalPosY +
Random(20)-10;      pnlLogin.Left := OriginalPosX + Random(20)-10;   
 Application.ProcessMessages;      Sleep(30);    end;

----------------------------------------------------------------------
Handoko · 2017-08-18 02:17

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.ht
ml#msg256719

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

----------------------------------------------------------------------
lainz · 2018-05-04 00:07

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/anim
atedpanel.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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i 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 · 2018-05-04 20:23

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

----------------------------------------------------------------------
lainz · 2018-05-05 14:34

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