[Unity] DoTween을 이용한 애니메이션 만들기

유니티를 이용해 게임을 만들다 보면

UI를 움직이고 크기를 조절하는 등의 애니메이션 효과를 사용하고 싶을 때가 있습니다.

 

역동적인 애니메이션으로 UI에 효과를 주기 위한 방법은 다양합니다.

코루틴, 유니태스크를 이용해 직접 코드를 제어할 수도 있고

Unity Animation을 이용해 컨트롤러로 제어해 줄 수도 있습니다.

 

하지만 DoTween 에셋을 이용하면 코드 몇 줄로 손쉽게 제어할 수 있습니다.

 

DoTween 에셋이란?

DoTween 에셋은 복잡한 코드 없이도 부드럽고 자연스러운 애니메이션을 손쉽게 구현할 수 있도록 도와주는 Tweening 라이브러리입니다.

 

Tweening이란 두 개 이상의 상태를 서서히 변환시켜 애니메이션을 만드는 것을 뜻합니다.

 

 

가격

DoTween 에셋은 Unity Asset Store에서 검색 후 다운로드하실 수 있습니다.

또는 아래의 링크를 클릭 후 이동하여 다운로드하시면 됩니다.

 

유료 버전의 경우 세일을 하는 경우도 있기에 소액이지만 급하지 않은 경우 세일을 기다렸다가 사시는 방법도 추천합니다.

 

https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

DOTween (HOTween v2) | 애니메이션 도구 | Unity Asset Store

< 무료 버전>

 

https://assetstore.unity.com/packages/tools/visual-scripting/dotween-pro-32416

DOTween Pro | 비주얼 스크립팅 | Unity Asset Store

< 유료 버전>

 

DoTween 용어 정리

● Do : 모든 트윈 단축기의 접두사입니다.

● Set : 트윈으로 연결할 수 있는 모든 설정의 접두사입니다.

● On : 트윈으로 연결할 수 있는 모든 콜백의 접두사입니다.

● Tweener: 값을 제어하고 애니메이션화 하는 트윈입니다.

● Sequence: 값을 통제하는 대신 다른 트윈들을 통제하고 그룹으로 애니메이션 화하는 특별한 트윈입니다.

● Tween: Tweener와 Sequence를 모두 나타내는 일반적인 단어입니다.

● Nested Tween : Sequence 내부에 포함된 트윈입니다.

 

DoTween.Init()

처음으로 트윈을 만들면 기본값을 사용하여 DoTween이 자동으로 초기화됩니다.

 

하지만 직접 초기화를 하고 싶다면, 트윈을 만들기 전에 DoTween.Init() 메서드를 한 번만 호출하시면 됩니다.

(트윈을 만든 후에 호출해도 아무 효과가 없습니다.)

 

DoTween의 전역 설정(Global Settings)을 통해 언제든 초기화 설정을 변경할 수 있습니다.

선택적으로 Init 메서드 뒤에 SetCapacity를 연결하여, Tweener / Sequence의 최대 초기 용량을 설정할 수 있습니다.

 

● 기본 형식

DoTween.Init( bool recycleAllDefault, bool useSafeMode, LogBehavior logBehavior );

 

- recycleAllDefault: 재사용할지를 정하는 매개변수, 기본 초기 설정은 false

  - true →  트윈이 끝나면 자동으로 풀(pool)에 반환해서 재사용합니다.

  - false → 트윈이 끝나면 메모리에서 제거됩니다.

 

- useSafeMode: 오류가 발생했을 때 무시할지 결정하는 매개변수, 기본 초기 설정은 true

  - true → 트윈 실행 중 오류가 발생해도 DoTween이 오류를 무시하고 넘어갑니다.

  - false → 오류가 그대로 발생해서 콘솔에 빨간 에러가 표시됩니다.

 

- logBehavior: 로그를 얼마나 출력할지 설정, 기본 초기 설정은 ErrorsOnly

  - LogBehavior.Default → LogBehavior.ErrorsOnly와 같은 설정입니다. (오류만 표시)

  - LogBehavior.ErrorsOnly → 오류 로그만 출력합니다.

  - LogBehavior.Verbose → 모든 내부 동작을 상세히 로그로 출력합니다. (디버깅 시 유용)

  - LogBehavior.None → 로그를 출력하지 않습니다.

 

