[유니티 프로젝트] DOTween을 이용한 팝업 UI 애니메이션

DOTween 을 이용한 팝업 애니메이션 

 

단순히 땅 하고 나오는 팝업 보다는 좀더 자주보는 NPC 팝업의 특성상 지루하지 않을 애니메이션을 추가하는 것이 목적이었다.

 

DOTween 플러그인을 사용하여 제어 하였고 결과적으로 나름 만족스러운 애니메이션이 된듯하다.

(머릿속에 있던 애니메이션을 이렇게 쉽게 만들수 있다니)

 

코드 및 사용 함수 설명은 아래와 같다.

 

 private IEnumerator PopupSetOn(Transform NPCPos)
    {
        // 초기 위치, 회전값 저장
        this.NPCPos = NPCPos;
        Vector3 initialPosition = NPCPos.position;
        Quaternion initialRotation = this.target.rotation;

        // 일자로 접히는 애니메이션 구현
        this.target.localScale = new Vector3(0.0001f, 0.009f, 0.009f);
        this.target.position = NPCPos.position;
        float distanceToMove = Mathf.Abs(NPCPos.position.y - initialPosition.y) + this.moveDistance;
        this.target.DOMoveY(NPCPos.position.y + distanceToMove / 2f, this.duration/10)
             .SetEase(Ease.OutExpo)
             .OnComplete(() => {
                 this.target.DOMoveY(NPCPos.position.y + distanceToMove, this.duration / 10)
                      .SetEase(Ease.InOutExpo)
                      .OnComplete(() => {
                          // 회전값 원래대로 되돌리기
                          this.target.rotation = initialRotation;

                          // 양 옆으로 펴지는 애니메이션 구현
                          this.target.DOScaleX(0.0001f, this.duration / 10)
                                .SetEase(Ease.OutExpo)
                                .OnComplete(() => {
                                    this.target.DOScaleX(0.009f, this.duration / 10)
                                          .SetEase(Ease.OutExpo);
                                });
                      });
             });
        yield return null;
    }

 

 

기본적으로 팝업 UI의 초기 위치값과 회전값을 저장해두고 접힌 상태로 올라오는 애니메이션 -> 양옆으로 펴지는 애니메이션 두단계를 거치게 만들었다.

 

주요 메서드 및  및 설명

 

• .DOMoveY() 
  • Y축으로 타겟을 이동시키는 함수, 인자로는 매개변수로 이동할 위치와 이동하는데 걸리는 시간을 받는다.
• .SetEase()
  • Tween 객체의 이동 동작의 속도(Ease)를 설정하는 역할을한다
  • Tween 객체는 시작 위치와 목표 위치 사이의 중간 지점을 향해 이동하는데, 이때 이동 속도를 일정하게 유지하면 부자연스러울 수 있다. 이때  SetEase() 메서드를 이용하면 이동 동작의 속도를 보다 부드럽고 자연스럽게 조절할 수 있다.
  •  인자로는 Ease 클래스 타입을 받는다. Ease 클래스에는 이동 동작의 속도를 다양하게 조절할 수 있는 여러 가지 유형이 정의되어있다.
    • Ease.InOutExpo는 시작 부분과 끝 부분에서 느리게 움직이면서 중간 지점에서 빠르게 움직이는 속도 패턴을 가지고 있다.
• .OnComplete()
  • 동작이 끝났을때 수행하는 콜백 함수
• DOScaleX()
  • X축 Scale 값을 변경하는 메서드 이전 Y좌표로 움직이는 DOMoveY() 메서드와 같이 동일한 방법으로 사용 가능하다.

 

DOTween 라이브러리를 좀더 자주사용해야겠다는 생각이 들었으나 간단한 애니메이션을 제외하고는 너무 많은 객체가 DOTween을 사용할시 프레임 저하를 일으킬수 있기 때문에 주의해야 할듯 하다.