【uGUI】押している間引っ込み、離した時に元に戻るボタンを作る

この記事のUnityのバージョンは 5.3.5f1 です

![uniBtn.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/b24c7867-b22e-e6f7-1de2-2f03131cad2c.gif)

# はじめに
押している間だけ引っ込むボタンの作り方がややこしかったので勉強も兼ねて記事にまとめてみました。

#1. ボタンを作る
最初に Create -> UI -> Button を選んでボタンを作成します。
![1.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/fd381dbc-712d-f6d1-0ba7-55c01269f9fa.gif)
<br>

#2. TransitionをAnimationへ設定
Buttonコンポーネントの Transition を Animation へ切り替えます
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/c3ea3660-4c49-1a33-2f91-d3d4a0a9726c.gif)
<br>

#3. Animationデータを作成
Auto Generate Animation をクリック
![3.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/46746f1c-dbf7-7123-f779-89bb5445178b.gif)
<br>

AnimationController作成ダイアログが出てくるので保存したい場所を選んで保存をクリックします
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/fd8b499e-7273-2a58-37ad-14acd62ea217.png)
<br>

こんな感じの Animator がボタンにアタッチされます
<img width="500" alt="114514" src="https://qiita-image-store.s3.amazonaws.com/0/44288/a4c71948-6cbe-fb10-9aa0-1ca28f68cbe1.png">

#4. アニメーションを作る
次にAnimatorの中にあるAnimationを編集していきます。

Pressedアニメーション は ボタンが引っ込むアニメーションにします (スケール1.0 -> 0.8)
![4_pressed.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/b28fc1d2-969c-3a04-0212-462d6e857a17.gif) <img height="238" alt="114514" src="https://qiita-image-store.s3.amazonaws.com/0/44288/316bbb1b-430b-fc5b-45a9-e62ebacc7a7a.png">

Disabledアニメーション は ボタンが引っ込んだままになるアニメーションにします (スケール 0.8)
![4_disabled.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/3a9a7cdd-5ef2-5bbd-c00d-c38dbd58639c.gif) <img height="238" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/44288/12ad9da7-6ca5-2fd4-ff6d-ccc29f3039c9.png">

Highlightedアニメーション は ボタンが元に戻るアニメーションにします (スケール 0.8 -> 1.0)
![4_highlighted.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/53253adf-e44a-2b32-07ec-47e683fa13b5.gif) <img height="238" alt="114514" src="https://qiita-image-store.s3.amazonaws.com/0/44288/9869e97d-ecab-5f07-f222-793df1c721b8.png">

#5. Animatorをいじる (Stateの並び替え)
次にAnimatorのStateを並び替えて以下のようにつなぎます
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/7d90ccee-6566-29cf-f5b1-7a8ed384cf05.png)

#6. Animatorをいじる (State遷移の設定)
次にStateの遷移をいじります.

Any State -> Pressed の設定はこんな感じ (Conditionsは <font color ="maroon"> Pressed </font>、Has Exit Timeは <font color ="maroon">  OFF </font> にします)
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/735e10de-6603-5e47-9133-ec7396ed244d.png)
Has Exit Time を Offにすることで、Conditionの条件を満たしたときにAny StateからPressedに遷移するようになります

<br>
Pressed -> Disabled の設定はこんな感じ (Has Exit Timeは<font color ="maroon">  ON </font> にします )
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/bb370877-f121-a09a-761b-c3c2a0314880.png)
Has Exit Time を Onにすることでアニメーションの再生終了時に次のStateへ移動してくれます

<br>
Disabled -> Highlighted の設定はこんな感じ (Conditionsに <font color ="maroon"> Highlighted </font>を入れます。 Has Exit Time は <font color ="maroon"> OFF </font>)
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/745b8073-5568-d5b6-2202-4a81662c7bf9.png)

<br>
Highlighted -> Normal の設定はこんな感じ ( Has Exit Time は <font color ="maroon"> ON </font>)
![image](https://qiita-image-store.s3.amazonaws.com/0/44288/df5e0c45-9478-3c5a-d4bf-6a46e5bd703b.png)

# 7. 完成
以上で完成です.

押している間は引っ込みつづけて、離したときに元に戻るボタンができました
![click_demo.gif](https://qiita-image-store.s3.amazonaws.com/0/44288/9aacf664-d041-7c59-44db-fe8f9d1d836b.gif)