//기본 설정으로 초기화
DOTween.Init();
//사용자 지정 설정으로 초기화하고 용량 설정
DOTween.Init(true, true, LogBehaviour.Verbose).SetCapacity(200, 10);

 

 

 

DoTween 생성방법

트위너를 만드는 방법은 3가지가 있습니다.

- The generic way

- The shortcuts way

- Additional generic way

 

 

The generic way

 

트윈을 만드는데 가장 유연한 방식으로 public/private, static/dynamic을 가리지 않고 거의 모든 값을 트윈할 수 있습니다.

 

● 기본 형식

DoTween.To(getter, setter, to, float duration)

 

- getter: 트윈할 속성의 값을 반환하는 델리게이트(대리자) 입니다.

- setter: 트윈할 속성의 값을 설정하는 델리게이트(대리자) 입니다.

- to: 트윈이 도달해야 하는 목표 값(value) 입니다.

- duration: 트윈이 진행되는 시간(초 단위) 입니다.

 

//myVector 벡터는 1초에 거쳐 Vector3(3, 4, 8)가 됩니다.
DOTween.To(()=> myVector, x=> myVector = x, new Vector3(3,4,8), 1);

//myFloat이 1초에 거쳐 52로 바뀝니다.
DOTween.To(()=> myFloat, x=> myFloat = x, 52, 1);

 

 

 

The shortcuts way

 

Transform, Rigidbody, Material과 같은 Unity 객체에 대한 단축키가 포함되어 있습니다.

이러한 객체에 대한 참조에서 직접 트윈을 시작할 수도 있으며, 객체 자체를 트윈 타겟으로 설정할 수도 있습니다.

 

//현재 객체의 transform을 1초에 거쳐 Vector3(2, 3, 4)의 위치로 이동
transform.DOMove(new Vector3(2,3,4), 1);

//현재 객체의 rigidbody를 1초에 거쳐 Vector3(2, 3, 4)의 위치로 이동
rigidbody.DOMove(new Vector3(2,3,4), 1);

//현재 객체의 material의 색을 1초에 거쳐 green 색으로 변경
material.DOColor(Color.green, 1);

 

 

 

Additional generic ways

 

The generic way, Tye shortcuts way 외에, 더 유연하게 어떤 값이든 트윈할 수 있는 방법들을 의미합니다.

 

//튀는(Punch) 효과를 만들 때 쓰는 트윈
//direction => 방향 및 크기 (new Vector3(1, 0, 0): X축으로 1만큼 펀치효과
//duration => 펀치 애니메이션이 끝날 때까지 걸리는 시간(초)
//vibrato => 진동 횟수, 값이 클수록 진동이 더 많아지고 빠르게 오르락내리락 함
//elasticity => 탄성 정도, 0에 가까울 수록 거의 튀지 않고 1에 가까울 수록 튐
DoTween.Punch(getter, setter, Vector3 direction, float duration, int vibrato, float elasticity)

//흔들림(Shake) 효과를 만들 때 쓰는 트윈
//duration => 흔들림이 지속될 시간(초)
//strength => 흔들림의 강도 (float -> 모든 축에 동일하게 적용, Vector3 -> 각 축마다 다른 강도 적용 가능)
//vibrato => 흔들림 진동 횟수, 값이 클 수록 더 빠르고 많이 흔들림
//randomness => 흔들림 방향, 세기의 강도 (0 -> 완전히 일정, 1 -> 완전히 랜덤)
//ignoreZAxis => Z축 흔들림 무시 여부, true -> Z축 흔들림 없음
DoTween.Shake(getter, setter, float duration, float/Vector3 strength, int vibrato, float randomness, bool ignoreZAxis)

//색(Color)이나 UI 요소의 투명도(Alpha)만 트윈
//to => 목표 투명도 값, 0 -> 완전히 투명, 1 - > 완전히 불투명
//duration => 목표 값으로 변화하기까지 걸리는 시간(초)
DoTween.ToAlpha(getter, setter, float to, float duration)

