DOTween 기초 정리

이재구·2026년 3월 9일

DOTween 기초 정리


목차

  1. Lesson 01 · 기본 트윈 4가지
  2. Lesson 02 · Ease — 속도 곡선
  3. Lesson 03 · Sequence — 연출 조합
  4. Lesson 04 · Callbacks & Control — 제어
  5. Lesson 05 · UI Tween — UI 전용
  6. 공통 팁

Lesson 01 · 기본 트윈 4가지

DOTween의 가장 기본적인 메서드 4가지입니다.

// 이동
transform.DOMove(new Vector3(3f, 2f, 0f), duration);

// 크기
transform.DOScale(new Vector3(2f, 2f, 2f), duration);

// 회전
transform.DORotate(new Vector3(0f, 180f, 0f), duration);

// 360도 이상 회전 → RotateMode.FastBeyond360 필수!
transform.DORotate(new Vector3(0f, 720f, 0f), duration, RotateMode.FastBeyond360);

주의: RotateMode.FastBeyond360 없이 720f를 넣으면, DOTween이 최단경로로 판단해서 거의 안 돌 수 있어요.

// 투명도 — SpriteRenderer
GetComponent<SpriteRenderer>().DOFade(0f, duration);

// 투명도 — UI Image
GetComponent<Image>().DOFade(0f, duration);

Lesson 02 · Ease — 속도 곡선

Ease는 애니메이션의 속도 변화 곡선입니다.

transform.DOMove(목표, 시간).SetEase(Ease.OutBounce);
종류느낌
Linear일정한 속도
OutQuad빠르게 시작 → 부드럽게 멈춤 (UI에 자주 사용)
OutBounce통통 튀는 느낌
OutElastic탄성 있게 늘어났다가 제자리
InOutBack살짝 뒤로 갔다가 목표로 이동
InExpo느리다가 확 튀어나감
  • In → 처음에 느리게 시작
  • Out → 끝에 느리게 마무리
  • InOut → 양쪽 다 완만하게

반복 (SetLoops)

.SetLoops(-1, LoopType.Yoyo);    // 무한 왕복
.SetLoops(-1, LoopType.Restart); // 무한 처음부터

-1은 무한 반복, 숫자를 넣으면 그 횟수만큼만 반복해요.


Lesson 03 · Sequence — 연출 조합

여러 트윈을 순서대로, 또는 동시에 실행할 때 사용합니다.

Sequence seq = DOTween.Sequence();

// Append : 이전 트윈이 끝난 후 다음 시작
seq.Append(transform.DOMove(...));
seq.Append(transform.DOScale(...));

// Join : 직전 Append와 동시에 실행
seq.Append(transform.DOMove(...));
seq.Join(transform.DOScale(...)); // 이동하면서 동시에 크기도 변함

// Insert : 특정 시각(초)에 트윈 삽입
seq.Insert(1f, transform.DOScale(2f, 0.5f)); // 1초 시점에 실행

// 딜레이
seq.AppendInterval(0.3f);

// 완료 콜백
seq.OnComplete(() => Debug.Log("완료!"));

Lesson 04 · Callbacks & Control — 제어

트윈의 시작, 진행, 완료 시점에 콜백을 등록하고, 트윈을 직접 제어할 수 있어요.

Tween t = transform.DOMove(...)
    .OnStart(()    => Debug.Log("시작!"))
    .OnUpdate(()   => Debug.Log($"{t.ElapsedPercentage()*100:F0}%"))
    .OnComplete(() => Debug.Log("완료!"))
    .OnKill(()     => Debug.Log("Kill됨"));
// 트윈 제어
t.Pause();      // 일시정지
t.Play();       // 재개
t.Restart();    // 처음부터 다시
t.Kill();       // 강제 종료 (OnKill 호출됨)
t.Complete();   // 즉시 완료 상태로 점프

오브젝트 파괴 시 반드시 Kill 처리

void OnDestroy() {
    t?.Kill();
    // 또는 이 transform에 연결된 모든 트윈 Kill
    DOTween.Kill(transform);
}

Lesson 05 · UI Tween — UI 전용

UI는 DOMove 대신 DOAnchorPos를 사용해야 합니다.

// anchoredPosition 이동
rectTransform.DOAnchorPos(endPos, 0.6f).SetEase(Ease.OutBack);

팝업 등장 (Scale + Fade 동시)

transform.localScale = Vector3.zero;
image.color = new Color(1, 1, 1, 0);

var seq = DOTween.Sequence();
seq.Append(transform.DOScale(1f, 0.4f).SetEase(Ease.OutBack));
seq.Join(image.DOFade(1f, 0.3f));

색상 루프

image.DOColor(Color.red, 0.5f).SetLoops(-1, LoopType.Yoyo);

숫자 카운팅 (점수판 등)

float val = 0f;
DOTween.To(
    () => val,
    v  => { val = v; text.text = Mathf.RoundToInt(v).ToString("N0"); },
    9999f, 2f
).SetEase(Ease.OutExpo);

기타 유용한 UI 메서드

rectTransform.DOSizeDelta(new Vector2(300, 100), 0.5f); // 크기 변경
rectTransform.DOPunchAnchorPos(new Vector2(10, 0), 0.3f); // 진동
rectTransform.DOShakeAnchorPos(0.5f, 20f);               // 흔들기

추가

체이닝 (메서드 연결)

transform.DOMove(pos, 1f)
    .SetEase(Ease.OutBack)
    .SetLoops(2, LoopType.Yoyo)
    .SetDelay(0.5f)
    .OnComplete(() => { });

Punch / Shake

// 버튼 클릭 느낌
transform.DOPunchScale(Vector3.one * 0.6f, 0.6f, 8, 0.5f);

// 피격 느낌
transform.DOShakePosition(0.8f, 0.6f, 15, 90f);

profile
프로그래머 취업 준비

0개의 댓글