想定(実装)する動作
このように特定のメソッドが呼び出されたら指定した時間トゥイーンする機能を実装する。
実装に際して必要な考え方
ある始点aと終点bがあり、ある時間tかけて始点aから終点bへアニメーションする。この時必要な式は以下の通り。
t1 = {(1 - t) * a} + (t * b)
(0 <= t <= 1) [sec]
実際に想定通りに機能したコード
今回はdurationと始点、終点加えてイージングモードを指定してその通りに動作する機能を実装したいので [SerializedFeild]
属性でdurationと始点と終点を指定できるようにする。ここではUIをトゥイーンさせるので、始点と終点はRectTransform
型、duration(間隔)にはfloat
型を使った。まず最初に書いたコード。
_elapsedTime += Time.deltaTime;
float t;
// ~中略~ ここでtへ値の代入をしている
float xPos = (1 - t) * _startRect.position.x + t * _goalRect.position.x;
float yPos = (1 - t) * _startRect.position.y + t * _goalRect.position.y;
_movingImage.rectTransform.position = new Vector3(xPos, yPos, 0);
これはdurationが1秒までの値をとる時しか想定していないコードである。これでは不完全なので、以下のコードに修正した。
_elapsedTime += Time.deltaTime / _duration;
float t;
// ~中略~
float xPos = (1 - t) * _startRect.position.x + t * _goalRect.position.x;
float yPos = (1 - t) * _startRect.position.y + t * _goalRect.position.y;
_movingImage.rectTransform.position = new Vector3(xPos, yPos, 0);
_elapsedTime
へ⊿t / duration
の値を加算していくことで簡易的にdurationの指定ができるようになった。
今回得たもの
Tweeningへの浅はかな理解を少々
参考資料
イージングの式
https://easings.net/ja