[유니티 C#] UI Animation State 이름 중복 사용

최근에 UI 애니메이션 관련해서 재밌는 팁을 알게되서 달려왔습니다!

 

UI 애니메이션의 중복 활용이라 적었는데 무엇이냐면

유니티 애니메이션을 하면서 원하는 애니메이션으로 변경하거나 실행해야할때

각 상태에 transition을 연결하고 파라미터 값을 매겨 일종의 유한상태 머신을 만드는 형태로만 사용해왔습니다.

 

하지만 이번에 알아낸건 스크립트상에서 애니메이션을 실행할때 state이름을 매개변수로 받아 실행하며 그 state이름을 똑같이 작성하게되면 UI상에 중복되는 시점에 다른 애니메이션을 실행시킬수있다는 것을 알았습니다.

 

 

 

예시를 들자면 일반 팝업 연출과 아래에서 슬라이드해서 올라오는 팝업 연출이 있습니다.

두 Animator의 상태를 동일하게 만듭니다.

 

그리고 해당 애니메이터를 제어할 스크립트를 살펴봅시다.

// 콜백 매개변수를 위한 델리게이트
public delegate void CallbackEvent();

public class PopupAnim : MonoBehaviour
{
    private Animator anim =  null;
    
    private CallbackEvent finishCallback = null;
    private void Awake()
    {
    	// 현재 컴포넌트에 Animator가 있어야 합니다.
        // 애니메이션 이벤트를 받기위해
        this.anim = this.GetComponent<Animator>();
    }
    
    public void InitPopup()
    {
    	// 중복시킬 애니메이션 state 이름을 in으로 하면
        // 팝업을 초기화할때 해당 애니메이션 실행
        this.anim.Play("in");
    }

    public void FinishPopup(CallbackEvent _finish)
    {
    	// 중복시킬 애니메이션 state 이름을 out으로 하면
        // 팝업을 종료시킬때 해당 애니메이션 실행
        this.finishCallback = _finish;
        this.anim.Play("out");
    }
    
    void Finish()
    {
    	// out 애니메이션 마지막에 붙인 이벤트 실행
        this.finishCallback();
    }
}

Popup Anim 스크립트를 Animator 컴포넌트가 존재하는 오브젝트에 넣어줍니다.

 

 

각각 일반 연출, 슬라이드 연출 Animator를 가지고 있지만 state이름을 같게 해서

하나의 popup Anim스크립트로 제어하도록 구현했습니다.

 

//// 두 클래스는 다른 스크립트에 존재합니다.

// APopupPanel스크립트에 존재 - 일반 연출 팝업
public class APopupPanel : MonoBehaviour
{
    [SerializeField]
    private PopupAnim popupAnim = null;

    public void Init()
    {
        this.gameObject.SetActive(true);
        
    	// 팝업을 초기화 해줄때 in 애니메이션 시작
        this.popupAnim.InitPopup();
    }

    public void OnButtonClose()
    {
    
    	// 종료버튼 누르면 out 애니메이션 시작
        // out 애니메이션 후 콜백을 매개변수로 받는다.
        this.popupAnim.FinishPopup(this.Finish);
    }

    private void Finish()
    {
    	// out 애니메이션 종료 후 실행될 것들
        this.gameObject.SetActive(false);
    }
}


// BPopupPanel스크립트에 존재 - 슬라이드 연출 팝업
public class BPopupPanel : MonoBehaviour
{
    [SerializeField]
    private PopupAnim popupAnim = null;
    public void Init()
    {
    	// 팝업을 초기화 해줄때 in 애니메이션 시작
        this.gameObject.SetActive(true);
        this.popupAnim.InitPopup();
    }


    public void OnButtonClose()
    {
    	// 종료버튼 누르면 out 애니메이션 시작
        // out 애니메이션 후 콜백을 매개변수로 받는다.
        this.popupAnim.FinishPopup(this.Finish);
    }

    private void Finish()
    {
    	// out 애니메이션 종료 후 실행될 것들
        this.gameObject.SetActive(false);
    }
}

 

코드를 보시면 아시다시피 APopupPanel과 BPopupPanel는 거의 동일한 코드입니다.

 

 

A가 일반, B가 슬라이드 팝업 구분되어서 나온다.

 

묘하게 글이 길어졌지만 포인트는 하나인 것 같습니다.

 

- 애니메이션 state 이름을 똑같이 작성, 각기 다른 Animator에서 스크립트 중복 해결 가능 -

- 현재는 팝업만 보여드렸지만 다양한 애니메이션 부분에서 활용 가능 -

 

단순한것이라서 이미 알고계셨을 수도 있지만

 

저에게 있어서 이런 단순한 차이가

앞으로 많은 변화들을 가져와주지 않을까 생각합니다!

절대 날먹 아닙니다!