You can animate certain actions to give them a visual effect as they occur in the web browser, such as hiding a widget with a fading animation or moving a widget with a bouncing animation.
There are two parts to every animation: its effect and its timing. The animation's effect, which you select in the Animate dropdown, determines the visual effect of the animation. The animation's timing, which you enter in the ms field, determines the time in milliseconds that it will take for the animation to be completed.
The following effects can be applied to actions that change the visibility of widgets. These are the Show/Hide action and the Set Panel State action.
Fade: Gradually changes the widget or panel state's opacity until it is completely in or out of view
Slide left/right/up/down: Slides the widget or state into or out of view
Flip left/right/up/down: Flips the widget or state into or out of view along a center axis (X for up/down and Y for left/right)
Also known as "easings," the following effects determine the pacing of the animation within the designated timing. These can be applied to actions that change the spatial orientation of a widget or the page itself. These are the Scroll to Widget, Move, Rotate, Set Size, and Set Opacity actions.
Swing: The animation is very slightly slower at the beginning and end of the timing than it is at the midpoint
Linear: The animation progresses at the same speed throughout the entire timing
Ease in cubic: The animation starts out slow and progressively gets faster until the end of the timing
Ease out cubic: The animation starts out fast and progressively gets slower until the end of the timing
Ease in out cubic: The animation starts out slow and progressively gets faster until the midpoint of the timing; then it progressively gets slower again. (This is similar to Swing but more pronounced.)
Bounce: The animation speeds up like Ease in cubic but bounces back a few times once the animation's finishing point is reached
Elastic: The animation overshoots its finishing point and then springs back to it
Move Action Boundaries
The Move action allows you to set boundaries on how far its target widget can be moved in any direction. To add a boundary to a Move action, click More Options and then click Add boundary.
Movement boundaries are broken down into three parts:
The first dropdown represents the side of the widget you want to place the boundary on: its top, left, right, or bottom edge.
The second dropdown defines a comparison between the X or Y value of the selected widget edge and the pixel value entered in the field to the right.
The field to the right defines an X or Y value that the selected widget edge is compared to.
For example, a boundary reading
top — is greater than — 50 means that the Y value of the widget's top edge must be 51 or greater. In other words, this Move action cannot move the widget's top edge any farther up on the page than Y=51.
Tip: You can use a math expression to dynamically generate the pixel value in the fx field. This is especially helpful when you want to use other widgets on the page as boundary markers. Check out the slider control tutorial for an example.