【Unity】uGUIをDOTweenでアニメーションさせる

はじめに

uGUIでButtonを作るにあたり、オンマウスでアニメーションさせたいなと思ったこと、ありませんか?
ありますよね。僕はあります(断固たる意思)。


こんな感じのアニメーションを実装するには、DOTweenを使うのが手っ取り早くて分かりやすいんですが、いくつかハマったポイントがあるので、具体的な実装手順を紹介します。

なお、今回使う機能は、DOTween Proにしか搭載されていません。無料版でもスクリプトから操作できるので、各自読み替えれば実装できますが、Inspectorで値を入力してリアルタイムに動作を確認できるので、有料版を買うことをおすすめします。

UIの構成

全体構成

ButtonのUI構成は以下のようになっています。



Story Button uGUIの標準的なButtonです。
別途EventTriggerをアタッチしています。
Imageオンマウス時に左からニュッと伸びてくるバーです。
Scale値を変えることで表現しています。
アニメーション対象です。
TextuGUIのTextです。
スクリプトでオンマウス時に色を変えてます。

Imageが今回のアニメーション対象です。Buttonのオンマウス時にImageのScale値を増やすアニメーションを再生し、マウスが離れた時に逆再生させることで表現します。

ImageのアニメーションにDOTween Animationを使用します。

ImageにDOTweenAnimationをアタッチしてアニメーションの設定をし、ButtonのEvent Triggerから呼び出してアニメーションを再生させるわけです。

Image

DOTweenAnimationの解説の前に、アニメーション対象となるImageの基本的な設定について解説します。

Buttonの子オブジェクトとして実装していますが、Hierarchy上でTextより上にしないと、アニメーション時にTextの上に描画されて文字が見えなくなります。

また、今回の例では左から右に拡大していきますが、標準設定で拡大しても中央から広がってしまいます。

これはこれでオシャレですが、意図した挙動ではありません。
左から伸ばしたい場合は、RectTransformのPivotのXを0にする必要があります。

これは画像の中心点をどこに定めるかという項目で、中心点を左端に寄せることで、拡大時に左端を基準に伸ばすことができます。
右から拡大したい場合はXを1に。上から下の場合はYを0にします。

スポンサードサーチ

DOTweenの使い方

DOTweenAnimation

ではお待ちかね、DOTweenAnimationについて解説します。

  1. 先ほどのImageにAdd Componentで「DOTWeenAnimation」を追加
  2. Add Managerを押してDOTween Visual Managerを追加(必須ではないが推奨。Editor上でアニメーションをプレビューする機能です)

追加されたコンポーネントで、以下のように設定します。

Scaleアニメーションする対象
AutoPlay
AutoKill
チェックを外す(重要)
Durationアニメーションの再生時間(秒)
Easeアニメーションカーブ(後述)

ハマったのは、デフォルトで有効になっている「AutoKill」です。
これは、アニメーション再生後に自動的にDOTweenを終了させるもので、これが有効になっていると、一度アニメーションを再生し終えてしまったが最後、もう一度再生できなくなってしまいます。

もしかしたらリスタートする方法があるのかもしれないけど、EventTriggerからやる方法は僕は見つかりませんでした。

Easeに関しては、以下の早見表が参考になります。

満足いくアニメーションになっているか確かめたい場合は、Preview ModeのAutoPlay Onlyを無効にしてからPlayを押してください。

EventTriggerから呼び出す

ここまでできれば、もう8割完成です。ButtonにEventTriggerを追加し、以下のように設定します。

EventTriggerの詳しい解説は省略しますが、Pointer Enterがマウスを重ねた瞬間、Pointer Exitがマウスが離れた瞬間を検知して、登録されたメソッドを実行します。

アニメーションの再生はDOTweenAnimation.DOPlay() ですが、その前に一度Restart() を呼ばないといけないようです。Killしていた場合はRestartしても無理でした。

DOPlayBackwards() が、アニメーションの逆再生です。

UIAnimationは、僕が独自に用意したスクリプトです。オンマウス時にTextの色を変えないと、Imageの色と同化して見えなくなってしまうためです。
それ以外特にコメントすることのないシンプルなものですが、一応載せておきます。

まとめ

UIはただ色を変えるだけよりも、動きがあったほうが視覚的に分かりやすいし、面白いです。制作の負担にならない程度に取り入れていきたいですね。

記事をシェアする