DOTweenで文字列全体のメソッドを使うと各文字に反映した操作がリセットされる話

DOTweenでテキストをアニメーションさせたときに罠に嵌ったので備忘録として残しておきます。

DOTweenProで一文字のみアニメーションさせる操作DOTweenTMPAnimator.DO○○Char()で文字を変化させた後テキスト全体をアニメーションさせるメソッドを使用したところ、一文字単位でのアニメーションの操作が元に戻ってしまいました。下では「T」を拡大しながら青色にアニメーションさせた後、テキスト全体をフェードアウトさせる処理をしていますが、フェードアウト時に「T」の変更が元に戻っています。 f:id:sh00t:20210914203853g:plain

コードはこんな感じ

Sequence sequence = DOTween.Sequence();
sequence.Append(
    tmpAnimator.DOScaleChar(4, 1.5f, 1)
        .SetEase(Ease.Linear)
);
sequence.Join(
    tmpAnimator.DOColorChar(4, Color.blue, 2)
        .SetEase(Ease.Linear)
);
sequence.Append(_textMeshProUGUI.DOFade(0, 1));

テキスト全体に一文字ずつ操作をすることで変更を残しつつ全体をアニメーションできます。

Sequence sequence = DOTween.Sequence();
sequence.Append(
    tmpAnimator.DOScaleChar(4, 1.5f, 1)
        .SetEase(Ease.Linear)
);
sequence.Join(
    tmpAnimator.DOColorChar(4, Color.blue, 2)
        .SetEase(Ease.Linear)
);
sequence.AppendInterval(1);
for (var i = 0; i < tmpAnimator.textInfo.characterCount; i++)
{
    sequence.Join(tmpAnimator.DOFadeChar(i, 0, 1));
}

f:id:sh00t:20210914203856g:plain