DOTweenで指定の値 “から” 現在の値までを補間する方法

解説

DOTweenでは基本的に、現在の値から指定の値までを補間します。

例えば以下のように書いた場合、現在の座標から指定した座標(1, 2, 3)まで補間しながら移動します。

// 指定した座標(1, 2, 3)まで4秒かけて移動
transform.DOMove(new Vector3(1, 2, 3), 4);

 

しかし、逆に現在の値をゴールとして、指定した値から現在の値までを補間することもDOTweenでは簡単にできます。

 

From()

方法は極めて簡単で、Tweenerの後に.From()をつけるだけ。

 

例えば以下のように書くと、指定した座標(1, 2, 3)から現在の座標まで補間しながら移動します。

// 指定した座標(1, 2, 3)から4秒かけて移動
transform.DOMove(new Vector3(1, 2, 3), 4).From();

 

Tweenerが実行される際に、まず指定座標(1, 2, 3)に瞬間移動し、それから元いた座標まで移動するという挙動になります。

Awake時に指定座標に移動するわけではないことには注意。

 

使い所

比較的使われることは少ないかもしれませんが、始点が1つ決まっていて終点が複数ある(もしくは完成形をUnityエディタ上で配置したい)場合に便利です。

 

例えば4つの円が中央から4方向に広がるアニメーションの場合。

From()を使わない場合は最初に4つの円を中央に置いておき、4つそれぞれに目的地を指定しなければなりません。

// 例えばこんな感じ
circles[0].transform.DOMove(new Vector3(1, 0), 3);
circles[1].transform.DOMove(new Vector3(0, 1), 3);
circles[2].transform.DOMove(new Vector3(-1, 0), 3);
circles[3].transform.DOMove(new Vector3(0, -1), 3);

 

From()を使う場合は、最初に4つの円を目的地に置いておくことで、以下のように共通のTweenerで実装することができます。

// 中央(0, 0)から最初の位置まで動く
for(var circle in circles){
  circle.transform.DOMove(new Vector3(0, 0), 3).From();
}

 

今回の例のように規則的な配置をしているのであれば、需要はそれほどないかもしれません。(From()を使わない場合でも三角関数を使って目的地を指定すれば、共通のTweenerで実装できる)

// 三角関数を使って共通化
for (var i = 0; i < circles.Length; i++){
  var angle = i * 2 * Mathf.PI / circles.Length;
  circles[i].transform.DOMove(new Vector3(Mathf.Cos(angle), Mathf.Sin(angle)), 3);
}

 

ただそうではない場合は、Unityエディタ上で完成形を配置しておいて、ある場所から移動させるというのが便利なこともよくあります。

実行前から完成形を確認できる、というのも開発上メリットかもしれません。

コメント

タイトルとURLをコピーしました