Login ProductsSalesSupportDownloadsAbout |
Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread |
Messages 1 to 9 of 9 total |
Animation HOWTO |
Fri, Sep 11 2015 6:23 PM | Permanent 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 AM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 AM | Permanent 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 AM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 AM | Permanent 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 (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 AM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 AM | Permanent 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 PM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 PM | Permanent Link |
Trinione | << Application.AutoFocus:=False; <<<<<<<<< Add this !!!! >>
Thanks Tim. That worked. |
This web page was last updated on Friday, December 6, 2024 at 01:43 AM | Privacy PolicySite Map © 2024 Elevate Software, Inc. All Rights Reserved Questions or comments ? E-mail us at info@elevatesoft.com |