UI animations in Unity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Unity UI animation code?

Consider this Unity C# script snippet that animates a UI element's opacity over time using a coroutine. What will be the final alpha value of the UI element's CanvasGroup after the coroutine finishes?

Unity

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

public class FadeUI : MonoBehaviour
{
    public CanvasGroup canvasGroup;

    IEnumerator FadeOut()
    {
        float duration = 2f;
        float elapsed = 0f;
        while (elapsed < duration)
        {
            canvasGroup.alpha = Mathf.Lerp(1f, 0f, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }
        canvasGroup.alpha = 0f;
    }

    void Start()
    {
        StartCoroutine(FadeOut());
    }
}

A The alpha value will be 0.5 after 2 seconds, making the UI element semi-transparent.

B The alpha value will be 1 after 2 seconds, so the UI element remains fully visible.

C The alpha value will be 0 after 2 seconds, making the UI element fully transparent.

D The code will cause a runtime error because canvasGroup is not assigned.

💡 Hint

Look at the Mathf.Lerp function and the final assignment after the loop.

The coroutine smoothly changes the alpha from 1 to 0 over 2 seconds. After the loop, it explicitly sets alpha to 0, making the UI element fully transparent.

🧠 Conceptual

intermediate

Which Unity component is best for animating UI element position smoothly?

You want to move a UI button smoothly from one position to another over time. Which Unity component or method is best suited for this animation?

A Use <code>RectTransform</code> and animate its <code>anchoredPosition</code> property with a coroutine or tweening library.

B Use <code>Transform.position</code> directly to move the UI element in world space.

C Use <code>CanvasGroup.alpha</code> to animate the position by changing transparency.

D Use <code>Animator</code> component only for 3D models, not UI elements.

💡 Hint

UI elements use RectTransform for layout and positioning inside the Canvas.

UI elements use RectTransform for their position inside the Canvas. Animating anchoredPosition moves the UI element smoothly in its parent space.

🔧 Debug

advanced

Why does this UI animation script freeze the game?

Look at this Unity C# code snippet intended to animate a UI element's scale. Why does the game freeze when this code runs?

Unity

using UnityEngine;

public class ScaleUI : MonoBehaviour
{
    public RectTransform uiElement;

    void Start()
    {
        while (uiElement.localScale.x < 2f)
        {
            uiElement.localScale += new Vector3(0.01f, 0.01f, 0);
        }
    }
}

A The RectTransform component is missing, so uiElement is null and causes a NullReferenceException.

B The code tries to add a Vector3 to localScale which is not allowed, causing a compile error.

C The scale increases too fast and causes an overflow error.

D The while loop runs in Start() without yielding, blocking the main thread and freezing the game.

💡 Hint

Think about how Unity's main thread and frame updates work with loops.

The while loop runs all at once in Start(), blocking the main thread. Unity needs frame updates to animate smoothly, so a coroutine or Update method with incremental changes is needed.

📝 Syntax

advanced

Which option correctly animates UI element's color using Unity's Update method?

Choose the code snippet that correctly changes a UI Image's color from white to red over 3 seconds inside Update().

A

float t = 0f;
void Update() {
  t += Time.deltaTime / 3f;
  GetComponent<Image>().color = Color.Lerp(Color.white, Color.red, t);
}

B

void Update() {
  float t = 0f;
  t += Time.deltaTime / 3f;
  GetComponent<Image>().color = Color.Lerp(Color.white, Color.red, t);
}

C

float t = 0f;
void Update() {
  t += Time.deltaTime * 3f;
  GetComponent<Image>().color = Color.Lerp(Color.white, Color.red, t);
}

D

float t = 0f;
void Update() {
  t += Time.deltaTime / 3f;
  GetComponent<Image>().color = Color.Lerp(Color.red, Color.white, t);
}

💡 Hint

Remember to declare t outside Update() to keep its value between frames.

Option A correctly increments t over time and lerps from white to red. Option A resets t every frame. Option A multiplies time incorrectly. Option A reverses colors.

🚀 Application

expert

How many keyframes are created by this Unity AnimationClip code?

This code creates an AnimationClip that animates a UI element's scale from 1 to 2 over 1 second with 4 keyframes. How many keyframes does the clip actually contain?

Unity

using UnityEngine;

public class CreateClip : MonoBehaviour
{
    void Start()
    {
        AnimationClip clip = new AnimationClip();
        Keyframe[] keysX = new Keyframe[] {
            new Keyframe(0f, 1f),
            new Keyframe(0.33f, 1.5f),
            new Keyframe(0.66f, 1.75f),
            new Keyframe(1f, 2f)
        };
        AnimationCurve curveX = new AnimationCurve(keysX);
        clip.SetCurve("", typeof(RectTransform), "m_LocalScale.x", curveX);
    }
}

A 3 keyframes, because Unity merges close keyframes automatically.

B 4 keyframes, exactly as defined in the keysX array.

C 1 keyframe, since only the last keyframe is used in the animation.

D 0 keyframes, because the clip is not assigned to any Animator.

💡 Hint

Think about how AnimationCurve stores keyframes and if Unity modifies them automatically.

The AnimationCurve stores exactly the keyframes you add. Unity does not merge or remove keyframes automatically. The clip contains 4 keyframes as defined.