Chapter 16無料公開

🔰uGUI - RectTransformのトゥイーン

UIを実装する上でuGUI関連のトゥイーンもよく使います。
uGUIで使用するRectTransformクラスは
Transformクラスのサブクラスです。

よってRectTransformのトゥイーンは
Chapter 06🔰頻出高めのTransformトゥイーン【無料】で紹介した
Transformのトゥイーンと基本的には同じです。

移動 / 回転 / 拡大縮小

繰り返しになりますがuGUIの場合Transformクラスではなく
RectTransformクラスを使います。

// 移動
// ※_targetはRectTransformクラス
_target.DOAnchorPos(new Vector2(240f, 0), 0.6f)
    .SetEase(Ease.OutBack);

// 回転
_target.DOLocalRotate(new Vector3(360f, 0, 0), 0.6f,
        RotateMode.FastBeyond360)
    .SetEase(Ease.OutCubic);

// 拡大縮小
_target.localScale = Vector3.one * 0.2f;
_target.DOScale(1f, 0.6f)
    .SetEase(Ease.OutBack, 5f);

移動・回転・拡大縮小を同時に実行したトゥイーンサンプルです。

uGUIの移動トゥイーンはRectTransform
拡張メソッドDOAnchorPosを使います。

回転拡大縮小は以前のチャプターで紹介した
Transformのトゥイーンを使います。

ソースコードの中にRotateMode.FastBeyond360という新しいキーワードが
DOLocalRotateメソッドの引数として代入されています。

詳しくはChapter 48🚀DOTweenミニTips集14/N選で説明していますが、
360度以上の回転トゥイーンを作るために必要なパラメーターです。

📘uGUIの移動トゥイーンでDOLocalMoveの使用は注意

uGUIにはアンカーと呼ばれる基準点が存在します。

アンカーを考慮した移動メソッドがDOAnchorPosです。

通常の移動メソッドDOLocalMoveを使うと思わぬ座標へ移動してしまう時があります。
大抵そういう時はアンカーが中央ではなくなっていることが多いです。

uGUIで移動トゥイーンを実装する時は必ずDOAnchorPos使うことをオススメします。

その他のuGUI移動トゥイーン

  • DOPunchAnchorPos : 直線上の振動トゥイーン
  • DOShakeAnchorPos : ランダム方向の振動トゥイーン
  • DOJumpAnchorPos : ジャンプトゥイーン

これらはTransformトゥイーンと同じ内容なので
👇コチラを参考にしてください。


次のチャプターも引き続きuGUI関連です。
Image・Textのトゥイーンについて学んでいきます。