R3 と DOTweenを利用してカンマ区切り数字のアニメーションを作成する
最終更新：
orika_ex_miyako 2025年10月27日(月) 09:46:30履歴
１．概要 
DOTween には Text コンポーネント、あるいは TextMeshPro コンポーネント用に DOCounter メソッドが用意されており、
こちらを利用すると数字間の補間処理によってアニメーションが作成できます。
＜数字のアニメ＞
ただし、DOCounter メソッドではカンマ区切りの数字によるアニメーションは作成できません。
この記事では、カンマ区切りの数字によるアニメーションを作成する方法を紹介します。
<カンマ区切りの数字によるアニメ>
２．環境
・Unity 6000.2.6f2 ・DOTween ・R3(あるいは UniRx)
開発環境により、下記が必要になります。
・DOTween Pro(TextMeshPro 利用の場合)
３．実装例
R3 + DOTween Pro による実装例です。Power(戦力)の値をアニメさせるサンプルになります。
ソースコードは可読性を考慮し、メソッドチェーンのタイミングごとに改行してありますが、こちらは1行、2行にまとめても書いても問題ありません。
また、デバッグしやすいように SerializableReactiveProperty を宣言して利用していますが、ReactiveProperty でも問題ありません。
DOCounter によるカンマ区切りなしのメソッドと、カンマ区切りありのメソッドの両方を記載してあります。
using DG.Tweening;
using R3;
using TMPro;
using UnityEngine;
public class PowerViewSample : MonoBehaviour {
[SerializeField] private TMP_Text txtPower;
[SerializeField] private float duration = 0.5f; // アニメする時間
public SerializableReactiveProperty<int> Power = new(0); // アニメさせる数値
void Start() {
Setup();
}
/// <summary>
/// 初期設定
/// </summary>
public void Setup() {
// 戦力の購読(DOCounter 用に2回分(前回値と新しい値のペアを)キャッシュしてから流す)
Power.Zip(Power.Skip(1), (prevValue, newValue) => (prevValue, newValue))
.Subscribe(pair => DisplayUpdatePowerByComma(pair.prevValue, pair.newValue)).AddTo(this);
// 戦力の初期値設定
Power.OnNext(0);
}
/// <summary>
/// 戦力表示の更新(カンマ区切りなし)
/// </summary>
/// <param name="prevValue"></param>
/// <param name="newValue"></param>
private void DisplayUpdatePower(int prevValue, int newValue) {
// 数字のアニメ表示
txtPower.DOCounter(prevValue, newValue, duration)
.SetEase(Ease.Linear)
.SetLink(gameObject);
}
/// <summary>
/// 戦力表示の更新(カンマ区切りあり)
/// </summary>
/// <param name="prevValue"></param>
/// <param name="newValue"></param>
private void DisplayUpdatePowerByComma(int prevValue, int newValue) {
// カンマ区切りありで、数字のアニメ表示
txtPower.DOCounter(prevValue, newValue, duration)
.SetEase(Ease.Linear)
.SetLink(gameObject)
.OnUpdate(() => {
int current = int.Parse(txtPower.text);
txtPower.text = current.ToString("N0");
});
}
}
なお、こちらの記事では R3(UniRx) を利用して購読処理を行っていますが、通常のメソッド実行方法でも問題ありません。
数字を更新した後のタイミングで DisplayUpdatePowerByComma メソッドを実行してください。
４．オペレータ解説 −Skip オペレータ、Zip オペレータ(R3(UniRx)ー
どちらも、Subscribe の前に設定できるオペレータ(Observableが発行するデータを変換・制御するためのメソッド群)です。
１．Skip オペレータ
Skip(n) は、「最初の n 回のイベントを無視して、その後から流す」機能を持ちます。
＜例＞
Power
.Skip(1)
.Subscribe(value => {
Debug.Log($"変化を検知: {value}");
});
この場合、下記のような動きになります。
| Power.Value | イベント | Skip後の動作 |
| 0 → 10 | 1回目 | 無視 |
| 10 → 20 | 2回目 | 通す（20が出力） |
| 20 → 30 | 3回目 | 通す（30が出力） |
Skip(1)の場合だと、このように最初の値（初期値）は無視して、2つ目の値の変化後から反応したい(処理を流したい)ときに使うことができます。
２．Zip オペレータ
Zip は、「2つのストリームのイベントをペアにして渡す」機能です。
＜例＞
Power
.Zip(Power.Skip(1), (prev, next) => (prev, next))
.Subscribe(pair => {
Debug.Log($"前: {pair.prev}, 後: {pair.next}");
});
この場合の処理の動きです。
| Power.Value | Zipが出すペア |
| 0 → 10 | (0, 10) |
| 10 → 20 | (10, 20) |
| 20 → 30 | (20, 30) |
「前の値」と「新しい値」を同時に扱いたいときに使います。
このようにすると、「前からどれだけ増えたか」などの差分処理が簡単になります。
３．Zip と Skip の組み合わせの意味
上記のように Zip だけでは動かず、Skip(1) と組み合わせることで「前後の値」をペアにできます。
Power.Zip(Power.Skip(1), (prev, next) => (prev, next))
これを3つのパートに分けて解説します。
�．譽掘璽弌�this）：Power（左側のストリーム） ��第1引数（Power.Skip(1)）（右側のストリーム） �Ｂ�2引数（(prev, next) => (prev, next)）（結合処理を行う匿名関数）
�．譽掘璽弌�this）：Power（左側のストリーム）
Power
これは「Zip の左側になるストリーム」（Observable） です。
SerializableReactiveProperty<int> は Power の値が変わるたびに「イベント（通知）」を流します。
この Power のイベントが流れるたびに、「右側のストリーム」と1つずつペアにされます。
例えば次のような変化を考えましょう。
Power.Value = 10; Power.Value = 20; Power.Value = 30;
このとき内部的には、こういう流れが出ています。
Power: [10] → [20] → [30]
つまり Zip の左側のストリームは、「現在値の変化をそのまま流すもの」です。
�� 第1引数：Power.Skip(1)（右側のストリーム）
Power.Skip(1)
Skip(1) は、「最初の1つをスキップして、2回目以降から流す」ストリームを作ります。
先ほどのように、Powerの値が [10] → [20] → [30] と流れる処理があるとしたら、
Power.Skip(1): [20] → [30] （※最初の 10 はスキップされる）
このような制御を行っていることになります。
�Ｂ�2引数（(prev, next) => (prev, next)）（結合処理を行う匿名関数）
ここが一番大事な部分です。
これは「結合処理を行う匿名関数 (resultSelector)」です。
左（レシーバ）の値と右（引数）の値を受け取り、それらを新しい出力に変換します。
このラムダは次のようなシグネチャです。
Func<int, int, (int prev, int next)>
この匿名関数は「Powerの値（左ストリーム）と第1引数（右ストリーム）」から来る値を受け取って、ひとつの出力（新しいデータ）を作ります。
| 左 (Power) | 右 (Power.Skip(1)) | 出力 (prev, next) |
| 10 | 20 | (10, 20) |
| 20 | 30 | (20, 30) |
つまり、
左（prev） … 前の値 右（next） … 新しい値 (prev, next) … それをまとめたタプル（値のペア）
このような処理になります。
なぜ「this Power」が前回値扱いになるのか？ ですが、Zip は「左・右を1対1で同期的に出す」機能なので、
左のストリーム：元の Power（＝古い値） 右のストリーム：Skip(1) で1つずらした Power（＝新しい値）
という対応関係が自然に生まれます。
そのため、Zip の レシーバ（this Power） が “前回値” 扱いになります。
Power: [10] → [20] → [30] Power.Skip(1): [20] → [30] -------------------------------- Zip結果: (10,20) (20,30)
最終的な処理をまとめてみます。
Zip は、左と右が両方とも値を出したときに1回だけ実行されます。
つまり、「2つのストリームを1対1で同期させる」のが Zip の本質です。
Power
// 1. Power の流れを左側に
.Zip(
// 2. 1つずらした流れを右側に
Power.Skip(1),
// 3. 両方を受け取り、(prev, next) というペアを生成
(prev, next) => (prev, next)
)
.Subscribe(pair => {
Debug.Log($"前:{pair.prev}, 後:{pair.next}");
});
なぜこの書き方が便利なのかというと、Zip + Skip(1) によって、「前の値と新しい値のペア」が簡単に取れるためです。
これにより、「どのくらい増えた？」「減った？」「アニメーションの開始値と終了値を知りたい」といった処理を実現できます。
Power: [0] → [10] → [20] → [30] Skip(1): [10] → [20] → [30] Zip結果: (0,10) (10,20) (20,30)
このように「前値と新値をまとめて取得する」ことができます。
DOCounter メソッドの引数には、前回の値と新しい値の2つの値の指定が必要になりますが、
この Skip オペレータと Zip オペレータを組み合わせることにより、Subscribe した際に両方の値を取得して DOCounter メソッドの引数として利用している処理になっています。
まとめ表です。
| 要素 | 内容 | 意味 |
| レシーバ | Power | 変化前（左ストリーム） |
| 第1引数 | Power.Skip(1) | 変化後（右ストリーム） |
| 第2引数 | (prev, next) => (prev, next) | ペア化する結合用の匿名関数（出力データ定義） |
| 結果 | (prev, next) | 「前の値」と「新しい値」のタプル |
５．そのほか
１．アニメの終了後にだけ、カンマ区切りを付けたいケース
OnUpdate メソッドの代わりに OnComplete メソッドを利用してください。
txtPower.DOCounter(prevValue, newValue, duration)
.SetEase(Ease.Linear)
.SetLink(gameObject)
.OnComplete(() => {
txtPower.text = newValue.ToString("N0");
});
このようにすることで、数字のアニメはカンマ区切りなし、数字のアニメ終了後の最終値にのみカンマ区切りをつけることができます。
２．DOCounter メソッド以外での実装ケース
DOTween.TO メソッドは汎用的に利用できます。そのため今回のようなカンマ区切り数字のアニメにも利用可能です。
int currentValue = prevValue;
DOTween.To(() => currentValue, x => {
currentValue = x;
txtPower.text = currentValue.ToString("N0"); // ← カンマ区切り
}, newValue, duration)
.SetEase(Ease.Linear)
.SetLink(gameObject);
こちらの実装方法でも、DisplayUpdatePowerByComma メソッド内で利用している、DOCounter メソッド ＋ OnUpdate メソッドと同じ処理が作成できます。
６．参考サイト
DOTween 関連のサイトです。
Demigiant 公式ドキュメント
DOTween - Documentation - DEMIGIANT
https://dotween.demigiant.com/documentation.php
アマガミナブログ 様
DOTweenの使い方 Tweenアニメーション入門【Unity】
https://amagamina.jp/blog/how-to-dotween/
Qiita @BEATnonanka 様
DOTween完全に理解するその6 イベント編
https://qiita.com/BEATnonanka/items/a8c63df029f45e...
以上になります。
コメントをかく