UI Animator

Overview

UI Animator is a flexible animation system for UI objects that supports multiple animation types, easing options, and trigger based playback. Each animation is organized into groups that respond to specific events such as On Enable, pointer events, click, or manual calls, allowing you to build layered interactions on a single component.

Usage

Add UI Animator component to a UI object

Optionally assign references if needed:

Rect Transform
Canvas Group
Image
Text

Create one or more Animation Groups

Set a Trigger
Add one or more Animations to the group

Adjust animation settings such as duration, easing, looping, and type specific values

Properties

Name	Type	Description
`animationGroups`	`List<AnimationGroup>`	Collection of animation groups, each with its own trigger and animation list
`rectTransform`	`RectTransform`	Target RectTransform used for position, rotation, scale, shake, and bounce animations
`canvasGroup`	`CanvasGroup`	CanvasGroup used for fade animations and alpha control
`image`	`Image`	Optional Image used for color tinting
`text`	`TMP_Text`	Optional TextMesh Pro text used for color tinting if Image is not set
`useUnscaledTime`	`bool`	Use unscaled time for all animations (ignores `Time.timeScale`)

Animation Data

Each Animation Group contains a list of Animation Data entries. Each entry controls one animation of a given type.

Name	Type	Description
`type`	`AnimationType`	Type of animation (Fade, Scale, Slide, Rotate, PunchScale, Shake, Bounce, ColorTint)
`enabled`	`bool`	If disabled, this animation entry is ignored
`duration`	`float`	Time in seconds for the animation to complete
`delay`	`float`	Time in seconds to wait before starting this animation
`easeType`	`EaseType`	Easing function used for the animation progression
`loop`	`bool`	If true, the animation repeats until interrupted
`yoyo`	`bool`	If true, the animation plays forward then backward each loop cycle
`animateFromCurrentValue`	`bool`	If true, the animation starts from the current value instead of the configured "from" value

Type Specific Fields

Depending on AnimationType, the following fields are used:

Animation Type	Fields	Description
`Fade`	`fadeFrom`, `fadeTo`	Start and end alpha values for the CanvasGroup
`Scale`	`scaleFrom`, `scaleTo`	Start and end local scale values
`Slide`	`slideFrom`, `slideTo`	Offset from the original anchored position (from and to)
`Rotate`	`rotateFrom`, `rotateTo`	Start and end rotation angles (Z axis)
`PunchScale`	`punchIntensity`	Punch strength applied around the current scale
`Shake`	`shakeIntensity`	Shake strength applied to the anchored position
`Bounce`	`bounceHeight`	Height of the bounce along the Y axis
`ColorTint`	`colorFrom`, `colorTo`	Start and end color used to tint Image or Text

PunchScale, Shake, and Bounce automatically restore the target to its original values when they finish if they are not looping.

Animation Types

AnimationType defines the behavior of each animation entry.

Type	Description
`Fade`	Animates CanvasGroup alpha between two values
`Scale`	Animates local scale between two Vector3 values
`Slide`	Animates anchored position relative to the original position
`Rotate`	Animates rotation around the Z axis
`PunchScale`	Applies a pulsing punch effect around the current scale
`Shake`	Applies a decreasing shake effect to the position
`Bounce`	Moves the element up and down in a bounce motion
`ColorTint`	Animates Image or Text color between two colors

Triggers

Each Animation Group uses a TriggerType. When the trigger occurs, all enabled animations in that group are played.

Trigger	Description
`OnEnable`	Plays when the GameObject is enabled
`OnClick`	Plays on pointer click (`IPointerClickHandler`)
`OnPointerEnter`	Plays when the pointer enters the element
`OnPointerLeave`	Plays when the pointer leaves the element
`OnPointerDown`	Plays when the pointer is pressed down over the element
`OnPointerUp`	Plays when the pointer is released over the element
`Manual`	Only plays when triggered via code with `PlayManualAnimations()`

Public Methods

Name	Parameters	Description
`ExecuteAnimations(triggerType)`	`TriggerType triggerType`	Plays all enabled animation groups that match the given trigger
`StopAllAnimations()`	None	Stops all running animations and clears active animation state
`PlayManualAnimations()`	None	Plays all animation groups that use the `Manual` trigger
`ResetToOriginalValues()`	None	Stops all animations and restores original position, scale, rotation, alpha, and color
`RemoveAnimationGroup(index)`	`int index`	Removes the animation group at the given index

Code Example

UIAnimatorExample.cs

using UnityEngine;
using Evo.UI;

public class UIAnimatorExample : MonoBehaviour
{
    public UIAnimator uiAnimator;

    void Start()
    {
        // Play manual animations
        uiAnimator.PlayManualAnimations();
    }

    public void OnButtonHover()
    {
        // Execute all Pointer Enter groups from code
        uiAnimator.ExecuteAnimations(UIAnimator.TriggerType.OnPointerEnter);
    }

    public void OnButtonClick()
    {
        // Execute all Click groups from code
        uiAnimator.ExecuteAnimations(UIAnimator.TriggerType.OnClick);
    }

    public void ResetUI()
    {
        // Restore original values if needed
        uiAnimator.ResetToOriginalValues();
    }
}

On this page