關於UGUI實現UI動畫

問題描述:

我們在做遊戲的時候,如果揹包能動態的滑出,會有更好的體驗。

實現物體的隱藏和顯示,方法一可以用SetActice(true/false)的方式;方法二可以在物體需要隱藏的時候,放在可視範圍外面。(也可能有其他方法我不知道的 - -!)

對於UI這類需要經常使用物體的最好還是使用方法二實現。


解決方案:

下面就簡單總結一下如何實現UI的動態地隱藏和顯示。


先創建一個Image,如果你的場景中沒有Canvas,unity會自動幫你創建Canvas。




在Hierarchy中選中Image,選擇菜單欄Window-Animation,點擊Create按鈕創建第一個Animation Clip,同時Image上自動被掛上Animator組件;




打開自動創建Animation Controller,看到剛剛創建的第一個Animation Clip與Entry自動連上了,意思就是當程序運行時,會首先運行該動畫。但是在遊戲裏,程序剛剛運行時,UI是不需要有任何操作的,故不對該動畫進行任何修改。



接下來,製作UI顯示和隱藏兩個動畫:新建兩個Animation,分別命名爲Show和Hide;編輯Show動畫,點擊AddProperty按鈕可以看到我們可以對Image進行修改的組件以及參數。



我們需要修改UI位置,故選擇RectTransform-AnchoredPosition;

關於如何給動畫添加關鍵幀等就不贅述了。

對關鍵幀進行位置的修改,一針設置在屏幕可視範圍外的位置,一針設置在屏幕可視範圍內的位置,unity就會自動生成曲線。

同理,也製作出UI隱藏時的動畫。

接下來回到AnimatorController的界面,設置觸發條件。

點擊界面內的加號,添加一個bool變量來控制UI的顯示和隱藏。



選擇狀態間的連線,在Inspectors面板中,使用+號添加觸發條件。

在Show狀態到Hide狀態間選擇,bool變量爲false時觸發;在Hide狀態到Show狀態間選擇,bool變量爲true時觸發。



接下來給Image添加腳本組件,控制該變量即可。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class UIPos : MonoBehaviour
{
    private Animator animator;
    private bool isShow = false;
    void Awake()
    {
        animator = GetComponent<Animator>();
    }
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (isShow == false)
            {
                isShow = true;
                animator.SetBool("isShow", true);
            }
            else
            {
                isShow = false;
                animator.SetBool("isShow", false);
            }
        }
    }
}


總結:

Unity要學的東西太多,學習的過程中應該要注意舉一反三。比如今天學習的UI動畫製作,就應該發散思維如何實現UI從小到大的變化?如何改變UI滑出的曲線?如何用一個Button來控制UI的滑出?等等......


文章爲個人學習總結,總結得不好的地方,請多多指教。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章