오늘은 프로젝트에 사용할 UI를 만드려고 하는데, UI에 애니메이션을 넣기 위해 DOTween을 사용하려고 한다.

---

DOTween이 무엇인지는 아래 링크를 통해 확인하자.

링크 : DOTween이란?

[Sequence란?]

Sequence는 여러개의 Tween을 순서대로 또는 동시에 실행하기 위해 사용하는 애니메이션 컨트롤러이다. 즉, 여러 애니메이션을 연결해서 하나의 동작처럼 다루고 싶을 때 사용하는 타임라인 시스템이라고 할 수 있다.

<주요 함수>

메서드	기능
Append(tween)	시퀀스에 순차적으로 다음 트윈을 추가
Join(tween)	현재 트윈과 동시에 실행되도록 추가
Insert(time,tween)	시퀀스 내 특정 시간에 삽입
AppendInterval(seconds)	지정 시간만큼 대기
OnComplete(callback)	시퀀스 전체가 끝나면 콜백 실행
SetEase(...)	전체 시퀀스 또는 특정 트윈의 이징 지정

이제 시퀀스를 활용해서 슬롯 UI를 만들어보자.

슬롯 이미지

내가 만드려는 슬롯은 위와 같이 두개의 슬롯이 존재하고, 슬롯 왼쪽에 존재하는 버튼을 누르면 노란색 화살표 방향으로 슬롯이 이동하면서 두 슬롯의 위치가 교환되는 슬롯이다.

using DG.Tweening;
using UnityEngine;

public class SlotsUI : MonoBehaviour
{
    public CanvasGroup magicGroup;
    public CanvasGroup monsterGroup;
    public RectTransform magicGroupTransform;
    public RectTransform monsterGroupTransform;
    public RectTransform magicSlotTransform;
    public RectTransform monsterSlotTransform;
    public float duration;
    public float arcHeight;

    private bool isChange = false;

    private QueenController controller;

    private void Start()
    {
        controller = GameManager.Instance.queen.controller;
        InitOrder();
    }

    private void InitOrder()
    {
        monsterGroupTransform.SetAsLastSibling();
        monsterGroup.alpha = 1f;
        magicGroup.alpha = 0.5f;
    }

    // 버튼에 등록할 함수. 버튼을 누르면 몬스터슬롯과 권능 슬롯이 변경됨
    public void OnChangeSlots()
    {
        if (isChange)
        {
            return;
        }

        isChange = true;

        Vector3 magicPos = magicSlotTransform.localPosition;
        Vector3 monsterPos = monsterSlotTransform.localPosition;

        Vector3[] magicPath = CreateArc(magicPos, monsterPos, controller.slot == QueenSlot.MONSTER ? arcHeight : -arcHeight);
        Vector3[] monsterPath = CreateArc(monsterPos, magicPos, controller.slot == QueenSlot.MONSTER ? -arcHeight : arcHeight);

        Sequence seq = DOTween.Sequence();

        // 시작할 때
        seq.Append(magicSlotTransform.DOLocalPath(magicPath, duration, PathType.CatmullRom).SetEase(Ease.InOutQuad))
           .Join(monsterSlotTransform.DOLocalPath(monsterPath, duration, PathType.CatmullRom).SetEase(Ease.InOutQuad));

        // 포물선 최고점에 이르렀을 때
        seq.InsertCallback(duration / 2f, SetOrder);

        // 끝날 때
        seq.OnComplete(CheangeEnd);
    }

    // 슬롯의 순서를 바꿈. 현재 선택된 슬롯이 아니면 반 투명해지면서 현재슬롯에 가려지도록 렌더링 순서 변경
    private void SetOrder()
    {
        if (controller.slot == QueenSlot.MONSTER)
        {
            monsterGroupTransform.SetAsFirstSibling();
            magicGroup.DOFade(1f, 0.2f);
            monsterGroup.DOFade(0.5f, 0.2f);
        }
        else if (controller.slot == QueenSlot.MAGIC)
        {
            monsterGroupTransform.SetAsLastSibling();
            magicGroup.DOFade(0.5f, 0.2f);
            monsterGroup.DOFade(1f, 0.2f);
        }
    }

    // 슬롯 변경이 끝날 때 호출. 현재 슬롯의 상태를 바꿔줌
    private void CheangeEnd()
    {
        controller.slot = controller.slot == QueenSlot.MONSTER ? QueenSlot.MAGIC : QueenSlot.MONSTER;
        isChange = false;
    }

    // 포물선을 만들어주는 함수
    private Vector3[] CreateArc(Vector3 start, Vector3 end, float height)
    {
        Vector3 mid = (start + end) / 2f;
        mid.y += height;
        return new Vector3[] { start, mid, end };
    }
}

슬롯이 변경되는 코드의 전문인데 다른 부분은 빼고 시퀀스를 사용하는 부분을 보자.

Sequence seq = DOTween.Sequence();

// 시작할 때
seq.Append(magicSlotTransform.DOLocalPath(magicPath, duration, PathType.CatmullRom).SetEase(Ease.InOutQuad))
   .Join(monsterSlotTransform.DOLocalPath(monsterPath, duration, PathType.CatmullRom).SetEase(Ease.InOutQuad));

// 포물선 최고점에 이르렀을 때
seq.InsertCallback(duration / 2f, SetOrder);

// 끝날 때
seq.OnComplete(CheangeEnd);

간단하게 설명하면

1. Append와 Join을 사용해서 두 슬롯의 위치를 옮긴다.
2. InsertCallback을 포물선 최고점에 이르렀을 때 두 슬롯의 앞 뒤 상태를 바꾼다.
3. OnComplete를 사용해서 시퀀스가 끝났을 때 처리할 함수를 호출한다.

이런식으로 시퀀스를 사용해서 여러 동작을 연결해서 하나의 동작처럼 수행할 수 있다.