できるだけ手抜きでUIのアニメーションを実現する

この記事は、UnityAdventCalendar2016 14日目の記事になります

#はじめに

去年に引き続きまして、12月14日にUIで手抜きするためのTips的なものをアップさせていただきます。
ちなみに、14日は私の誕生日です。

##去年の記事
http://qiita.com/ShiroKuro/items/c028d29229fc135bac01
こちらで、ノンコーディングでEditorから触れる機能だけで簡単なUI遷移を行いました。

##今年の記事
去年、Animationで遷移アニメを作成し、TriggerからのUI遷移を行いましたが、
正直Animationの作成がめんどくさいです。
ですので、今回はアニメーションを出来るだけシンプルな形で実装してみようと思います。

###実装
とりあえず、各画面の状態を作ります。

状態１
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/56931bb2-7a8e-9435-37b0-5ccd0bbc4303.png)

状態２
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/103514c2-2f60-ad00-4a10-50aaf1c414e6.png)

状態３
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/66bca1df-2011-7e8e-8770-adecadff3244.png)

ではここにアニメーションを作っていこうと思いますが、3画面間の遷移で6パターンのアニメを作るのは大変です。
とりあえず、遷移は置いておいて、各状態を記憶したAnimationClipを作りましょう。

状態１
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/0990ece4-1ece-e3e0-4dab-3094dc66fed0.png)

状態２
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/ba7496c6-742a-4113-c719-1ba86cfe8696.png)

状態３
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/f9a7b384-68f3-9fe7-b4c6-4664cd02db70.png)


準備は大体これでできました。

ではAniamtionControllerを適当に組み上げます。
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/5c4353f0-c643-3d32-fa7d-af938a452a2b.png)

遷移条件は以下みたいな感じです。
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/076250d8-34f2-5ffc-2999-0e9cd2f1f609.png)
ここでTransitionDuration(s)を0.2~0.5秒くらいにしとくのがポイントです。

後は、遷移条件をコントロールするViewに値を渡してやります。

```ViewControl.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(Animator))]
public class ViewControl : MonoBehaviour {
	private Animator _animator;
	private Animator Anim{
		get{
			return _animator??(_animator = GetComponent<Animator>());
		}
	}

	public void SetView(int viewId){
		Anim.SetInteger ("View", viewId);
	}
		
	void Update(){
		///View3から戻すコントロールをつけ忘れたのでコードから
		if (Input.GetKeyDown (KeyCode.Escape)) {
			SetView (1);
		}
	}
}
```
各ボタンと、こちらのSetViewを紐づけてやればOKです。

###完成図
![Advent2016.gif](https://qiita-image-store.s3.amazonaws.com/0/61227/c9e8a563-5893-c5a6-1a44-eea174726fba.gif)
画面間の遷移アニメができました。

これは、AnimatorのState間の自動補完を利用して、アニメーションをなんちゃってで作っています。
手抜きではありますが、何もないよりは画面が動いて楽しいのではないでしょうか？
(ちなみにLinearでしか遷移しないのでEaseTypeをいじりたい場合は真面目に作ってください)


**おまけ
こんなUIパーツを作ります
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/7a4e2b09-b0ea-fd6d-a9cc-174efce639f7.png)

こんなスクリプトを書きます
([DoTween](https://www.assetstore.unity3d.com/jp/#!/content/27676)を事前にインポートしています。)

```WindowScript.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class WindowScript : MonoBehaviour {
	void Awake(){
		this.transform.localScale = Vector3.zero;
	}


	void OnEnable(){
		this.transform.DOScale (1.0f, 0.3f);
	}

	public void Close(){
		this.transform.DOScale (0.0f, 0.3f)
			.OnComplete ( ()=> this.gameObject.SetActive (false));
	}

}

```

こっそりHeaderに用意していたメニューボタンに以下を、
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/6bd757d4-c5dc-33a3-7289-668109b1f28c.png)

作成したウィンドウのCloseボタンに以下を紐づけます。
![image](https://qiita-image-store.s3.amazonaws.com/0/61227/d17cbb46-3d50-559f-ae10-5e30f8347c96.png)

あとは、作成したウィンドウを非アクティブにして、Playボタンを押します。
![Advent2016_1.gif](https://qiita-image-store.s3.amazonaws.com/0/61227/c97f9ab8-a3a4-1f1b-a9ff-73f09d41bb43.gif)

ウィンドウ型ダイアログの完成です。

MonoBehaviourのMessageのOnEnableはオブジェクトがアクティブになった瞬間に呼ばれるので、
ここにイベントを仕込んでおくといろいろと便利です。
(OnDisableは呼ばれたら非Activeになるのでアニメを仕込むのには向ていないです……)

今回もほとんどコードは書いていませんが、皆さんいろいろと試して動きのある画面を作ってみてください。
簡単なアニメーションでもアプリの印象が大分変わります。

明日はKan_Kicuchiさんの「クラスを丸ごと保存するデータ管理方法」です。