Animations

Author: admin 107 views

Learn more about animation workflow and components.

Workflow

Almost all animations in Hex UI are handled by custom managers and components. Some custom UI elements are handled using the built-in animator tool (and can be customized using the built-in animation window), but don’t worry, the workflow is optimized by culling/disabling unused animation states.

There are also animation components that you can add to your custom objects using the create menu (Add Component > Hex UI > Animations). Some of these can be seen below.

Fluid Line

Transitions from A to B according to the given animation curve and options. It can be used as a loading indicator, or you can bind it with button or hotkey objects to use it as an underline effect.

Hexagon Container

Smoothly reveals child items one by one. It’s mostly used to animate hexagon buttons, but you can also use it with custom UI objects.

Property	Type	Function
playOnce	bool	Prevent re-animating the objects on enable.
curveSpeed	float	Changes the curve speed.
animationCurve	AnimationCurve	Store a collection of Keyframes that can be evaluated over time.
itemCooldown	float	Adds a cooldown timer before revealing the next object.
fadeAfterScale	float	Starts fade-in stage when the object surpasses the given scale.

Image Fading

Changes the opacity (alpha) of the image based on the given parameters. It is mostly used to provide a smooth transition between panels or runtime startup.

Property	Type	Function
doPingPong	bool	Returns a value that will increment and decrement between the value and length.
fadeSpeed	float	Changes the fade speed.
fadeCurve	AnimationCurve	Store a collection of Keyframes that can be evaluated over time.
enableBehaviour	enum	Defines whether the object will be active or not.
onFadeIn	UnityEvent	Invoke specific events onFadeIn, onFadeInEnd, onFadeOut and onFadeOutEnd,

Image Pulse

Changes the image transparency between the min and max value. It is mostly used to provide a background effect.

Property	Type	Function
minAlpha/maxAlpha	float	Specifies the minimum/maximum transparency (alpha).
pulseSpeed	float	Changes the pulse speed.
pulseCurve	AnimationCurve	Store a collection of Keyframes that can be evaluated over time.

Rect Depth

Adds a cursor-based depth effect to Rect Transform. It is mostly used to add immersion to static background images.

Property	Type	Function
smoothness	float	Changes the rect movement smoothness.
multiplier	float	Multiplies the rect position.
maxRectScale	float	Sets the max transform scale limit.

Spinner

Rotates the transform to create the spin effect.

Property	Type	Function
speed	float	Sets the spinner speed.

UI Popup

Shows or hides the transform depending on the animation mode.

Property	Type	Function
playOnEnable	bool	Plays the animation on enable (based on startBehaviour).
fitterMode	bool	Adapts itself to Content Size Fitter for dynamic usage.
startBehaviour	enum	Defines whether the object will be active or not.
animationCurve	AnimationCurve	Store a collection of Keyframes that can be evaluated over time.
curveSpeed	float	Changes the animation curve speed.