Unity - DoTween으로 애니메이션 상에서 텍스트에 효과 적용하기

 

목차

• 텍스트 애니메이션 함수 DOText()
• 애니메이션에서 이벤트 함수로 DOText() 실행하기

 

 

---

 

텍스트 애니메이션 함수 DOText()

DOTween 은 DOText() 라는 텍스트 애니메이션용 메소드를 가지고 있습니다. 이 메소드를 활용해서, 텍스트 애니메이션 효과를 애니메이션에서 호출할 수 있게끔 만들어 보려고 합니다!

먼저 DOTween 공식 문서의 Text 단락을 참고해서 DOText() 함수가 어떻게 구성되어 있는지 살펴보겠습니다. DOTween 관련 세부 정보가 더 궁금하시다면 공식 문서를 살펴보시는 것을 추천드려요.

 

DOTween 공식 문서 중 Text 부분

 

• string to : 애니메이션되어 변경될 텍스트 변수입니다. 현재 텍스트가 abc 이고, to 변수가 def 라면, DOText 애니메이션이 플레이되면 텍스트는 abc 에서 def 로 변경되게 됩니다.
• float duration : 애니메이션이 재생되는 시간
• bool richTextEnabled : Text 에 richtext 효과가 적용되는지 여부
• ScrambleMode scrambleMode : 텍스트에 스크램블 애니메이션을 적용할지 여부와, 어떤 방식으로 적용할지를 결정합니다.
  • All : 스크램블 효과에 모든 글자가 등장합니다. (대소문자와 숫자)
  • Uppercase / Lowercas : 스크램블 효과에 대문자 / 소문자만 등장합니다.
  • Numerals : 스크램블 효과에 숫자만 등장합니다.

 

스크램블 애니메이션

 

다른 DOTween 애니메이션 함수들과 같이, .SetEase() 메소드를 사용해 애니메이션을 어떻게 보간 (Ease In-Out 등과 같이) 할지 설정해줄 수 있습니다. 참고로, DOTween 애니메이션은 별도의 .SetEase 설정이 없다면 OutQuad 보간이 기본적으로 적용되고 있습니다.

 

DOTween 애니메이션의 기본 Ease 값

 

 

---

 

애니메이션에서 이벤트 함수로 DOText() 실행하기

먼저 애니메이션 상에서 호출이 가능하도록, 이벤트 함수로 사용될 스크립트를 작성해줘야 합니다. 여러 개의 애니메이션을 조작할 수 있게 하고, 애니메이션될 텍스트 및 속성들을 인스펙터에서 설정할 수 있게 하기 위해 Serializable class 를 별도로 만들었습니다.

추가로, null 상태에서 텍스트가 하나씩 출력되게 하고 싶어서 텍스트 값을 temp 변수에 임시로 저장하고 초기화한뒤, DOText 함수를 통해 텍스트가 서서히 나타나는 방식으로 코드를 작성했습니다.

만약 TMP에 적용해야 한다면, animatedText 변수의 타입을 TextMeshProUGUI (UI가 아닐경우 UGUI 빼기) 로 변경해서 사용하시면 되겠습니다. (DOTween Pro 에서만 TMP 타입의 DOText 메소드 사용이 가능합니다!)

 

[System.Serializable]
public class UIAnimatedTextGroup
{
    public Text animatedText;
    public float animTime = 1;
    public ScrambleMode scrambleMode = ScrambleMode.None;
    public Ease easing = Ease.Linear;
    public bool isTimePerChar = false;
}

[ExecuteInEditMode]
public class UITextAnimation : MonoBehaviour
{
    [SerializeField] private UIAnimatedTextGroup[] textGroups;

    private string temp = null;


    public void ClearTextBeforeAnimated(int animNum)
    {
        UIAnimatedTextGroup textGroup = textGroups[animNum];

        if (textGroup != null)
        {
            temp = textGroup.animatedText.text;
            textGroup.animatedText.text = null;
        }
    }

    public void AnimateText(int animNum)
    {
        UIAnimatedTextGroup textGroup = textGroups[animNum];

        if (textGroup != null)
        {
            float duration = textGroup.animTime;

            if(textGroup.isTimePerChar)
                duration *= temp.Length;

            textGroup.animatedText.DOText(temp, duration, true, textGroup.scrambleMode).SetEase(textGroup.easing);
        }
    }
}

 

스크립트를 적용한 예시

 

스크립트를 적용하고 애니메이션에서 호출해본 예시입니다. 인스펙터의 프로퍼티들은 아래와 같은 기능을 해요.

• Anim Time : 애니메이션되는 총 시간 (Is Time Per Char 체크 시 한 글자당 애니메이션 시간)
• Scramble Mode : 윗 단락에서 다루었던 스크램블되는 모드들을 선택
• Easing : 애니메이션 보간 방식 설정
• Is Time Per Char : 체크할 경우, Anim Time의 적용 방식 변경

애니메이션되는 텍스트가 여러가지일 경우, Text Group 에 요소를 추가하고, 이벤트 함수의 파라미터로 해당 애니메이션의 번호 (Element 'n') 값을 넣어주면 됩니다!