UnityでAnimatorを使いキャラクターなどをアニメーションさせる方法

#はじめに
Unityでアニメーションをさせる方法は、大まかに２種類あります。

１つは、タイトルの通りAnimatorを使い対象のオブジェクト用にAnimationClipを作成する方法です。
もう一つは、スクリプトによりソースコード上でMath関数を使い対象オブジェクトを動かす方法です。(Unity iTweenなんかで検索するとAssetが出てきます)

人によっては、ソースコード上で作成するのになれている方も居るかとは思いますが、今回はAnimatorを使ってアニメーションを作成する方法について説明します。

#アニメーションさせたいオブジェクトのAnimationClipを作成する
まずは、アニメーションさせたいオブジェクトを選択した状態にします。
![スクリーンショット 2015-07-06 18.17.56.png](https://qiita-image-store.s3.amazonaws.com/0/25895/1e77bbf6-2b76-722e-ab82-07ddfa3d068f.png)

次にWindwo->Animationのウィンドを表示します。
![スクリーンショット 2015-07-06 18.19.32.png](https://qiita-image-store.s3.amazonaws.com/0/25895/f9427069-8b73-97f3-eb91-beb69dd5a590.png)

これで選択されたオブジェクトのアニメーション作成の準備ができました、AnimationウィンドーのAddPropertyボタンを押して、AnimationClipを作成します。アニメー ションクリップ名は Start@Animatino としておきましょう。
![ss03.png](https://qiita-image-store.s3.amazonaws.com/0/25895/4ef02406-e705-c5e2-254f-46822c087025.png)

#AnimationControllerの作成を確認する

このとき新規でアニメーションを作成するので AnimationController も作成されます。 AnimationController の Animator を使う事により複数のアニメーションを制御する事 がきます。
![ss04.png](https://qiita-image-store.s3.amazonaws.com/0/25895/216e2028-650f-d691-aac1-7726d6d331f7.png)

#アニメーションさせたいオブジェクトのAnimationClipにアニメーションの要素を追加する

他の画面に遷移すると表示が隠れてしまうので、また Add Property ボタンを押して、 Anchored Position をプラスボタンで追加します。今回は、uGUI のボタンにをアニメー ションさせるのでアンカーポジションを使います。
![ss05.png](https://qiita-image-store.s3.amazonaws.com/0/25895/3d78fb75-ea24-177b-4255-29152291e6c6.png)

#アニメーションのキーフレームを設定する

追加すると1秒後のフレームが、0フレームと同じ値でコピーされ作成されます。ちな みに Samples の数字フレーム分を 1 秒でアニメーション指定するイメージになります。 default は 60 なので 1 秒 60 フレームでアニメーションさせるイメージです。
![ss06.png](https://qiita-image-store.s3.amazonaws.com/0/25895/c175c4bb-39d6-d363-bb8e-da63be8744ca.png)

これは、この AnimationClip の座標していを意味していて、一秒間掛け右から左の指定 座標に移動する事を意味しています。なので 0 フレーム目の Anchored Position.y の値 に 280 を入れると上の方から真ん中に移動する Animation Clip を作成することになります。
![ss07.png](https://qiita-image-store.s3.amazonaws.com/0/25895/9ac9f457-9b6e-d1ba-e8bd-5984e13a57e8.png)

Animation ウィンドーの録音ボタンを解除し、Unity の再生をするとボタンが上からし たに繰り返しアニメーションします。
![ss08.png](https://qiita-image-store.s3.amazonaws.com/0/25895/08e5ce5b-c851-4877-508e-1a28181a4152.png)

う~ん。でも、ボタンのアニメーションが繰り返されてしまってボタンを押す事が出来 にくいです。これでは、いつボタンを押していいのかユーザーにもわからないので、こんどは、止まって欲しいので、止まっているだけのアイドリング用アニメーションを作 る事にしましょう。
Animation Clip 名の所を選択して、[Create New Clip] を選択してください。
Animation Clip 名を入れるダイアログ画面に今度は、Idling@ButtonAnime という名前 で Animation Clip を作成しましょう。
![ss09.png](https://qiita-image-store.s3.amazonaws.com/0/25895/c83a7585-d707-c414-5b00-f1f47507c0bc.png)

![ss10.png](https://qiita-image-store.s3.amazonaws.com/0/25895/e7c79b44-da44-804e-64d0-6a63bbdc4a60.png)

#AnimationClip同士の遷移を設定する

2つ目の Animation Clip を作成すると Animator ウィンドーに作成した Animation Clip が作成されます。ただし、1つ目は自動的に Animation Clip を呼び出すのですが、2つ 目からは手動で遷移用線を結ばな無ければ、動いてくれません。Start@ButtonAnime の Animation Clip を選択し、右クリックの Make Transion で遷移を Idling@ButtonAnimeに接続します。
![ss11.png](https://qiita-image-store.s3.amazonaws.com/0/25895/cc591a5a-d4ad-0d80-d062-91bcbc30a6a7.png)

Unity の実行ボタンで実行すると Start@ButtonAnime から Idling@ButtonAnime へア ニメーションが遷移し、アイドリングでループ状態になっている事を確認できます。
![ss12.png](https://qiita-image-store.s3.amazonaws.com/0/25895/e5928a4f-4aa8-5bb8-cd6a-2016523e5666.png)

![ss13.png](https://qiita-image-store.s3.amazonaws.com/0/25895/9c80d57f-7a61-a767-a2ae-a62a08443767.png)

#スクリプトを作成し、ボタンをクリックしたらアニ メーションが呼び出されるようにする
上からボタンがやって来て真ん中で止まるようになりました。どうせならボタンを押すとそのボタンもアニメーションさせましょう。ボタンを押すとそのボタンがアニメーションするようにするには、ボタンが押されたタイミングでアニメーションを呼び出すスクリプトと、その呼び出されるAnimatino Clipの２つが必要です。

それでは、ボタンが押されたときのAnimation Cplipから作成していきましょう。動き的には、ツムツムのボタンをイメージしています。Create New Cplipを選択し、ButtonClick@Animationと名前をつけてsaveしましょう。
![スクリーンショット 2015-07-15 23.08.52.png](https://qiita-image-store.s3.amazonaws.com/0/25895/025a83e1-280f-b388-5972-3ca3a215858f.png)

Add Propertyボタンを押し、今度は、Rect TransformのScaleを追加します。
![スクリーンショット 2015-07-15 23.10.50.png](https://qiita-image-store.s3.amazonaws.com/0/25895/98492955-86aa-f27b-bdd5-132ee4b3fd5e.png)

とりあえず、１０フレーム目に移動し、xとyのスケールを1.5倍にしてみましょう。
![スクリーンショット 2015-07-15 23.15.09.png](https://qiita-image-store.s3.amazonaws.com/0/25895/5de698be-ffd4-0517-8656-5c8bcbb6d49d.png)

![スクリーンショット 2015-07-15 23.16.32.png](https://qiita-image-store.s3.amazonaws.com/0/25895/60033e5b-e688-4a46-4ed4-e017171b581d.png)

２０フレームに移動し、xとyを元の１倍に戻します。０フレーム目の値を全部コピーしてみましょう。
![スクリーンショット 2015-07-15 23.19.20.png](https://qiita-image-store.s3.amazonaws.com/0/25895/70638dc7-547e-04ab-eafa-f0167649ec12.png)

キー値のコピーは全選択のCTL+c or Command+c,CTL+v or Command+vが使えます。
![スクリーンショット 2015-07-15 23.20.14.png](https://qiita-image-store.s3.amazonaws.com/0/25895/c9c9a1ae-9a44-ffb3-e2f5-11a2cf10a576.png)

とりあえず６０フレームをこの繰り返しで埋めてみます。
![スクリーンショット 2015-07-15 23.23.22.png](https://qiita-image-store.s3.amazonaws.com/0/25895/41e3cfcf-1fbc-59dc-b7f8-3336f7ebc425.png)

キー値を全体的に移動させて、３０フレームで完結する用にしてみました。
![スクリーンショット 2015-07-15 23.25.14.png](https://qiita-image-store.s3.amazonaws.com/0/25895/d934d53b-0b7a-8d2f-1050-788f951e7cee.png)

次にCubeのAnimation Controllerをダブルクリックして、Animatorタブを表示させます。
![スクリーンショット 2015-07-15 23.34.00.png](https://qiita-image-store.s3.amazonaws.com/0/25895/c7f70c54-cfe4-3dfc-f4b3-a9ec7dfe5f23.png)

Animatorタブ画面の格子のところを右クリックし、Create StateのEmptyを作成します。
![スクリーンショット 2015-07-15 23.34.43.png](https://qiita-image-store.s3.amazonaws.com/0/25895/ac37fa66-e0d4-7bae-76fa-afa9fb5ba286.png)

New StateをButtonClickに名称変更し、Motionに作成したAnimation Clipを割り当てます。
![スクリーンショット 2015-07-15 23.37.34.png](https://qiita-image-store.s3.amazonaws.com/0/25895/cb4886c4-aee4-354b-5d0f-ca610c8484d6.png)

![スクリーンショット 2015-07-15 23.38.08.png](https://qiita-image-store.s3.amazonaws.com/0/25895/f741d7ef-a771-3999-f2f2-a55d8c71171d.png)

アニメーションのステート設定するのでidling@Animationを右クリックし、Make Transitionを選択して、ButtonClickに接続します。
![スクリーンショット 2015-07-15 23.42.45.png](https://qiita-image-store.s3.amazonaws.com/0/25895/4c6cec5c-67fc-ae4f-9d08-19ad86ff7e8a.png)

![スクリーンショット 2015-07-15 23.43.09.png](https://qiita-image-store.s3.amazonaws.com/0/25895/39768c56-c7b8-e5a1-6d47-4396d38b81b4.png)

作成したAnimation Clipを動作させたら、アイドルのアニメーションに戻る制御を同じ様に実装します。
![スクリーンショット 2015-07-20 18.57.40.png](https://qiita-image-store.s3.amazonaws.com/0/25895/1c296d8b-d789-518d-d9b3-248fda511543.png)

この状態で、Unityを実行するとつなげた線とAnimation Clipが遷移して行くのがわかります。
![スクリーンショット 2015-07-20 19.06.24.png](https://qiita-image-store.s3.amazonaws.com/0/25895/020b8ce8-dbec-69e8-215f-9786edb05c44.png)

でもこのままでは、作ったアニメーションを繰り返すだけになってしまいます。
Animatorは、パラメータで制御できるので、パラータを追加しましょう。
![スクリーンショット 2015-07-20 19.37.42.png](https://qiita-image-store.s3.amazonaws.com/0/25895/18058ae9-4814-3a23-0e09-8b5ee385a307.png)

ParmetersをTriggerで追加するとアニメーションの終わりにもとに戻ります。名前はあとでスクリプトなどで使うのでちゃんと設定しましょう。
![スクリーンショット 2015-07-20 19.45.30.png](https://qiita-image-store.s3.amazonaws.com/0/25895/93c3fc93-2d35-2f3b-be36-8441820e5ef8.png)

#スクリプトでトリガーイベントを発生させて、AnimationClipを制御する

ここからの制御を実装して行く方法として、わたくしの勉強不足でスクリプトから制御する方法しか思い浮かびません。スクリプトで、ボタンをクリックしたときのアニメーションとホワイトアウト的なアニメーションを追加し、スクリプトで制御します。

```csharp:ClickActionManager.cs

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class ClickActionManager : MonoBehaviour {

	public Animator anim;
	public GameObject UIbackgroundImage;

	public void AnimationStart() {
                //AnimatorのTriggerをtrueにする
		anim.SetBool ("onClick", true);

		StartCoroutine(WaitForButtonAnime(1.0f));
	}
        //指定秒数後に
	IEnumerator WaitForButtonAnime(float waitTime) {
		yield return new WaitForSeconds(waitTime);
                //バックグラウンドをホワイトアウトするゲームをオブジェクトを呼び出す
		UIbackgroundImage.gameObject.SetActive (true);

		StartCoroutine(WaitForNextScene(1.0f));
	}
        //指定秒数後に
	IEnumerator WaitForNextScene(float waitTime) {
		yield return new WaitForSeconds(waitTime);
		Application.LoadLevel (Application.loadedLevel + 1);
	}

}
```

#それぞれのゲームオブジェクトに対して、インスペクターで設定する

というスクリプトを作り必要要素をアタッチします。
![スクリーンショット 2015-07-23 22.28.20.png](https://qiita-image-store.s3.amazonaws.com/0/25895/71c1125b-4b8f-388f-4d2a-7b9a99bc60a3.png)

これで旨く行けば、キャンディークラッシュのボタンを押したときのアニメーションの後に画面がホワイトアウトして、次のシーンへ切り帰ります。

![スクリーンショット 2015-07-24 16.57.34.png](https://qiita-image-store.s3.amazonaws.com/0/25895/345852b0-4bd5-1dd7-0657-88a685bd9346.png)

![スクリーンショット 2015-07-24 16.57.47.png](https://qiita-image-store.s3.amazonaws.com/0/25895/caf0b352-cc4c-ce8b-c014-0624d3a6ba5a.png)

![スクリーンショット 2015-07-24 16.59.20.png](https://qiita-image-store.s3.amazonaws.com/0/25895/7949e6ac-2283-afe7-73e7-0b6952e65585.png)

これを利用したゲームを#ゆにジャムで作成しました。もし良かったら遊んでね。
http://unitygameuploader.jpn.org/game/5569.html