UI animation
- Game Development course
- Advanced
- Lesson 65/71
- 4 min
Learn to animate UI elements with smooth transitions.
UI Animation and Tweening
Popups or buttons popping onto the screen without transition feel unpolished. Tweening or Coroutines introduce scaling, bounces, and eased transitions to UI elements.
// Bouncing button scale slightly upon press
transform.localScale = Vector3.one * 1.2f;Scaling buttons momentarily on click (Punch/Scale) reinforces the responsiveness of the interface.
Smooth Fading with CanvasGroup
Bringing a menu panel into view with smooth transparency transitions is managed via a CanvasGroup component, interpolating alpha from 0.0 to 1.0.
public CanvasGroup canvasGroup;
IEnumerator FadeIn(float speed) {
while (canvasGroup.alpha < 1f) {
canvasGroup.alpha += Time.deltaTime * speed;
yield return null;
}
}This transition transforms abrupt window popups into elegant cinematic fades.
Practice UI alpha transition test
Define a Start method. Inside, declare float alphaDegeri = 1.0f; and print "UI opakligi: " + alphaDegeri to the console.
Starter code
using UnityEngine;
public class UiPolishTester : MonoBehaviour
{
// Start icinde alphaDegeri tanimla ve yazdir
}Sample solution
using UnityEngine;
public class UiPolishTester : MonoBehaviour
{
void Start()
{
float alphaDegeri = 1.0f;
Debug.Log("UI opakligi: " + alphaDegeri);
}
}Expected output
UI opakligi: 1
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the animation effect called where a button momentarily scales up and returns to normal size upon click?
- NavMesh Bake process
- JSON serialization loop
- Vertex shader transformation
- Punch / Scale animation Correct answer
Explanation: The Punch / Scale effect supplies momentary scaling feedback to UI buttons, strengthening interaction tactility.
2 CanvasGroup visibility alpha
canvasGroup.____ = 1f;canvasGroup.alpha = 1f;Explanation: The 'alpha' property is used to regulate the transparency and visibility of a CanvasGroup component.
3 UI transition concepts
| Term | Meaning |
|---|---|
CanvasGroup |
UI transparency and interaction manager |
alpha |
UI visibility level from 0 to 1 |
Tween |
Smooth interpolation between values |
Fade In |
Smooth transition to full visibility |