はじめに

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

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

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

アニメーションさせたいオブジェクトのAnimationClipを作成する

まずは、アニメーションさせたいオブジェクトを選択した状態にします。

次にWindwo->Animationのウィンドを表示します。

これで選択されたオブジェクトのアニメーション作成の準備ができました、AnimationウィンドーのAddPropertyボタンを押して、AnimationClipを作成します。アニメーションクリップ名は Start@Animatino としておきましょう。

AnimationControllerの作成を確認する

このとき新規でアニメーションを作成するので AnimationController も作成されます。 AnimationController の Animator を使う事により複数のアニメーションを制御する事がきます。

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

他の画面に遷移すると表示が隠れてしまうので、また Add Property ボタンを押して、 Anchored Position をプラスボタンで追加します。今回は、uGUI のボタンにをアニメーションさせるのでアンカーポジションを使います。

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

追加すると1秒後のフレームが、0フレームと同じ値でコピーされ作成されます。ちなみに Samples の数字フレーム分を 1 秒でアニメーション指定するイメージになります。 default は 60 なので 1 秒 60 フレームでアニメーションさせるイメージです。

これは、この AnimationClip の座標していを意味していて、一秒間掛け右から左の指定座標に移動する事を意味しています。なので 0 フレーム目の Anchored Position.y の値に 280 を入れると上の方から真ん中に移動する Animation Clip を作成することになります。

Animation ウィンドーの録音ボタンを解除し、Unity の再生をするとボタンが上からしたに繰り返しアニメーションします。

う~ん。でも、ボタンのアニメーションが繰り返されてしまってボタンを押す事が出来にくいです。これでは、いつボタンを押していいのかユーザーにもわからないので、こんどは、止まって欲しいので、止まっているだけのアイドリング用アニメーションを作る事にしましょう。
Animation Clip 名の所を選択して、[Create New Clip] を選択してください。
Animation Clip 名を入れるダイアログ画面に今度は、Idling@ButtonAnime という名前で Animation Clip を作成しましょう。

AnimationClip同士の遷移を設定する

2つ目の Animation Clip を作成すると Animator ウィンドーに作成した Animation Clip が作成されます。ただし、1つ目は自動的に Animation Clip を呼び出すのですが、2つ目からは手動で遷移用線を結ばな無ければ、動いてくれません。Start@ButtonAnime の Animation Clip を選択し、右クリックの Make Transion で遷移を Idling@ButtonAnimeに接続します。

Unity の実行ボタンで実行すると Start@ButtonAnime から Idling@ButtonAnime へアニメーションが遷移し、アイドリングでループ状態になっている事を確認できます。

スクリプトを作成し、ボタンをクリックしたらアニメーションが呼び出されるようにする

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

それでは、ボタンが押されたときのAnimation Cplipから作成していきましょう。動き的には、ツムツムのボタンをイメージしています。Create New Cplipを選択し、ButtonClick@Animationと名前をつけてsaveしましょう。

Add Propertyボタンを押し、今度は、Rect TransformのScaleを追加します。

とりあえず、１０フレーム目に移動し、xとyのスケールを1.5倍にしてみましょう。

２０フレームに移動し、xとyを元の１倍に戻します。０フレーム目の値を全部コピーしてみましょう。

キー値のコピーは全選択のCTL+c or Command+c,CTL+v or Command+vが使えます。

とりあえず６０フレームをこの繰り返しで埋めてみます。

キー値を全体的に移動させて、３０フレームで完結する用にしてみました。

次にCubeのAnimation Controllerをダブルクリックして、Animatorタブを表示させます。

Animatorタブ画面の格子のところを右クリックし、Create StateのEmptyを作成します。

New StateをButtonClickに名称変更し、Motionに作成したAnimation Clipを割り当てます。

アニメーションのステート設定するのでidling@Animationを右クリックし、Make Transitionを選択して、ButtonClickに接続します。

作成したAnimation Clipを動作させたら、アイドルのアニメーションに戻る制御を同じ様に実装します。

この状態で、Unityを実行するとつなげた線とAnimation Clipが遷移して行くのがわかります。

でもこのままでは、作ったアニメーションを繰り返すだけになってしまいます。
Animatorは、パラメータで制御できるので、パラータを追加しましょう。

ParmetersをTriggerで追加するとアニメーションの終わりにもとに戻ります。名前はあとでスクリプトなどで使うのでちゃんと設定しましょう。

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

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

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);
    }

}