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

Need a 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
}

Need a 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
}

Need a 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
    }
}

Need a hint?

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