//배열(Array)의 각 요소를 트윈
//to => 각 구간에서 도달해야 하는 목표값 (배열 길이는 duraiton 배열 길이와 동일해야 함)
//duration => 각 구간의 지속 시간 배열 (배열 길이는 to 배열 길이와 동일해야 함)
DoTween.ToArray(getter, setter, float to, float duration)

//특정 축(Axis)만 트윈
//to => 목표 값, 해당 축의 값만 이 목표로 변화
//duration => 목표 값으로 변화하기까지 걸리는 시간(초)
//axis => 어떤 축을 지정할지 지정 (AxisConstraint.X 등 사용 가능)
DoTween.ToAxis(getter, setter, float to, float duration, AxisConstraint axis)

//시작 값에서 종료 값으로 트윈
//startValue => 트윈 시작값, 명시적으로 시작 값 지정
//endValue => 목표 값
//duration => 목표 값으로 변화하기까지 걸리는 시간(초)
DoTween.To(setter, float startValue, float endValue, float duration)

 

 

DoTween.Sequence()

여러 트윈을 그룹화한 것으로 순차적으로 또는 동시에 실행하는 애니메이션을 제어하는 역할을 합니다.

아래 기본 형식에서 주요 메서드들을 통해 확장해 나갈 수 있습니다.

 

< 시퀀스 선언 >

//기본 선언 형식
Sequence sequence = DOTween.Sequence();

 

 

 

Sequence 주요 메서드

 

● Append(Tween tween): 주어진 트윈을 시퀀스의 끝에 추가합니다. 이전 트윈이 끝난 뒤 실행합니다.

● AppendCallback(TweenCallback callback): 주어진 콜백을 시퀀스의 끝에 추가합니다.

● AppendInterval(float interval): 시퀀스의 끝에 지연 시간 추가합니다. interval초 만큼 아무것도 하지 않고 대기합니다.

● Insert(float atPosition, Tween tween): 시퀀스의 특정 시간 위치(atPosition)에 트윈을 삽입합니다. 시퀀스 시작 기준으로 atPosition초 후에 실행

● InsertCallback(flat atPosition, TweenCallback callback): 시퀀스의 특정 시간 위치에 콜백을 삽입합니다.

● Join(Tween tween): 시퀀스의 현재 구간과 동시에 트윈을 실행합니다. 병렬 트윈을 만들 때 사용합니다.

● Prepend(Tween tween): 시퀀스의 맨 앞에 트윈을 추가합니다. 이때 기존 트윈들은 뒤로 밀려납니다.

● PrependCallback(TweenCallback callback): 시퀀스의 맨 앞에 콜백을 추가합니다.

● PrependInterval(float interval): 시퀀스의 맨 앞에 지연 시간을 추가합니다.

 

< Sequence 메서드 예제 >

//Append(Tween tween)
seq.Append(transform.DOMoveX(5, 1f)); // 1초 후 X 이동

//AppendCallback(TweenCallback callback)
seq.AppendCallback(() => Debug.Log("이동 완료!"));

//AppendInterval(float interval)
seq.AppendInterval(0.5f); // 0.5초 대기

//Insert(float atPosition, Tween tween)
seq.Insert(1f, transform.DOMoveY(3, 1f)); // 1초 후 Y 이동 시작

//InsertCallback(float atPosition, TweenCallback callback)
seq.InsertCallback(2f, () => Debug.Log("2초 후 실행"));

//Join(Tween tween)
seq.Join(transform.DOScale(2, 1f)); // 현재 진행 중인 트윈과 동시에 스케일 변경

//Prepend(Tween tween)
seq.Prepend(transform.DOMoveX(-5, 1f)); // 시퀀스 시작 전에 실행

//PrependCallback(TweenCallback callback)
seq.PrependCallback(() => Debug.Log("시작 전에 실행"));

//PrependInterval(float interval)
seq.PrependInterval(1f); // 시퀀스 시작 전에 1초 대기