【Unity】UIボタンのアニメーション
Unity標準のUIボタンをアニメーションしてみましょう
アニメーションの機能もUnity標準の機能を使います
実行結果
このサンプルでは、クリックした時のアニメーションを作ってみました
シーン構成
UIボタンを1つ追加しただけのシーンです
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-10.57.40-1024x719.png)
作り方
遷移の仕方からアニメーションを選択します
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.00.40-1024x716.png)
手順でアニメーションも作成するので「自動で作成する」をクリックします
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.02.25-1024x716.png)
ファイルに保存しますので任意の名前をつけます
このファイルはプロジェクトウィンドウに表示されます
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.05.01-1024x716.png)
この時、ボタンオブジェクトには、自動的にアニメーターコントローラコンポーネントもアタッチされます
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.43.15-1024x719.png)
このようなアニメータコントローラになります
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.44.30-1024x719.png)
次にAnimationウィンドウでどのようにアニメーションするかを設定します
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.09.16.png)
アニメーションウィンドウが開くので、タグをドラッグして適当な場所に配置してもいいでしょう(そのまま別ウィンドウの状態でもいいです)
これまでにアニメーションウィンドウの操作をしたことがある方は手順はそのままですから特別にUI用ではないことに気づくと思います
今回は、クリックした時にボタンのサイズが変化する(拡大する)アニメーションを作ってみます
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.07.37-1024x716.png)
Pressedアニメーションを選択します
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.10.50-1024x716.png)
Scaleを追加します
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.11.53-1024x716.png)
1秒後にどのような大きさにしたいかを登録します
そこまでのスムーズなアニメーションは自動で作成されます
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.13.43-1024x716.png)
実際にシミュレーションで再生・確認してみて調整します
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.18.03-1024x716.png)
以上で完成です
実行すると実行結果のようになるのが確認できます
多くの手順があるように思われたでしょうが、ほぼクリックだけなのでそれほど大変ではありません
クリックした時以外のアニメーション設定
他の状態でもアニメーションができますので色々試してみましょう
![](https://soft-rime.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-16-11.23.33-1024x139.png)
ディスカッション
コメント一覧
まだ、コメントがありません