UI-Triggered Animations

Animate UI Panels, Configure UI-Button Action Listeners

Example: Book of Spells

In this example, we have a BookPanel that allows the user to select buttons in the menu to view different text-sections. We also want this panel to be hidden. The tab-key animates the visibility with a slide-in from the left-side canvas border.

Step 1: Create A UI Panel with desired configuration

UI Panels, Buttons, Text - Vertical Layout - With Animation

Inspector Shows Nested UI-Elements

To create an animated UI element, such as a menu, etc. You will want all components nested as children within a top-level UI container such as a UI-panel. Animation scripts will be attached to this top-level panel - the 'BookPanel' in the example above.

UI Basic 2 State-Animation:

Given a UI Panel such as the one listed above:

With the top-level panel selected in the inspector, open the animator window and you are prompted to 'To begin animating BookPanel, create an Animator and an Animation Clip': Select the 'Create' button and save as 'BookPanel_Visible' animation

Select the Top-Level Panel GameObject when the Animation Window is Visible

Prompt for creating new Animation and Animator Component

Animator Component - Add Bool Parameter using the left side 'Parameters' tab as shown below.

Animator Component Auto-Generated on BookPanel - Creating a Bool Parameter

Animator on BookPanel

Configure Animation Properties

Rect Transform - Position - As shown below - When Selecting the 'Add Property' Button, select the Rect-Transform: Anchored Position using the '+' symbol at the right side of the menu

Add Anchored Position as a Property

Set the Anchored Position.x to have a value that makes the panel visible within the camera viewport. - Remove other Keyframes - only 1 keyframe time-point is required for each animation clip.

Create: BookPanel_InVisible Animation

Selecting 'Create New Clip...'

Set the Anchored Position.x to have a value that makes the panel not visible within the camera viewport. - Remove other Keyframes - only 1 keyframe time-point is required for each animation clip.

Set the Anchored Position.x to a value outside the Camera View Port

Setup Animator Controller - Set BookPanel_InVisible as 'Layer Default State'

Create Transition Arrows Between States

Bool Parameter: IsVisible

Set State Transition - Conditional Logic using Parameter: InVisible

Configure Buttons to Execute MagicSpells Methods

In the Inspector: Button: Spell1 - Configure OnClick to Execute MagicSpells.Spell1()

Script: MagicSpells.cs:

Change Book-Text with Button onClick:

Add this script to the Top-Level Panel - BookPanel

uusing System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MagicSpells : MonoBehaviour
{
    [SerializeField]
    Text spellText;
    Animator animator;

    bool InVisible = true;

    // Start is called before the first frame update
    void Start()
    {
        animator = GetComponent<Animator>();

        spellText.text = "Magic Spells";
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Tab))
        {
            InVisible = !InVisible;
            animator.SetBool("IsVisible", InVisible);
            Debug.Log("Tab Pressed: isVisible= " + InVisible);
            if (!InVisible) { //reset when it becomes visible
                spellText.text = "Magic Spells";
            }
            
        }
    }

    public void Spell1()
    {
        spellText.text = "Spell 1";
    }

    public void Spell2()
    {
        spellText.text = "Spell 2";
    }

    public void Spell3()
    {
        spellText.text = "Spell 3";
    }

    public void Spell4()
    {
        spellText.text = "Spell 4";
    }

    public void Spell5()
    {
        spellText.text = "Spell 5";
    }
}