[DOTween Pro] 1. DOTween 개념 정리 및 사용법

 

참고(DOTween 공식 문서)

https://dotween.demigiant.com/documentation.php

DOTween - Documentation

 

[DOTween 명명법]

• Tweener: 값을 제어하고 애니메이션화하는 트윈(보간)을 뜻합니다.
• Sequence: 값을 제어하는 대신, 다른 트윈들을 제어하며 그룹으로 애니메이션화하는 특별한 트윈을 의미합니다.
• Tween: Tweener와 Sequence를 모두 포함하는 일반적인 용어입니다.
• Nested tween: Sequence 안에 포함된 트윈을 뜻합니다.

 

위 키워드에 대해서는 후술하도록 한다.

 

[DOTween 사용법 1]

DOTween을 사용하는 방법은 두가지로 나눌 수 있는데

먼저 버전에 상관없이 DOTween에서 기본으로 제공하는 C#코드를 통한 사용법이다.

 

 

개요에서 봤던 것 처럼 물체를 아래로 움직여보도록한다.

 

      using DG.Tweening;

DOTween의 코드를 간결하게 하기 위해서 위와 같이 네임스페이스를 정의해준다.

 

      transform.DOMoveY(-3f, 1f);  

// DOMoveY(y축 이동거리 , 지속시간); 

 

그 다음 움직이고 싶은 오브젝트의 transform을 참조해서 해당 코드를 작성해서 실행시켜본다. 

 

1초동안 -3만큼 이동하는 걸 볼 수 있다.

 

이번에는 색깔을 바꿔보자 

색깔 같은 경우에는 변경하고자 하는 오브젝트의 머터리얼값을 참조하면 된다.

 

        MyMaterial = GetComponent<Renderer>().material;
        MyMaterial.DOColor(new Color(0f, 0f, 0f), 3f);

// DOColor(Color , 지속시간);

 

 

 transform.DOMoveY(-3f, 1f);   와 같이  DOTween함수를 사용해서  

애니메이션을 실행한 것이 처음에 정의한 Tweener를 뜻한다.

 

 

그리고 이러한 Tweener을 제어하는 것을  Sequence라고 하는데 

 

        Sequence MySequence = DOTween.Sequence();
        MyMaterial = GetComponent<Renderer>().material;
        MySequence.Append(MyMaterial.DOColor(new Color(0f, 0f, 0f), 3f));

Sequence를 만든다음 그안에 Tweener을 넣으면

자료구조 queue처럼 선입선출 순서대로 작동된다.

 

예를 들어서 

        Sequence MySequence = DOTween.Sequence();
        MyMaterial = GetComponent<Renderer>().material;  
        MySequence.Append(MyMaterial.DOColor(new Color(0f, 0f, 0f), 1f));
        MySequence.Append(MyMaterial.DOColor(new Color(1f, 1f, 1f), 1f));

이렇게 코드를 작성하면

1) 검정으로 전환

2) 흰색으로 전환

위 단계가 순차적으로 진행 된다.

 

 

 

Sequence 안에 다른 Sequence를 넣을 수도 있다.

 

         Sequence MySequence = DOTween.Sequence();
         Sequence MySequence2 = DOTween.Sequence();
         MyMaterial = GetComponent<Renderer>().material;
1)         MySequence2.Append(MyMaterial.DOColor(new Color(0f, 1f, 0f), 1f));
2-1)         MySequence.Append(MyMaterial.DOColor(new Color(0f, 0f, 0f), 1f));
2-2)         MySequence.Append(MyMaterial.DOColor(new Color(1f, 1f, 1f), 1f));
2)         MySequence2.Append(MySequence);

 

MySequence2 에 들어간 DOColor가 실행되고 뒤이어 MySequence가 실행되는 걸 볼 수 있다.

 

이를 이야기 하는게 위에서 정의한 Nested tween이다.  

 

 

다만 주의해야 할점이 있다면 Sequence에는 몇가지 제약이 존재한다. 

 

제약 중 하나는

you can't reuse the same tween in multiple Sequences 인데

하나의 트윈을 여러 시컨스에 넣으면 안된다는 것이다.

 

즉 유지보수를 위해서든 코드를 쓰기 귀찮아서든

tweener자체를 재 사용해서 여러 Sequence에 사용하지 말도록하자.

 

 

 

DOMoveY 이외에도 다양한 Tweener가 존재하며

Append 이외에도 다양한 Sequence 제어 코드가 존재한다.

 

공식 문서 Creating a Tweener 혹은 Sequence 항목 참고

 

 

 

[DOTween 사용법 2]

 

DOTween은 pro를 사용할 경우 코드 없이도 DOTween을 사용할 수 있다.

Add Component - DOTween (Animation or Path) 를 통해 추가해서 

인스펙터에서 조작시키면 된다.

 

 

이 부분에 대해서도 작성할까 했는데 

영상이 더 빠를 것 같다.

https://dotween.demigiant.com/pro.php

DOTween - Pro

 

 

 

 

 

Ps. 코드이외의 방법으로 Sequence를 관리하는 방법을 찾을 수 없어서

혹시나 아시는 분은 댓글 좀,,