[Unity C#] 자연스럽게 등장하는 UI 애니메이션 구현

게임에서 UI 요소가 갑자기 "툭!" 하고 뜨는 것보다, 자연스럽게 슬라이드 되며 등장하면 훨씬 깔끔할 것이다.
화면 바깥에서부터 슬라이드 인(Slide-In) 되는 애니메이션을 간단한 C# 스크립트로 구현해보자.

---

https://zeniff.tistory.com/88

[Unity C#] Dynamic Menu에 따른 카메라 움직임 구현

이전 글에서 Menu를 따라 카메라가 움직이게 되는데, 이와 함께 자연스럽게 UI가 화면 바깥에서 슬라이드 인 되면서 들어오게 할 것이다.

 

---

구성 요소 설명

스크립트는 다음과 같이 구현되어 있다.

 

애니메이션 설정

private float Duration;
public float Speed = 500.0f;

이는 애니메이션의 지속 시간과 속도를 저장한다.

속도는 지정할 수 있지만, 시간은 거리에 따라 자동적으로 저장된다.

 

방향 설정

public enum Direction { Left, Right, Up, Down }
public Direction MoveFrom = Direction.Left;

UI 요소가 위치에 따라 어디서 나올지 설정할 수 있게 구현하였다.

 

Awake (초기 설정)

void Awake()
{
    _rectTransform = GetComponent<RectTransform>();
    _originalPosition = _rectTransform.anchoredPosition;

    Vector2 offset = GetOffsetByDirection();
    _startPosition = _originalPosition + offset;

    float distance = Vector2.Distance(_startPosition, _originalPosition);
    Duration = distance / Speed;
}

현재 UI 요소를 가져온 후 위치를 받아오게 된다.

 

이 때 anchoredPosition으로 위치를 가져오기 때문에 요소의 Anchor를 나올 방향에 따라 적절히 설정해주는 것이 필요하다.

이 값과 맨 처음 지정한 Direction을 GetOffsetByDirection을 통해 시작 위치를 계산하게 된다.

 

GetOffsetByDirection()함수는 다음과 같이 구현되어 있다.

private Vector2 GetOffsetByDirection()
{
    Vector2 offset = Vector2.zero;
    Vector2 size = _rectTransform.rect.size;

    switch (MoveFrom)
    {
        case Direction.Left:
            offset = new Vector2(-size.x, 0f);
            break;
        case Direction.Right:
            offset = new Vector2(size.x, 0f);
            break;
        case Direction.Up:
            offset = new Vector2(0f, size.y);
            break;
        case Direction.Down:
            offset = new Vector2(0f, -size.y);
            break;
    }

    return offset;
}

Direction에 따라 offset을 계산하여준다.

이 때 지금 관련되어 있는 UI 요소의 사이즈 만큼 바깥으로 나가게 하기 위해 size를 사용하게 된다.

 

Enable (Canvas가 활성화 될 때)

void OnEnable()
{
    _rectTransform.anchoredPosition = _startPosition;
    
    _elapsedTime = 0.0f;
    bIsAnimating = true;
}

UI 요소를 _startPosition로 이동시키고 애니메이션을 실행할 준비를 한다.

 

Update (애니메이션 실행)

void Update()
{
    if (bIsAnimating)
    {
        _elapsedTime += Time.deltaTime;

        float t = Mathf.Clamp01(_elapsedTime / Duration);
        t = Mathf.SmoothStep(0f, 1f, t);

        _rectTransform.anchoredPosition = Vector2.Lerp(_startPosition, _originalPosition, t);

        if (t >= 1.0f)
        {
            bIsAnimating = false;

            _rectTransform.anchoredPosition = _originalPosition;
        } 
    }
}

Mathf.Clamp01을 사용하여 값을 0~1까지 보간한다.

이 값을 Mathf.SmoothStep을 통해 감속 효과를 생성하고 이동시키게 된다.

 

t >= 1에 도달하게 된다면 마지막으로 위치를 도착 지점으로 지정해주고 애니메이션을 종료하게 된다.

 

---

UI 요소에 적용

제작한 스크립트를 원하는 요소에 컴포넌트로 붙여준 다음 속도와 위치를 정해준다.

 

이를 실행하게 되면 다음과 같이 동작하게 된다.