0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

DoTweenに頼らずにUIのTweeningをしたい!

Posted at

想定(実装)する動作

1eb22081084342741e3a5968bdf37966.gif
このように特定のメソッドが呼び出されたら指定した時間トゥイーンする機能を実装する。

実装に際して必要な考え方

ある始点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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?