【Unity】任意のタイミングでanimationを発動させるやり方【animation／animator】

# この記事で書かれていること

- 通常animationから作成してanimatorも自動生成された場合、常に実行時からanimationが動きます。
- 下図のように、animatorと組み合わせることで、スクリプトからキー押下など任意のタイミングで、一回だけanimationを動かすといったことも可能になります。
- この記事では、そのやり方について解説していきます。
- ↓動画解説はコチラから↓
- [【Unity】任意のタイミングでanimationを発動させるやり方【animation／animator】](https://youtu.be/5_9YLr83NDs)

![animatorで任意のタイミングでanimationを動かす.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0acdda23-4311-814a-4c65-fe0ce5d3b6f3.gif)

## animationのその他のテクニックについてこちらから
- [Animation Eventの使い方](https://qiita.com/sanpeita/items/a11348e47f256b8d1cf3)

# 手順
1. animationの作成
2. animatorの編集
3. スクリプトの作成
4. 動作確認

それぞれ以下に書いていきます。

## 1. animationの作成
- 下記記事を参考にして、[Window]メニューから[animation]を追加して、任意のanimationを作成してください。
- [【Unity】ノンコーディングでオブジェクトを動かしたい【Animation】](https://qiita.com/sanpeita/items/b947227cdbad0c26e1e2)
- 今回のオブジェクトは、Cubeで進めていきます。
<img width="995" alt="a01のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/dd5b2a3f-bc15-5cf9-f7c5-8e903436c51f.png">
- animationのファイル名は「cubeanim」と設定、animatorのファイル名は「Cube」と自動生成されます。
<img width="541" alt="a01のコピー2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/24362126-84f3-97ba-4d9d-a4ed53f1abdf.png">
- Cubeのanimationは下図のとおりとなります。
<img width="539" alt="スクリーンショット 2020-07-21 10.03.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b08d105e-5754-2c6f-2cc8-fbdc5869a2be.png">

- 下図のように、まずはanimationが動けばokです。
![cubeanim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/7974ad08-9e99-fe50-b397-e0ef54e6f79c.gif)

- また、「アニメーションは1回だけでよい」場合、
下図のように、cubeanimのインスペクターウィンドウで、
「Loop Time」のチェックを外します。
<img width="279" alt="スクリーンショット 2020-07-21 11.09.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/77c90a91-9a76-2dcc-dfcf-de2e27c47235.png">



## 2. animatorの編集
- 自動生成されたanimatorは下図の通りとなります。

- この状態では、実行時からanimationが動くので、今回はanimatorも編集していきます。
<img width="624" alt="a01のコピー3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1165972d-00e8-6744-d34f-086a9faf78b1.png">

- さて、このあとのanimatorコントローラー内にあるオレンジのブロックである「cubeanim」の編集の仕方ですが、『泥臭いやり方』と『イケてるやり方』の二種類をご紹介しますね。

---

### ①泥臭いやり方

- まずは、自動生成された、オレンジ色の「cubeanim」をDeleteで削除します。
<img width="497" alt="スクリーンショット 2020-07-21 10.10.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/63d52e77-e9c0-74b4-6c3a-8966c28cd2a2.png">

- オレンジ色の「cubeanim」を削除後、
空いている場所で[右クリック]-[Create State]-[Empty]を選択します。
<img width="447" alt="スクリーンショット 2020-07-21 10.11.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1138f083-7f76-3efc-47fe-fd38b4a0f882.png">
- 下図のように、オレンジ色のブロックが作成されたらokです。
グリーンのEntryからは、必ずオレンジのブロックへ遷移するので、
オレンジの空のブロックを作ることで、実行時にいきなりanimationが起動することを避けています。
<img width="346" alt="スクリーンショット 2020-07-21 10.11.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e76f84c5-e706-3310-3d9b-7c175c63c8ff.png">

- Assetsの中にある「cubeanim」を、
下図のように、Animatorコントローラーへドラッグアンドドロップします。
<img width="1164" alt="スクリーンショット 2020-07-21 10.14.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/90044e0f-f411-b11b-edbf-33a05dabb8af.png">
<img width="1164" alt="スクリーンショット 2020-07-21 10.15.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/5f9b5862-eb04-9720-deae-f15279343305.png">

---

### ②イケてるやり方
スクショの都合で、「cubeanim」ではなく、「cube2anim」になっていますが、そこはスルーしてください。

- 下図は、animationから自動生成された直後
<img width="340" alt="スクリーンショット 2020-07-21 12.31.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f6fcbe16-1d54-8183-3285-d1805e0781b1.png">

- 空いている場所で[右クリック]-[Create State]-[Empty]で空のブロックを作る
<img width="506" alt="スクリーンショット 2020-07-21 12.31.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/35adcaf9-5dd2-e894-eef7-c55f374d761e.png">

- グレーの「New State」のブロックで右クリックして、「Set as Layer Default State」を選択する。
グリーンの「Entry」の次のブロックは、「New State」にするぜ、という設定です。
<img width="492" alt="スクリーンショット 2020-07-21 12.32.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ff62d5e3-9290-88bc-7ea9-58a79b91d4be.png">

- 下図のようになったらok。
<img width="341" alt="スクリーンショット 2020-07-21 12.32.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/31bb0a32-d514-f792-e85f-9727d9348aed.png">


---

- つづいて、オレンジのブロックから、電気のスイッチのように、
「オンになったらアニメーションする」ように、パラメーターを作ります。
- 下図のように、「Animatorコントローラー」の中にある[Parameters]-[+]-[Bool]を選択します。
Bool型はTrueかFalseのみ返すので、今回はBool型を使用します。
よく[Layers]で追加しようとするケースがあるので、注意しましょう。
<img width="333" alt="スクリーンショット 2020-07-21 10.24.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/56e5d966-d1a1-76bd-e09a-94a1dff721a2.png">
- 下図のように、適当な名前をつけます。
今回は、
「Bool型である」
「アニメーションは回転(Rotation)である」
「Boolの略としてblとする」
「Rotationの略としてRotとする」　を含めて、「blRot」と命名しました。
決して、「aaaaaaaa」とか「fvum@afwvfujiko」とか、悪い意味での適当はやめましょう。
<img width="248" alt="スクリーンショット 2020-07-21 10.30.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4abd5f8e-e266-59be-5b7d-b646ea25751d.png">
- 今度は、オレンジの空ブロックから、ちゃんとcubeanimへ遷移するようにします。
下図のように、オレンジのブロックで[右クリック]-[Make Transition]を選択します。
矢印が、マウスカーソルを追っかけるので、そのままグレーのcubeanimをクリックします。
<img width="370" alt="スクリーンショット 2020-07-21 10.33.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2301916e-24a6-e857-96bb-3b79066ef911.png">

- 下図のように矢印がつながったらok。
<img width="195" alt="スクリーンショット 2020-07-21 10.35.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c13b161e-2150-ccba-5be5-a5517418bede.png">

- 同じように、グレーのcubeanimで[右クリック]-[Make Transition]を選択して、
今度はオレンジのブロックをクリックします。
下図のようにお互いが矢印でつながったらok。
<img width="195" alt="スクリーンショット 2020-07-21 10.44.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2b46eaca-6f1f-24ea-82e2-088796f5f053.png">

- 最後に、オレンジのブロックから、グレーのcubeanimへ、決められた条件で遷移するように設定します。
下図のように、矢印をクリックして、インスペターウィンドウを表示させておきます。
<img width="475" alt="スクリーンショット 2020-07-21 10.46.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/846ffded-82e2-6d2c-31bf-eac1468665c8.png">

- 下図のように、「Conditions」の項目が「List is Empty」となっており、「何も入ってないよ!!」という状態なので、ここにBool型のパラメーターを追加してあげます。
<img width="262" alt="スクリーンショット 2020-07-21 10.46.19のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8f148fc2-031a-5d9a-6bd2-38aa996964b1.png">

- 下図のように、[+]を押すと、現在設定されているパラメーターが追加されます。
今回はこのままで問題ありません。
<img width="262" alt="スクリーンショット 2020-07-21 10.46.19のコピー2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/124700be-4594-efb0-b7f9-8d4c68661a51.png">
↓
<img width="280" alt="スクリーンショット 2020-07-21 10.50.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9ae976df-e9df-4367-47a8-f9113bd19a19.png">

- 同様に、グレーのcubeanimから、オレンジのブロックへ戻る矢印も、
下図のように「Conditions」を設定します。この場合は「blRot」が「false」のときに遷移するようにします。
<img width="534" alt="スクリーンショット 2020-07-21 11.14.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/dc2a47d6-1887-cbae-16a5-6bc2c3d0f716.png">


## 3. スクリプトの作成

- オブジェクトcube内にスクリプトを作ります。
作り方(スクリプトのアタッチの仕方)は割愛します。
スクリプト名は適当につけてください。今回の例では「cubemove」としています。

- 下記スクリプト例のように、必要なのはたったの3行です。
(あとはどのタイミングでanimationを動かすかなので、if文の分だけステップ数が増えます)

```
public class cubemove : MonoBehaviour
{
    //===== 定義領域 =====
    private Animator anim;  //Animatorをanimという変数で定義する

    //===== 初期処理 =====
    void Start()
    {
        //変数animに、Animatorコンポーネントを設定する
        anim = gameObject.GetComponent<Animator>();
    }

    //===== 主処理 =====
    void Update()
    {
        //もし、スペースキーが押されたらなら
        if (Input.GetKey(KeyCode.Space))
        {
            //Bool型のパラメーターであるblRotをTrueにする
            anim.SetBool("blRot", true);
        }
    }
```

## 4.動作確認


- 実行すると、Spaceキー押下時に、
下図アニメーションgifのように、cubeが「一回だけ回転」します。
(gifアニメだからループしているので注意)

![cubeanim動作確認.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d67aa471-3096-d209-73ea-b889f8b94e11.gif)