Animation Utilities

Overview

The Animation Utilities component can be used to animate components on the screen. This component offers several animation options like zoom, bounce, and overshoot.

Info

Components whose positions change while being animated will not affect other components. Such components will instead overlap over static components.


Overlapping of animated and static components

Caution

Do not add multiple animations to the same component before returning the component to its initial state. For example, zooming to scale 5 and rotating by 180deg will cause the component to glitch.

Methods

Bounce Horizontal

[ Component component, Number start Position, Number end Position, Number duration ]

Animates the selected component from the start position to the end in a bounce-style motion.


Params
component Component: The component which is to be animated.
start Position Number: The initial X co-ordinate of the component (in pixels).
end Position Number: The final X co-ordinate of the component (in pixels).
duration Number: The duration of the animation (in milliseconds).

Bounce Vertical

[ Component component, Number start Position, Number end Position, Number duration ]

Animates the selected component from the start position to the end in a bounce-style motion.


Params
component Component: The component which is to be animated.
start Position Number: The initial Y co-ordinate of the component (in pixels).
end Position Number: The final Y co-ordinate of the component (in pixels).
duration Number: The duration of the animation (in milliseconds).

Get Bottom Position

[ Component component ]

Returns the distance between the bottom margin of the component's container and the bottom margin of the component in pixels.

Params
component Component: The component of which the bottom position is to be returned.

Get Left Position

[ Component component ]

Returns the distance between the left margin of the component's container and the left margin of the component in pixels.

Params
component Component: The component of which the left position is to be returned.

Get Right Position

[ Component component ]

Returns the distance between the right margin of the component's container and the right margin of the component in pixels.

Params
component Component: The component of which the right position is to be returned.

Get Top Position

[ Component component ]

Returns the distance between the top margin of the component's container and the top margin of the component in pixels.

Params
component Component: The component of which the top position is to be returned.

Get X Position

[ Component component ]

Returns the distance between the top margin of the component's container and the top margin of the component in pixels. Works similar to the Get Left Position block.

Params
component Component: The component of which the top position is to be returned.

Get Y Position

[ Component component ]

Returns the distance between the top margin of the component's container and the top margin of the component in pixels. Works similar to the Get Top Position block.

Params
component Component: The component of which the top position is to be returned.

Info

The methods Get Bottom Position, Get Left Position, Get Right Position, Get Top Position, Get X Position, and Get Y Position return -9999 if there was an error getting the positions.

Overshoot Horizontal

[ Component component, Number start Position, Number end Position, Number duration, Number tension ]

Animates the selected component from the start position to the end, emulating the action of a catapult. For any value of tension greater than 0, the component will overshoot the end position and then slowly return to it.

Params
component Component: The component which is to be animated.
start Position Number: The initial X co-ordinate of the component (in pixels).
end Position Number: The final X co-ordinate of the component (in pixels).
duration Number: The duration of the animation (in milliseconds).
tension Number: The amount by which the component should overshoot the end Position. If this value is 0, then the component will simply slide from the start Position to the end Position.

Overshoot Vertical

[ Component component, Number start Position, Number end Position, Number duration, Number tension ]

Animates the selected component from the start position to the end, emulating the action of a catapult. For any value of tension greater than 0, the component will overshoot the end position and then slowly return to it.

Params
component Component: The component which is to be animated.
start Position Number: The initial Y co-ordinate of the component (in pixels).
end Position Number: The final Y co-ordinate of the component (in pixels).
duration Number: The duration of the animation (in milliseconds).
tension Number: The amount by which the component should overshoot the end Position. If this value is 0, then the component will simply slide from the start Position to the end Position.

Rotation

[ Component component, Number rotation Start Degrees, Number rotation End Degrees, Number duration ]

Rotates the selected component from the start value to the end value. All values are in degrees.


Params
component Component: The component which is to be rotated.
rotation Start Degrees Number: The initial rotation angle of the component (in degrees).
rotation End Degrees Number: The final rotation angle of the component (in degrees).
duration Number: The duration of the animation (in milliseconds).

Zoom

[ Component component, Number start Scale, Number end Scale, Number duration ]

Scales the selected component from the start value to the end value. To scale from the initial zoom level, set start Scale to 1.


Params
component Component: The component which is to be scaled.
start Scale Number: The initial scale of the component (1 if the animation should start from the component's default size).
end Scale Number: The final scale of the component.
duration Number: The duration of the animation (in milliseconds).