DOTween を使ったアニメ演出を複数実装しています。
アニメのパターン、時間、Ease の設定などを自由に変更して、どの処理によってどのアニメが連動しているかをしっかりと理解しておいてください。
DOTween の処理は非同期処理になります。そのため、プログラム上、1秒かけて移動する、という DOTween の処理があった場合、
そ
の時間を待つことなく、次の処理が実行されます。よって、
複数の DOTween の処理を続けてかくと、すべて同じタイミングで処理されてしまいます。
DOTween の処理を1つずつ、処理が終わってから次の DOTween の処理を行うために、DOTween には
Sequence(シーケンス)という機能が用意されています。
Sequence に用意されている Append(アペンド) メソッドを活用することにより、
Append メソッドの引数に指定した DOTween の処理が終了してから、
次の Append メソッドの引数に指定している DOTween の処理を実行する、という処理が実装出来ます。
そのため、今回の場合には、次のようなアニメ演出を順番に1つずつ処理したいため、Append メソッドを活用して処理を記述しています。
<リザルトの表示処理の順番>
1.Canvas 表示。この時点では Result の文字だけ出る
2.リザルト表示用のフレームをアニメ表示(横方向に伸ばす)
3.EXP 表示
4.EXP 加算アニメ
5.コンボ数 表示
6.コンボ数 加算アニメ
これをすべて一緒に処理せずに、
上から順番に、前の処理が終了してから次の DOTween の処理を実行するようにしています。
実装動画も確認してみて、イメージをつかんでください。
処理の内容を理解しながら、プログラムを書いていってください。
新しい DOTweeen のメソッドもいくつか出てきていますので、自分で調べてみましょう。
NormalResultCancas.cs
<= クリックすると開きます
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
public class NormalResultCancas : MonoBehaviour
{
[SerializeField]
private Text txtExp;
[SerializeField]
private Text txtTotalComboCount;
[SerializeField]
private RectTransform imgBackFrameRect;
[SerializeField]
private CanvasGroup canvasGroupResult;
[SerializeField]
private CanvasGroup canvasGroupExpSet;
[SerializeField]
private CanvasGroup canvasGroupTotalComboCountSet;
/// <summary>
/// リザルト表示
/// </summary>
/// <param name="exp"></param>
/// <param name="totalComboCount"></param>
public void DisplayResult(int exp, int totalComboCount) {
// 一旦すべて非表示にする
canvasGroupResult.alpha = 0;
canvasGroupExpSet.alpha = 0;
canvasGroupTotalComboCountSet.alpha = 0;
imgBackFrameRect.sizeDelta = new Vector2(0, 355);
Sequence sequence = DOTween.Sequence();
// Canvas 表示。この時点では Result の文字だけ出る
sequence.Append(canvasGroupResult.DOFade(1.0f, 0.5f).SetEase(Ease.Linear));
// リザルト表示用のフレームをアニメ表示(横方向に伸ばす)
sequence.Append(imgBackFrameRect.DOSizeDelta(new Vector2(2000, 355), 0.5f).SetEase(Ease.OutQuart));
// EXP 表示
sequence.Append(canvasGroupExpSet.DOFade(1.0f, 0.5f));
// EXP 加算アニメ
sequence.Append(txtExp.DOCounter(0, exp, 0.5f).SetEase(Ease.InQuart));
// コンボ数 表示
sequence.Append(canvasGroupTotalComboCountSet.DOFade(1.0f, 0.5f));
// コンボ数 加算アニメ
sequence.Append(txtTotalComboCount.DOCounter(0, totalComboCount, 0.5f).SetEase(Ease.InQuart));
}
}