UI animations in Unity - Mini Project: Build & Apply

UI animations

📖 Scenario: You are creating a simple user interface for a game menu in Unity. You want to add smooth animations to buttons to make the menu feel lively and interactive.

🎯 Goal: Build a Unity script that animates a UI button by smoothly scaling it up when hovered over and scaling it back down when the mouse leaves.

📋 What You'll Learn

Create a UI button GameObject in Unity

Write a C# script to animate the button's scale

Use Unity's Update method to smoothly change scale

Detect mouse hover and mouse exit events on the button

Print messages when animation starts and ends

💡 Why This Matters

🌍 Real World

UI animations make game menus and interfaces feel more responsive and polished, improving player experience.

💼 Career

Understanding UI animations is important for game developers and UI designers to create engaging and interactive user interfaces.

1

Create a UI button GameObject

In Unity, create a UI button GameObject named animatedButton in the scene hierarchy. Then, create a new C# script called ButtonAnimator and attach it to animatedButton. In the script, declare a public variable targetScale of type Vector3 and set it to new Vector3(1.2f, 1.2f, 1f).

Unity

// Declare a public Vector3 variable called targetScale and set it to new Vector3(1.2f, 1.2f, 1f)
// Your code here

Hint

Use public Vector3 targetScale = new Vector3(1.2f, 1.2f, 1f); inside your class.

2

Add variables to track animation state

Inside the ButtonAnimator class, add a private variable originalScale of type Vector3 to store the button's starting scale. Also add a private boolean variable isHovered initialized to false to track if the mouse is over the button.

Unity

using UnityEngine;

public class ButtonAnimator : MonoBehaviour
{
    public Vector3 targetScale = new Vector3(1.2f, 1.2f, 1f);
    // Declare private Vector3 originalScale
    // Declare private bool isHovered initialized to false
    // Your code here
}

Hint

Use private Vector3 originalScale; and private bool isHovered = false; inside the class.

3

Implement hover detection and scaling animation

In the ButtonAnimator class, add the Start() method to set originalScale to the current transform scale. Then add OnMouseEnter() and OnMouseExit() methods to set isHovered to true and false respectively. Finally, add an Update() method that smoothly scales the button's transform to targetScale when isHovered is true, or back to originalScale when false, using Vector3.Lerp with a speed factor of 5f.

Unity

using UnityEngine;

public class ButtonAnimator : MonoBehaviour
{
    public Vector3 targetScale = new Vector3(1.2f, 1.2f, 1f);
    private Vector3 originalScale;
    private bool isHovered = false;

    // Add Start() method to set originalScale
    // Add OnMouseEnter() to set isHovered true
    // Add OnMouseExit() to set isHovered false
    // Add Update() to smoothly scale transform
    // Your code here
}

Hint

Use Unity's OnMouseEnter and OnMouseExit to detect hover. Use Vector3.Lerp in Update to animate scale.

4

Add debug messages when animation starts and ends

Modify the OnMouseEnter() and OnMouseExit() methods to print "Hover animation started" and "Hover animation ended" respectively using Debug.Log(). Then, add a print statement in Update() that prints "Scaling to target" when isHovered is true and "Scaling to original" when false.

Unity

using UnityEngine;

public class ButtonAnimator : MonoBehaviour
{
    public Vector3 targetScale = new Vector3(1.2f, 1.2f, 1f);
    private Vector3 originalScale;
    private bool isHovered = false;

    void Start()
    {
        originalScale = transform.localScale;
    }

    void OnMouseEnter()
    {
        isHovered = true;
        // Print "Hover animation started"
        // Your code here
    }

    void OnMouseExit()
    {
        isHovered = false;
        // Print "Hover animation ended"
        // Your code here
    }

    void Update()
    {
        Vector3 desiredScale = isHovered ? targetScale : originalScale;
        transform.localScale = Vector3.Lerp(transform.localScale, desiredScale, 5f * Time.deltaTime);
        // Print "Scaling to target" if isHovered true else "Scaling to original"
        // Your code here
    }
}

Hint

Use Debug.Log("message") in OnMouseEnter and OnMouseExit. Use print() in Update to show scaling messages.

Practice

1. What is the primary purpose of UI animations in Unity?

easy

A. To reduce the size of UI elements

B. To increase the game's frame rate

C. To make the user interface more lively and clear

D. To disable user input during gameplay

Solution

