Animating objects

[xxxpilot]

Hey All!

 

Would be grateful if someone can provide an example of what is the most correct way showing animation on object creation/deletion.

 

As a case, I am dynamically creating 5 UniImages in a row.. how can I apply an effect of "fading in"? .. or "zooming in"?

And on deletion of object from the screen, how is possible nicely to fade them out?

 

I understand that there is connection via ClientEvents->UniEvents to JS from Sencha lib, but I never done it before, so, hard to understand where to start "digging". It will be great if someone can explain the process.

[Sherzod]

Hi,

 

For now can you try this?:

 

http://forums.unigui.com/index.php?/topic/4914-how-to-implement-fading-out-and-fading-in-of-an-uniimage%EF%BC%9F/&do=findComment&comment=24936

 

Best regards.

[xxxpilot]

Oh, thank you. May be you can point where I can find more information about other JS animation "effects"?

 

What is correct way to destroy object after animation finished?

 

And what you can suggest for next sequence:

Creating UniPanel with fading in to it?

 

Creation code is:

if self.FindComponent('test_sss') = nil then
  with TUniPanel.Create(self) do begin
    Name:='test_sss';
    Parent:=self.var_f_ContainerMenu;
    Caption:='Test label';
  end;

[mhmda]

We use greensock library with unigui

[Sherzod]

 

And what you can suggest for next sequence:

Creating UniPanel with fading in to it?

 

Creation code is:

if self.FindComponent('test_sss') = nil then
  with TUniPanel.Create(self) do begin
    Name:='test_sss';
    Parent:=self.var_f_ContainerMenu;
    Caption:='Test label';
  end;

 

Can you try this approach for now?!:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  with TUniPanel.Create(self) do begin
    Name:='test_sss';
    Parent:=self.var_f_ContainerMenu;    
    Caption:='Test label';

    Top:=144;
    JSInterface.JSConfig('style', [JSControl.JSObject('opacity: 0')]);
    JSInterface.JSCall('getEl().fadeIn', [JSControl.JSObject('duration: 1500')]);
  end;
end;

[xxxpilot]

 

Can you try this approach for now?!:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  with TUniPanel.Create(self) do begin
    Name:='test_sss';
    Parent:=self.var_f_ContainerMenu;    
    Caption:='Test label';

    Top:=144;
    JSInterface.JSConfig('style', [JSControl.JSObject('opacity: 0')]);
    JSInterface.JSCall('getEl().fadeIn', [JSControl.JSObject('duration: 1500')]);
  end;
end;

 

I tried.. the result is - immidiate creation of Panel object without any animation. I put 5 sec for animation:

procedure Tfr_vnote.UniButton2Click(Sender: TObject);
begin
if self.FindComponent('test_sss')<> nil then self.FindComponent('test_sss').Free;
with TUniPanel.Create(self) do begin
    Name:='test_sss';
    Parent:=self.var_f_ContainerMenu;
    Caption:='Test label';

    Top:=200;
    JSInterface.JSConfig('style', [JSControl.JSObject('opacity: 0')]);
    JSInterface.JSCall('getEl().fadeIn', [JSControl.JSObject('duration: 5000')]);
end;
end;

Another question, where can I find explained JSConfig and JSCall use?

[Sherzod]

Hi,

 

I tried.. the result is - immidiate creation of Panel object without any animation. I put 5 sec for animation:

 

Which browser are you using?

[mhmda]

See this: http://forums.unigui.com/index.php?/topic/7934-animate-controls-using-greensock-gsap-library/

[xxxpilot]

Hi,

 

 

Which browser are you using?

 

Firefox 51.0.1