Unity에서 DOTween은 게임 오브젝트의 위치, 회전, 크기, 색상, UI 값 등을 시간에 따라 자연스럽게 변화시키는 Tweening 라이브러리다.
핵심은 단순하다.
현재 값 → 목표 값 → 걸리는 시간
예를 들어 오브젝트를 1초 동안 (10, 0, 0)으로 이동시키고 싶다면:
transform.DOMoveX(10f, 1f);
이 한 줄이면 된다.
DOTween이란?
일반적으로 애니메이션을 코드로 직접 만들면 이런 식으로 처리해야 한다.
transform.position = Vector3.Lerp(
startPosition,
targetPosition,
elapsedTime / duration
);
DOTween을 사용하면:
transform.DOMove(targetPosition, duration);
으로 끝난다.
DOTween이 시간 관리, 보간, 업데이트 등을 처리한다.
설치
가장 일반적인 방법은 Unity Asset Store 또는 Package Manager를 통해 DOTween을 프로젝트에 추가하는 것이다.
설치 후 코드에서:
using DG.Tweening;
을 사용한다.
기본 사용법
이동
transform.DOMove(
new Vector3(10f, 0f, 0f),
1f
);
현재 위치에서 (10, 0, 0)까지 1초 동안 이동한다.
축 하나만 움직일 수도 있다.
transform.DOMoveX(10f, 1f);
transform.DOMoveY(5f, 1f);
transform.DOMoveZ(3f, 1f);
로컬 좌표 기준이라면:
transform.DOLocalMove(targetPosition, 1f);
회전
transform.DORotate(
new Vector3(0f, 180f, 0f),
1f
);
1초 동안 Y축으로 180도 회전한다.
상대적으로 회전시키려면:
transform.DORotate(
new Vector3(0f, 180f, 0f),
1f,
RotateMode.FastBeyond360
);
Scale
transform.DOScale(
Vector3.one * 2f,
0.5f
);
0.5초 동안 크기를 2배로 만든다.
특정 축만:
transform.DOScaleX(2f, 0.5f);
UI 애니메이션
DOTween의 강력한 부분 중 하나다.
예를 들어 UI 패널을 오른쪽으로 이동시키려면:
RectTransform rect = GetComponent<RectTransform>();
rect.DOAnchorPosX(500f, 0.5f);
CanvasGroup을 이용하면 페이드도 쉽게 만들 수 있다.
CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
canvasGroup.DOFade(0f, 0.5f);
다시 나타나게:
canvasGroup.DOFade(1f, 0.5f);
색상 변경
SpriteRenderer:
spriteRenderer.DOColor(Color.red, 0.5f);
UI Image:
image.DOColor(Color.red, 0.5f);
Text 애니메이션
TextMeshPro도 지원한다.
using TMPro;
using DG.Tweening;
TMP_Text text;
text.DOColor(Color.red, 0.5f);
숫자 같은 값을 애니메이션시키는 것도 가능하다.
int value = 0;
DOTween.To(
() => value,
x => value = x,
100,
1f
);
Ease
DOTween을 사용하는 가장 중요한 이유 중 하나다.
그냥 선형으로 움직이면:
──────────────>
속도가 일정하다.
하지만 실제 UI나 게임 애니메이션에서는 보통 가속/감속이 필요하다.
transform.DOMoveX(10f, 1f)
.SetEase(Ease.OutQuad);
대표적인 Ease:
Ease.Linear
Ease.InQuad
Ease.OutQuad
Ease.InOutQuad
Ease.InCubic
Ease.OutCubic
Ease.InOutCubic
Ease.InBack
Ease.OutBack
Ease.InBounce
Ease.OutBounce
Ease.InElastic
Ease.OutElastic
예를 들어 버튼이 튀어나오는 느낌:
transform.DOScale(1.2f, 0.3f)
.SetEase(Ease.OutBack);
Sequence
DOTween의 핵심 기능이다.
여러 Tween을 순서대로 실행할 수 있다.
Sequence sequence = DOTween.Sequence();
sequence.Append(
transform.DOMoveX(5f, 1f)
);
sequence.Append(
transform.DOMoveY(3f, 0.5f)
);
sequence.Append(
transform.DOScale(2f, 0.5f)
);
순서:
Move X
↓
Move Y
↓
Scale
동시에 실행하기
Join()을 사용한다.
Sequence sequence = DOTween.Sequence();
sequence.Append(
transform.DOMoveX(5f, 1f)
);
sequence.Join(
transform.DOScale(2f, 1f)
);
그러면:
Move X ──────────────>
Scale ──────────────>
두 개가 동시에 실행된다.
일정 시간 기다리기
AppendInterval():
Sequence sequence = DOTween.Sequence();
sequence.Append(
transform.DOMoveX(5f, 1f)
);
sequence.AppendInterval(1f);
sequence.Append(
transform.DOMoveX(0f, 1f)
);
결과:
이동
↓
1초 대기
↓
복귀
콜백
Tween이 끝났을 때 코드를 실행할 수도 있다.
transform.DOMoveX(10f, 1f)
.OnComplete(() =>
{
Debug.Log("이동 완료");
});
시작할 때:
transform.DOMoveX(10f, 1f)
.OnStart(() =>
{
Debug.Log("시작");
});
업데이트마다:
transform.DOMoveX(10f, 1f)
.OnUpdate(() =>
{
Debug.Log(transform.position);
});
반복
transform.DOMoveX(10f, 1f)
.SetLoops(3);
3번 반복한다.
무한 반복:
transform.DOMoveX(10f, 1f)
.SetLoops(-1);
Yoyo:
transform.DOScale(2f, 0.5f)
.SetLoops(-1, LoopType.Yoyo);
결과:
1
↓
2
↓
1
↓
2
↓
...
UI 강조 효과 등에 상당히 유용하다.
Tween 제어
Tween 자체를 변수로 받을 수 있다.
Tween tween;
tween = transform.DOMoveX(10f, 1f);
그리고:
tween.Pause();
tween.Play();
tween.Kill();
tween.Restart();
tween.Complete();
tween.Rewind();
Kill
실무에서 매우 중요하다.
예를 들어 버튼을 여러 번 클릭해서 같은 Tween을 계속 생성하면 문제가 생길 수 있다.
transform.DOMoveX(10f, 1f);
이걸 반복 호출하면 Tween이 여러 개 생성될 수 있다.
그래서 기존 Tween을 제거하고 새 Tween을 시작하는 식으로 작성할 수 있다.
transform.DOKill();
transform.DOMoveX(10f, 1f);
또는 Tween을 변수로 관리:
private Tween moveTween;
void Move()
{
moveTween?.Kill();
moveTween = transform.DOMoveX(10f, 1f);
}
ID를 사용하는 방법
Tween에 ID를 지정할 수도 있다.
transform.DOMoveX(10f, 1f)
.SetId("PlayerMove");
나중에:
DOTween.Kill("PlayerMove");
해당 ID의 Tween을 제거할 수 있다.
게임 오브젝트가 파괴될 때
보통 DOTween은 대상이 파괴되면 관련 Tween도 적절히 정리되지만, 명시적으로 관리하고 싶다면:
Tween tween;
void Start()
{
tween = transform.DOMoveX(10f, 1f);
}
void OnDestroy()
{
tween?.Kill();
}
다만 일반적인 Unity 코드에서는 DOTween의 대상 기반 관리에 맡기는 경우도 많다.
Relative
현재 위치를 기준으로 이동하고 싶다면:
transform.DOMoveX(5f, 1f)
.SetRelative();
현재 X가 10이라면:
10 → 15
현재 X가 20이라면:
20 → 25
From
목표 위치에서 현재 위치로 들어오는 연출도 가능하다.
transform.DOMoveX(0f, 1f)
.From(10f);
개념적으로:
10 → 0
UI 등장 연출에서 상당히 자주 사용한다.
UI 패널 등장 예제
예를 들어 메뉴가 아래에서 위로 올라오는 연출이라면:
[SerializeField]
private RectTransform panel;
public void Show()
{
panel.DOAnchorPosY(0f, 0.5f)
.SetEase(Ease.OutCubic);
}
닫기:
public void Hide()
{
panel.DOAnchorPosY(-800f, 0.5f)
.SetEase(Ease.InCubic);
}
버튼 클릭 애니메이션
버튼을 눌렀을 때 작아졌다가 다시 돌아오게 만들 수 있다.
public void OnClick()
{
transform.DOScale(0.9f, 0.1f)
.SetEase(Ease.OutQuad)
.OnComplete(() =>
{
transform.DOScale(1f, 0.1f);
});
}
Sequence로 만드는 게 더 깔끔하다.
public void OnClick()
{
DOTween.Sequence()
.Append(transform.DOScale(0.9f, 0.1f))
.Append(transform.DOScale(1f, 0.1f));
}
Sequence + UI의 실전 예제
public void Show()
{
CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
transform.localScale = Vector3.zero;
canvasGroup.alpha = 0f;
DOTween.Sequence()
.Append(
canvasGroup.DOFade(1f, 0.2f)
)
.Join(
transform.DOScale(
Vector3.one,
0.4f
).SetEase(Ease.OutBack)
);
}
결과:
Alpha : 0 → 1
Scale : 0 → 1
동시에 실행
게임 UI에서는 이런 식으로 상당히 많이 사용한다.
DOTween에서 알아둬야 할 핵심
DOTween을 처음 배울 때 모든 API를 외울 필요는 없다.
실제로는 다음 정도만 제대로 알면 된다.
DOMove
DOLocalMove
DORotate
DOScale
DOFade
DOColor
DOAnchorPos
SetEase
SetDelay
SetLoops
SetRelative
OnComplete
OnStart
Sequence
Append
Join
AppendInterval
Play
Pause
Kill
Restart
그리고 가장 중요한 개념은 이것이다.
Tween
↓
Sequence
↓
Callback
↓
Lifecycle 관리
즉 DOTween을 단순히
transform.DOMove(...);
하는 라이브러리로만 보면 활용도가 낮다.
실제로는 게임의 연출을 코드로 조립하는 시스템으로 보는 게 맞다.
특히 Unity에서는
UI 등장/퇴장
버튼 피드백
데미지 텍스트
HP 변화
카메라 연출
오브젝트 이동
스킬 이펙트
몬스터 피격
팝업
슬라이드 메뉴
페이드
숫자 카운트
같은 것들을 DOTween으로 상당히 빠르게 구성할 수 있다.