【Unity】DOTweenを使ったuGUIアニメーション

ピリピリ

「本当はやりたいんでしょ？ポケモン」とか「素直になりましょうよ。」とか余計なお世話に感じる今日この頃、「変わらずあなたを待ってますよ。」いやいや、誰もがポケモンで遊んだ事がある前提で話さないで下さい。こっちはメガドラ派なんで、ゲームギア派なんで。

そんな感じで、今週から突如やってきた寒波の影響か肌も心もピリつく日々を過ごしている皆さんこんにちは。私は一刻も早く潤いが欲しいです。いや、ホント。

みんな大好きDOTWeen

さて、DOTweenというアセットは無料版が存在することもあってUnity界隈では広く使われているアセットだと思います。
名前の通りTween系のアセットなので主にSpriteや3Dオブジェクトを移動・アニメ動作させる為に使用されますが、用意されている関数は非常に多くてイメージ画像やボタンなどのuGUIについての関数も用意されています。

dotween.demigiant.com

パネルのスライドIN/OUTやボタンをクリックした時のアニメ動作もDOTweenを使うことで比較的シンプルなコードで実装することができ、シーケンスと組み合わせればインパクトのあるUIを実現できる・・・かもしれません。

よって今回はuGUIアニメーションで使えるDOTweenの関数をご紹介。

前準備

前提としてuGUIを動かす場合はRectTransformに対してTweenを指定します。
この為、DOTweenを使う前にGetComponentでRectTransformを取り出しておく必要があります。

RectTransform ImageRect = ImageObj.GetComponent<RectTransform>();

別にDOTweenを使用する毎にGetComponentを行ってもよいのですが、性能を考えると上のように事前に動かしたいuGUIのRectTransformをキャッシュしておくのが良いかと思います。

DOAnchorPos

RectTransformを平行移動させるTweenにはDOAnchorPosを使用します。

DOAnchorPos(Vector2 目的位置, float 動作時間)

ここで目的位置に指定するPositionはInspectorのRectTransform欄にある[PosX][PosY]を指します

今回はマスクとその子オブジェクトの画像を平行移動させることでボタンの画像が変わるアニメを作ります。

Hierarchy上の定義はこんな感じ、変わる前の画像が「NonSelectIamge」、変わった後の画像が「SelectImage」でMaskImageでマスクされています。

Game空間上の配置はボタンの上に「NonSelectIamge」と「SelectImage」を重ねて置いてMaskImageをボタンの横に配置します。

この状態でDOAnchorPosを使ってマスクを右にスライドさせるのと同時に、マスクの子画像であるSelectImageを逆方向(左)にスライドさせます。

SelectImageを逆方向にスライドさせるのは、これによりSelectImageのWorld空間での位置は変わらないので、マスクと重なった部分だけが浮かび上がってくるようなアニメになるためです。

MaskImageRect.DOAnchorPos(Vector2.zero, 0.8f);		// 元の位置(X=-162)からX=0の位置へ
SelectImageRect.DOAnchorPos(Vector2.zero, 0.8f);	// 元の位置(X=162)からX=0の位置へ

これを実行させるとこんな感じのアニメになります。

DOSizeDelta

SelectImageはMaskImageの子オブジェクトなのでMaskImageのScaleを変えると当然影響を受けてSelectImageもScaleが変化します。

しかし、RectTransformのsizeDeltaを変えた場合はその限りではありません。
sizeDeltaはInspectorのRectTransform欄にある[Width][Height]を指します。

よって、MaskImageのHeightやWidthを変えることでもSelectImagが浮かび上がってくるようなアニメを作ることができます。
DOTweenでsizeDeltaを変えるにはDOSizeDeltaを使用します

DOSizeDelta(Vector2 目的サイズ, float 動作時間)

今回はHeightの値を0から本来の値へ変化させています。

DORotate/DOLocalRotate

uGUIを回転をさせる場合は3Dオブジェクトと同じようにDORotate/DOLocalRotateを使用します。
こちらも上と同じようにRectTransformに対してTweenを使用します。

DOLocalRotate(Vector3 目的角度, float 動作時間)

今回はZ軸に対して180度回転させています。

DOColor

uGUIのColorもTweenさせることができます。

ただしこの場合はRectTransformではなくImageコンポーネントに対してTweenさせるので事前にImageコンポーネントを取り出す必要があります。

FrameImage = ImageObj.GetComponent<Image>();
FrameImage.DOColor(Color 目的色, float 動作時間)

今回は六角形のフレーム画像と中央の三角アイコン画像の色を入れ替えるように変化させています。

意外と簡単

通常、ボタンを動かす場合はボタンコンポーネントに用意されているTransitionの設定やAnimationを使うことが多いかと思うのですがDOTweenを使用しても意外に簡単に実装することができます。

また、DOTweenのPro版(有料版)になるとInspectorで値を入力してリアルタイムに動作を確認できるエディタも用意されているので、より簡単に複雑なアニメ動作を作ることができます。

 後はセンスの問題、ということで・・・