Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 9 of 9 total
Thread Animation HOWTO
Fri, Sep 11 2015 6:23 PMPermanent Link

Trinione

The example animation app is a bit much to start off with.

Can someone provide a simple walkthru on say how to slide a panel width by clicking a button.

For example. I am trying to animate the sliding in of a scroller area that is off the screen or set pretty small to start, and animates by sliding the sider area when the user hits a button.

I know EWB has the power, but at times there is not enough info on how to use it and this adds lots of time to the learning curve.

Thanks in advance.
Sat, Sep 12 2015 8:07 AMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

<< Can someone provide a simple walkthru on say how to slide a panel width by clicking a button.

For example. I am trying to animate the sliding in of a scroller area that is off the screen or set pretty small to start, and animates by sliding the sider area when the user hits a button. >>

You have to remember that the animation functionality is comprised of animation *primitives*.  It is, by definition, low-level at this point.  That's why the animation example project shows the "building up" of animations.

Here's how you would slide a control that is initially set at design-time as Visible=False, with a Layout.Position of lpTopLeft and a Layout.Stretch of lsBottom:

procedure SlideControl(AControl: TControl; AStyle: TAnimationStyle; ADuration: Integer);
var
  TempPosition: TLayoutPosition;
begin
  with AControl do
     begin
     BeginUpdate;
     try
        TempPosition:=Layout.Position; // Save the current layout position
        DefineLayout; // Peg the defined dimensions of the control based upon the current layout
        Visible:=False;
        Layout.Position:=lpNone;
        Animations.Left.Style:=asNone;
        Left:=-Width; // Move the control to the left of the container control
     finally
        EndUpdate; // Render
     end;
     BeginUpdate;
     try
        Visible:=True; // Make visible first
        Animations.Left.Style:=AStyle;
        Animations.Left.Duration:=ADuration;
        Layout.Position:=TempPosition; // Set the layout to the saved layout
     finally
        EndUpdate; // Render (with animation)
     end;
     end;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  SlideControl(BasicPanel1,asBounceEaseOut,500);
end;

Tim Young
Elevate Software
www.elevatesoft.com
Fri, Sep 18 2015 2:47 AMPermanent Link

Trinione

Tim:
Lovely! Thanks for the example.

Two quick questions:

(1) the settings on the Form Property page, just run at Load time only?
and
(2) the example slides in from the Left of the screen. Can animations also slide in from the right of the screen?
Fri, Sep 18 2015 10:02 AMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

<< (1) the settings on the Form Property page, just run at Load time only? >>

No, any animation settings apply to *any* changes to the corresponding property.  So, if you have a Left animation, then it will be applied any time the Left property changes.  This is subject to BeginUpdate/EndUpdate blocks, of course, which allow you to control when the animations actually render.

<< 2) the example slides in from the Left of the screen. Can animations also slide in from the right of the screen? >>

Sure, just modify this line:

Left:=-Width; // Move the control to the left of the container control

so that it's this:

Left:=Parent.ClientWidth; // Move the control to the right of the container control

This assumes that your control's Layout properties are already set so that the control is pegged to the right of the container control.

Tim Young
Elevate Software
www.elevatesoft.com
Fri, Sep 18 2015 11:25 AMPermanent Link

Trinione

<< No, any animation settings apply to *any* changes to the corresponding property.  So, if you have a Left animation, then it will be applied any time the Left property changes.  This is subject to BeginUpdate/EndUpdate blocks, of course, which allow you to control when the animations actually render. >>

Ah! Got it. Added another panel and animated it be adding:

BeginUpdate;
BasicPanel2.Left := BasicPanel2.Left + 600;
EndUpdate;


<< Left:=Parent.ClientWidth; // Move the control to the right of the container control >>

Got it. Works perfectly. Thanks.


Naturally, that has led another question Smile

(1) Taking a term from CSS, how is the z-index order set? It is only done via the 'Bring To Front' property?
Mon, Sep 21 2015 10:00 AMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com


<< (1) Taking a term from CSS, how is the z-index order set? It is only done via the 'Bring To Front' property? >>

The DisplayOrder property handles this:

http://www.elevatesoft.com/manual?action=viewprop&id=ewb2&comp=TControl&prop=DisplayOrder

Tim Young
Elevate Software
www.elevatesoft.com
Sun, Dec 6 2015 8:06 AMPermanent Link

Trinione

<< This assumes that your control's Layout properties are already set so that the control is pegged to the right of the container control. >>

I have spent several hours trying to get the Slide from Right working but cannot. Here is a simple demo app of the code.

Can you point out what I missed.

Thanks.



Attachments: slideLeftproblem.zip
Mon, Dec 7 2015 3:44 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com


<< I have spent several hours trying to get the Slide from Right working but cannot. Here is a simple demo app of the code.

Can you point out what I missed.  >>

You're missing the fact that EWB auto-focuses controls on forms, and when that occurs, the browser is going to automatically scroll to the focused control, regardless of whether you want it to or not.

To prevent this, either don't use forms for your slide-ins (use some type of panel instead), or use this code in your project's .wbp code:

project Project1;

contains functions, Unit1, Unit2;

uses WebForms, WebCtrls;

begin
  Application.Title := '';
  Application.LoadProgress := False;
  Application.AutoFocus:=False;   <<<<<<<<<  Add this !!!!
  Application.CreateForm(TForm1);
  Application.CreateForm(TForm2);
  Application.Run;
end.

AutoFocus is turned *off*, by default, for mobile environments, and *on*, by default, for desktop environments.

Tim Young
Elevate Software
www.elevatesoft.com
Wed, Dec 9 2015 3:47 PMPermanent Link

Trinione

<<   Application.AutoFocus:=False;   <<<<<<<<<  Add this !!!! >>

Thanks Tim. That worked.
Image