1. Step 1: Understand UI animation purpose

   UI animations are used to enhance the look and feel of the interface, making it more engaging and easier to understand.

2. Step 2: Eliminate unrelated options

   Increasing frame rate, reducing size, or disabling input are not related to UI animations.

3. Final Answer:

   To make the user interface more lively and clear -> Option C

4. Quick Check:

   UI animations improve experience = A [OK]

Hint: UI animations make interfaces lively and clear [OK]

Common Mistakes:

• Confusing animations with performance optimization
• Thinking animations reduce UI element size
• Assuming animations disable input

2. Which Unity component is used to control UI animations?

easy

A. Animator

B. CanvasRenderer

C. Collider

D. Rigidbody

Solution

1. Step 1: Identify animation control components

   The Animator component is designed to control animations in Unity, including UI animations.

2. Step 2: Exclude unrelated components

   Rigidbody is for physics, Collider for collisions, and CanvasRenderer for drawing UI, not animation control.

3. Final Answer:

   Animator -> Option A

4. Quick Check:

   Animation control = Animator [OK]

Hint: Animator controls animations in Unity [OK]

Common Mistakes:

• Choosing Rigidbody thinking it controls movement animations
• Confusing CanvasRenderer with animation control
• Selecting Collider which is unrelated to animations

3. What will be the output of this code snippet controlling UI animation?

Animator animator = GetComponent<Animator>();
animator.Play("FadeIn");

medium

A. The UI element will stop all animations

B. The UI element will start the 'FadeIn' animation

C. A compile-time error occurs due to syntax

D. Nothing happens because 'FadeIn' is not a valid method

Solution

1. Step 1: Understand Animator.Play method

   The Play method starts the animation clip named "FadeIn" on the Animator component.

2. Step 2: Check code correctness

   The code syntax is correct and will trigger the animation if "FadeIn" exists in Animator.

3. Final Answer:

   The UI element will start the 'FadeIn' animation -> Option B

4. Quick Check:

   animator.Play("FadeIn") starts animation = A [OK]

Hint: Animator.Play("ClipName") starts that animation clip [OK]

Common Mistakes:

• Thinking Play stops animations
• Assuming syntax error due to generic method call
• Believing Play is invalid without checking clip existence

4. Identify the error in this Unity C# code controlling UI animation:

Animator animator = GetComponent<Animator>();
animator.SetBool("isVisible", true);
animator.Play("Show");

medium

A. SetBool method requires a float parameter

B. Missing Animator component on the GameObject

C. Play method cannot be called after SetBool

D. No error; code is correct

Solution

1. Step 1: Check method usage

   SetBool takes a string and a bool, which is correct here.

2. Step 2: Consider runtime errors

   If the GameObject lacks an Animator component, GetComponent returns null causing errors, but this code snippet assumes the component exists.

3. Step 3: Evaluate other options

   Play can be called after SetBool; no syntax error exists.

4. Final Answer:

   No error; code is correct -> Option D

5. Quick Check:

   Methods used correctly = D [OK]

Hint: SetBool and Play methods are valid if Animator exists [OK]

Common Mistakes:

• Thinking SetBool needs float parameter
• Believing Play cannot follow SetBool
• Assuming missing Animator component without context

5. You want to create a smooth button fade-out effect using UI animations in Unity. Which approach combines animation and code control correctly?

hard

A. Create an animation clip fading alpha to 0, then use Animator.SetTrigger("FadeOut") in code

B. Change button color alpha directly in Update() without Animator

C. Use Rigidbody to move button off-screen as fade-out

D. Disable button GameObject immediately without animation

Solution

1. Step 1: Understand fade-out animation

   Fading alpha to 0 in an animation clip creates a smooth visual fade effect.

2. Step 2: Control animation via code

   Using Animator.SetTrigger("FadeOut") starts the fade-out animation from code, linking animation and logic.

3. Step 3: Exclude incorrect methods

   Changing alpha in Update lacks animation smoothness, Rigidbody is unrelated, and disabling immediately skips animation.

4. Final Answer:

   Create an animation clip fading alpha to 0, then use Animator.SetTrigger("FadeOut") in code -> Option A

5. Quick Check:

   Animation clip + SetTrigger = smooth fade [OK]

Hint: Use animation clip + Animator trigger for smooth UI fades [OK]

Common Mistakes:

• Trying to fade by moving button physically
• Changing alpha manually without animation
• Disabling button instantly without fade