UI - DOTween에셋 사용해서 UI스르륵 움직이게 만들기

DOTween이란?

DOTween은 Unity에서 애니메이션 및 트윈(Tween)을 간단하고 효율적으로 구현할 수 있는 강력한 애셋이다.

트윈이란 특정 값(위치, 크기, 색상 등)을 일정 시간에 걸쳐 자연스럽게 변경하는 것을 의미한다.

Unity에셋에서 DOTween을 가져와서 사용하면 된다.

DOTween을 사용하는 이유

1. UI 요소를 자연스럽게 움직이거나 페이드 효과를 추가할 때 사용

(페이드 효과 : 오브젝트나 화면의 투명도(Alpha 값)를 서서히 변경하여 시각적으로 부드러운 전환을 만드는 효과)

2. 오브젝트의 위치, 크기, 회전을 부드럽게 변경할 때 사용

3. 색상 변화, 텍스트 애니메이션 등을 연출할 때 사용

사용방법

유니티에서 DOTween을 다운받은 후에 적용시키고 싶은 UI에 스크립트를 붙인후 스크립트를 작성하면 된다.

예시코드

UI 오브젝트의 X축 위치를 특정 값으로 부드럽게 이동한 뒤, 다시 초기 위치로 돌아오도록 설정한 코드이

public void OnMapRight()
{
    if (mapObject.transform.localPosition.x > -1470 && time >= 1)
    {
        mapObject.transform.DOLocalMoveX(mapObject.transform.localPosition.x - 1460, 1);
        time = 0;
    }
    else
    {
        if (time >= 1)
        {
            mapObject.transform.DOLocalMoveX(0, 1);
            time = 0;
        }
    }
}

mapObject.transform.DOLocalMoveX(mapObject.transform.localPosition.x - 1460, 1) : 

- DOLocalMoveX : DOLocalMoveX는 오브젝트의 로컬 X축 위치를 특정 값까지 부드럽게 이동시키는 DOTween 메서드이다

- (mapObject.transform.localPosition.x - 1460, 1) : 첫번째 값은 특정 값만큼 이동할 거리를 작성한 거다. 두번째는 이동에 걸리는 시간이다.

 

DOTween에 대해서 더 알고싶으면 밑에 링크를 참고

https://m.blog.naver.com/dooya-log/221320177107