ボタンの選択をアニメーションさせて分かりやすくする
現在表示しているページは選択中の表示言語には対応しておりません。
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2020.3.25f1
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
参考
はじめに
ボタンを選択しているかどうかについてはデフォルトでは若干濃い色がつきます。
しかし分かりにくい場合もあるので、インスペクターで選択の色を変更することも可能です。
ここではさらに追加要素としてボタンを選択したときにボタンを大きく表示させてみたいと思います。 ボタンが大きくなる際はアニメーションでだんだん大きくなるというような動きも付けます。
ボタンの配置
ボタンは普通に配置します。ボタンが大きくなることも考慮して少し間を空けます。
アニメーションを設定する
ボタンを選択している状態で Button コンポーネントから「遷移」を「アニメーション」に変更します。
すると「Auto Generate Animation」というボタンが表示されるのでクリックします。
アニメーションコントローラーの保存ダイアログが表示されます。
場所は任意ですが、今回はシーンと同じフォルダである Scenes に保存します。
ファイル名は ButtonSelected とします。
プロジェクトに以下のようなファイルが作成されます。アニメーションの種類はボタンの動作に関連するものとなります。
アニメーションウィンドウを表示します。
先ほどアニメーションを生成したボタンを選択します。
するとアニメーションタブの中身が有効になるので、アニメーションの種類から Selected を選択します。
録画ボタンをクリックします。この状態でインスペクターの各値を変更するとアニメーション時のパラメーターとして登録されます。
この状態で Rect Transform コンポーネントのスケールを 1.25 にします。
ついでに選択時の色として Image コンポーネントの色も水色にしておきます。
設定が終わったら録画ボタンをクリックして停止します。スケールと Image.Color が設定されていることが分かります。
ゲームを実行して動かしてみてください。ボタン選択時にスケールと色がアニメーションしながら変化することを確認できると思います。
アニメーションの設定は先ほど作成した ButtonSelected.controller に保存されるので、
他のボタンにも同じアニメーションを適用したい場合はこのファイルをボタンにアタッチすれば同じアニメーションを適用できます。
遷移をアニメーションにするのを忘れないでください。
アニメーションの時間を変更する
作成したアニメーションの動作時間のデフォルトは 0.25 秒で設定されています。 これが早いか遅いかちょうどいいかは人によるかもしれません。
もしこのアニメーションの時間を変更したい場合は以下の手順で変更することが可能です。
プロジェクトから作成したアニメーションコントローラー (ButtonSelected.controller) をダブルクリックします。
アニメーターのタブが選択され以下のような画面が表示されるので Any State と Selected をつないでいる線を選択します。
インスペクターの Settings を展開すると「遷移間隔(s)」があるので今回は 0.1 に設定します。
アニメーションが早くなっているか確認してみてください。