UI animations in Unity - Step-by-Step Execution

Concept Flow - UI animations

Start Animation Trigger

↓

Check Animation Type

↓

Play Fade

↓

Update UI Element Properties

↓

Animation Complete?

No→Continue Animation

Yes↓

End Animation

The flow starts when an animation trigger happens, then the system checks which animation to play, updates UI properties frame by frame, and ends when the animation completes.

Execution Sample

Unity

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class UIFade : MonoBehaviour {
    public Image panel;
    void Start() {
        StartCoroutine(FadeOut());
    }

    IEnumerator FadeOut() {
        for (float alpha = 1f; alpha >= 0; alpha -= 0.1f) {
            Color c = panel.color;
            c.a = alpha;
            panel.color = c;
            yield return new WaitForSeconds(0.1f);
        }
    }
}

This code fades out a UI panel by gradually reducing its transparency over time.

Execution Table

Step	alpha value	Action	UI panel alpha	Wait
1	1.0	Set alpha to 1.0	1.0	Wait 0.1s
2	0.9	Reduce alpha by 0.1	0.9	Wait 0.1s
3	0.8	Reduce alpha by 0.1	0.8	Wait 0.1s
4	0.7	Reduce alpha by 0.1	0.7	Wait 0.1s
5	0.6	Reduce alpha by 0.1	0.6	Wait 0.1s
6	0.5	Reduce alpha by 0.1	0.5	Wait 0.1s
7	0.4	Reduce alpha by 0.1	0.4	Wait 0.1s
8	0.3	Reduce alpha by 0.1	0.3	Wait 0.1s
9	0.2	Reduce alpha by 0.1	0.2	Wait 0.1s
10	0.1	Reduce alpha by 0.1	0.1	Wait 0.1s
11	0.0	Reduce alpha by 0.1	0.0	Wait 0.1s
12	-0.1	alpha < 0, stop	0.0	Animation ends

💡 alpha becomes less than 0, so the fade out animation stops

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	After 8	After 9	After 10	After 11	Final
alpha	1.0	0.9	0.8	0.7	0.6	0.5	0.4	0.3	0.2	0.1	0.0	-0.1	-0.1 (stop)
panel.color.a	1.0	0.9	0.8	0.7	0.6	0.5	0.4	0.3	0.2	0.1	0.0	0.0	0.0

Key Moments - 3 Insights

Why does the alpha value go below zero in the last step?

The loop decreases alpha by 0.1 each time until it is less than zero, which triggers the stop condition as shown in step 12 of the execution_table.

Why does the panel's alpha not become negative even though alpha variable does?

The panel's alpha is set only when alpha is >= 0; after that, the animation stops, so the panel alpha stays at 0.0 as shown in the variable_tracker.

What causes the animation to wait between each alpha change?

The yield return new WaitForSeconds(0.1f) pauses the coroutine for 0.1 seconds between each step, as indicated in the Action and Wait columns of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the panel alpha value at step 5?

A 0.7

B 0.6

C 0.5

D 0.4

💡 Hint

Check the 'UI panel alpha' column at step 5 in the execution_table.

At which step does the alpha variable first become less than zero?

A Step 10

B Step 11

C Step 12

D Step 9

💡 Hint

Look at the 'alpha value' column and the exit_note in the execution_table.

If the WaitForSeconds was changed to 0.2f, how would the execution_table change?

A The 'Wait' column would show 'Wait 0.2s' instead of 'Wait 0.1s'.

B The alpha values would decrease by 0.2 instead of 0.1.

C The animation would stop earlier.

D The panel alpha would not change.

💡 Hint

Check the 'Wait' column in the execution_table and understand what WaitForSeconds controls.

Concept Snapshot

UI animations in Unity use scripts to change UI properties over time.
Commonly use coroutines to update properties like transparency (alpha).
Each step changes a property, then waits briefly before next change.
Animation ends when the condition (like alpha <= 0) is met.
Use StartCoroutine to run animations smoothly without freezing UI.

Full Transcript

This visual execution shows how a UI fade out animation works in Unity. The code uses a coroutine to reduce the alpha transparency of a UI panel gradually from 1.0 to 0.0. Each step decreases alpha by 0.1, updates the panel color, then waits 0.1 seconds before continuing. The animation stops when alpha becomes less than zero. The execution table tracks each step's alpha value, action, and wait time. The variable tracker shows how alpha and panel color alpha change over time. Key moments clarify why alpha goes below zero and why the panel alpha does not become negative. The quiz tests understanding of alpha values at specific steps, when the animation stops, and effects of changing wait time. The snapshot summarizes the core idea: UI animations update properties over time using coroutines and stop when conditions are met.