Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 3 of 3 total
Thread Animations
Fri, Sep 28 2018 7:58 PMPermanent Link

Allen Hunt


I'm using Animations to animate moving a basicpanel with the left and width properties.  The child controls of the panel don't render their layout positions during the animations.  I'm curious if this is by design or whether or not I need to loop thru the child controls and animate them as well.

I've attached an example of the issue I'm trying to resolve.

Any help is greatly appreciated.  Thank you!

Best regards,

Attachments: Animation.zip
Mon, Oct 1 2018 7:44 PMPermanent Link

Allen Hunt


It looks like I made have some mistakes in the source I provide.  I'm not setting the Layout.Stretch property to lsNone before the animation.  But it doesn't appear to be making any difference.

If I don't animate the width property and leave the left animation set the child controls get rendered property but when using the width animation they don't.  

I'm thinking it may have something to do with the width animation but I'm not sure.
Tue, Oct 2 2018 5:01 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.


Email timyoung@elevatesoft.com


<< If I don't animate the width property and leave the left animation set the child controls get rendered property but when using the width animation they don't. >>

You've got a *lot* of issues with your code:

1) You accidentally removed the form variable, so it isn't getting initialized properly and will cause things to fail if anything tries to refer to the form variable to call methods, access properties, etc.

2) You are sizing things according to the browser viewport, even though the panel that you're trying to animate is a child control on a form.  You should size things according to the *form*, not the browser viewport.

3) Your layout properties for the TBasicPanel aren't correct - you've got them set to position top-left and stretch top-right.  The stretch should be just "right".

4) You're resetting the layout *before* the animations are complete.

5) You're *not* animating the child control, hence the reason why it seems to be "sticky".

6) Don't hide/show controls that you're trying to animate (unless you're trying to animate the visibility). It can interact with the dimensional animation in weird ways, especially in a BeginUpdate..EndUpdate where the showing/dimensional layout all occurs at the EndUpdate call.

Here's code that should work for you:

unit Main;


uses WebCore, WebUI, WebForms, WebCtrls, WebBtns, WebBrwsr, WebCtnrs,
  WebLabels, WebSizer;


  TFormMain = class(TForm)
     BasicPanel: TBasicPanel;
     ButtonGo: TButton;
     Button1: TButton;
     procedure ButtonGoClick(Sender: TObject);
     procedure BasicPanelAnimationsComplete(Sender: TObject);
     { Private declarations }
     { Public declarations }
     procedure SlideDown(AControl: TControl; AStyle: TAnimationStyle; ADuration: Integer);

  FormMain: TFormMain;


procedure TFormMain.SlideDown(AControl: TControl; AStyle: TAnimationStyle; ADuration: Integer);
 i, x, widthOffset: Integer;
 with AControl do

       DefineLayout; // Peg the defined dimensions of the control based upon the current layout


       Animations.Left.Style := asNone;
       Animations.Height.Style := asNone;
       Animations.Width.Style := asNone;

       for I:=0 to ControlCount-1 do

       x := Height;
       Height := 1;
       widthOffset := 20 * 2;

       Width := FormMain.ClientWidth - widthOffset;
       EndUpdate; // Render        


       Animations.Left.Style := AStyle;
       Animations.Left.Duration := ADuration;

       for I:=0 to ControlCount-1 do

       Animations.Height.Style := AStyle;
       Animations.Height.Duration := ADuration;

       Animations.Width.Style := AStyle;
       Animations.Width.Duration := ADuration;

       Height := x;
       Width := FormMain.ClientWidth;

       EndUpdate; // Render (with animation)

procedure TFormMain.ButtonGoClick(Sender: TObject);

procedure TFormMain.BasicPanelAnimationsComplete(Sender: TObject);
  with BasicPanel do
     Layout.Position := lpTopLeft;
     Layout.Stretch := lsRight;


Tim Young
Elevate Software