Creating user interface animations for games

Creating User Interface Animations for Games

UI animation—not decoration. It's signaling system: screen opening, action confirmation, reward received, error warning. Right animation reduces cognitive load—player understands what happened without reading text. Wrong animation annoys: too slow delays gameplay, too sharp gets skipped unnoticed.

UI Animation Tools in Unity: Three Approaches

Animator + Animation Clips—classic. Works via Animator Controller on Canvas object. Plus: visibility in Unity Animator, Blend Trees support, easy control via SetTrigger/SetBool. Minus: hard to manage dynamically (if animating element to arbitrary position known only during gameplay—Animator can't directly help). Fits fixed transitions: screen open/close, button pulse effect, element idle animation.

DOTween—de facto standard for code-driven UI animations in Unity. RectTransform.DOAnchorPos(), CanvasGroup.DOFade(), Image.DOColor()—all via fluent API with sequencing possibility. DOTween.Sequence() with .Append(), .Join(), .InsertCallback() builds complex coordinated animations without visual editor. Important: DOTween works in Update cycle, meaning at Time.timeScale = 0 (game pause) animations stop too, unless using SetUpdate(UpdateType.Normal, true) to ignoreTimeScale.

UI Toolkit Transitions—CSS-like transitions via USS: transition-property: translate; transition-duration: 300ms; transition-timing-function: ease-out;. Most declarative approach, but limited vs DOTween—only transforms, opacity, color. Works well for hover effects and simple state transitions.

Timing and Easing: Animation Physics

Duration ranges that work:

• Micro feedback (hover, press): 80–120 ms
• Small element appear/hide (tooltip, badge): 150–200 ms
• Screen transition (open inventory, menu): 250–350 ms
• Reward and fanfare animations: 600–1200 ms

Anything over 400 ms for utility transitions—annoying on repeated opens. Player opens inventory hundred times per session. 600 ms transition = minute wasted waiting.

Easing functions not symmetric by purpose. Ease Out (fast start, slow end)—for appearing elements: element flies out fast and softly lands, creating "landing" feel. Ease In (slow start, fast end)—for disappearing: slow beginning, fast exit. Ease In/Out—for state transitions without clear "from" and "to". Linear easing in UI almost never needed—looks mechanical.

Overshoot and Spring: When Physics Works

Overshoot (animation overshooting target then returning) adds "weight" and "character" to element. DOTween provides Ease.OutBack and Ease.OutElastic. OutBack with strength 1.5–2.0 works well for pop-up notifications: element "bounces" slightly past final size and returns. OutElastic—for game rewards, loot boxes, crits, where energetic reaction needed.

Important limit: overshoot on large screen elements (full-screen panels) looks weird. Works only for compact elements—icons, buttons, pop-up notifications.

Case Study: Item Received Notification Animation

Project needed pop-up notification animation on item receive: icon + name + description. Animation should appear without gameplay stop, hold 2 seconds, disappear.

Implementation via DOTween Sequence: icon flies from bottom with Ease.OutBack for 200 ms, simultaneously (.Join()) CanvasGroup.alpha fades 0 to 1. At 200 ms text appears via DOFade for 150 ms (.AppendInterval(0.2f).Append(...)). Hold—.AppendInterval(2f). Disappear: shift right + fade for 200 ms with Ease.InCubic. Entire sequence—15 code lines, reused via NotificationController.Show(item).

Separate problem: quick multiple item receives should replace notification, not queue. Solution: on Show() check for active tween, kill via DOTween.Kill(targetTransform), start new animation.

UI Animation Performance: Where FPS Is Lost Imperceptibly

Canvas animations often trigger Canvas Rebuild—recalculating all UI geometry. Happens whenever something in Canvas hierarchy changes: position, size, opacity. CanvasGroup.alpha doesn't trigger geometry Rebuild (only opacity recalc), but RectTransform.position change via DOTween does.

For movement animations this means: animate via DOAnchorPos (AnchoredPosition change) safer than DOMove (World Position change). AnchoredPosition works in Canvas local space, triggering Rebuild only for changed element and parents; World Position can pull entire hierarchy recalculation.

For scale animations: transform.DOScale() on Canvas child doesn't trigger Canvas Rebuild—scale handled at Transform level, not Layout system. Cheapest UI animation type. Why pulse effect (slight scale up/down) so popular for call-to-action buttons.

Separate animating elements into different Canvases. If corner icon blinks for attention—its own Canvas so Rebuild doesn't recalculate entire HUD geometry each frame.

Button State Animation: Nuances

Standard uGUI Button with ColorTween animates Highlight/Pressed/Disabled states via Color. Works but limited. For custom behavior better using DOTween-based UIAnimation component or implementing IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler.

Scale animation on button press (Press: scale 0.95, Release: scale 1.0)—one of simplest and effective tactile feedback. 80 ms with Ease.OutQuad. For mobile platforms especially important—no tactile vibration under finger, visual feedback critical.

Cost determined individually after analyzing animation requirements.