この記事では、Unityのアニメーションについて紹介します。

最近、UIをUnityへ実装する際にAnimatorのステート周辺の設定を行うようになり、

少しずつ理解が深まってきたため、その備忘録としてまとめました。

目次

1.Unityのアニメーションについて

2.アニメーションを作成するには

3.まとめ

1.Unityのアニメーションとは

アニメーションとは、オブジェクトの動きや状態を記録・再生する機能です。

例えば、UIの表示や非表示、ボタンのアニメーション、UIに関係する演出によく使用します。

今回は、アニメーションを編集するための必須機能を記載します。
以下の3つの機能を押さえておけば、基本的なアニメーションを作ることができます。

・Animator

・AnimationController

・AnimationClip

また、アニメーション同士を切り替えるために使うTransitionという機能もあります。

AnimationClip間でアニメーションをスムーズに切り替えるための仕組みです。

2.アニメーションを作成するには

それでは、アニメーション作成の手順を紹介します。

今回はアニメーション作成と別々のアニメーションを繋ぐ方法と設定までを記載します。

作成を開始する前に、アニメーション編集に必須の「Animator」ウィンドウを開いておきましょう。

Window＞Animation＞Animator で開くことができます。

①基本設定
まず、アニメーションを付けたいオブジェクトにAnimatorコンポーネントを追加します。

先ほど開いたAnimationウィンドウから「Create」をクリックし、AnimationClipを作成します。

このClipにオブジェクトの動きを記録したものがアニメーションになります。

Animationウィンドウの左側に表示されている「Add Property」をクリックし

任意の編集対象や設定したい項目を選択することでタイムラインにパラメータが追加されます。
・移動

・回転

・スケーリング

・カラー/アルファ

・オブジェクトの表示/非表示の切替 等

編集項目は複数あるため、目的に合ったパラメータを「Add Property」で追加しましょう。

表示される項目はオブジェクトについているコンポーネントに依存します。

目的に合ったパラメータが見つからない場合は、コンポーネントを見直してみましょう。

基本的な編集方法は一般的な映像編集ソフトと変わりませんが、

赤丸のボタンを押しRecordingModeにしてから、
編集点（キー）を追加しアニメーションを作成してください。

②別々のアニメーションを再生するには

UIでアニメーションを作成していると
別々のClipで作成したアニメーションを連続で再生したいことがあります。

そんな時は、Animatorウィンドウで設定をすることで繋げて再生することができます。

まず、AnimatorウィンドウにAnimationClipを追加します。

ウィンドウ上に表示されたものをステートと言います。（AnimationClip＝ステート）

追加したステートを右クリックしてMakeTransitionを選択し、

連続で再生したいアニメーションに矢印を繋ぎます。

この状態でUnityを再生すると連続したアニメーションを確認できます。

ワンポイント！Animationウィンドウにアニメーションが表示されないときは？

上記で登場したステートにAnimationClipがアタッチされていない場合があります。

Animatorウィンドウのステートをクリックしアタッチされているか確認してみましょう。
また、ステートの名称は自由に変更できるためMotion項目と名前が一致しない場合もあります。
基本は一致している場合が多いです。

アタッチされている場合

アタッチされていない場合

③Transitionとは

Transitionはステート間をつなぐものです

先ほど、「②別々のアニメーションを再生するには」で追加した矢印をTransitionと呼びます。

Transitionでは2つのアニメーション間の切り替え方を設定することができます。

アニメーションをパッと切り替えたり、アニメーション同士を混ぜて自然に切り替えたり、
意図に合わせて使い分けられます。

UIのアニメーションは以下のことから混ざり合わない設定にすることが多いです。
・一つのステートで完結した動きで作成
・ステート間の移動をプログラマーが対応

上記設定を行う場合はTransitionをクリックし

InspectorのTransitionDurationを0に設定することでスムーズな切り替えができます。

下記に添付した設定になっていれば問題ありません。
※HasExitTimeにチェックを入れるとアニメーションが終了するタイミングで
自動的に次のステートに遷移します。

④AnimatorウィンドウのParametersについて

アニメーター内でステートの切り替えに使う値です。

主に以下の4種類になり、
基本的には設定した条件がオン（True）かオフ（Flase）かを判断して再生を切り替えます。

・Bool（ブール）
Parametersにはチェックボックスがあり、オン/オフを設定できます。
後述するConditionsで条件を設定し、状態を切り替えるときに使用します。

・Int（イント）
Parametersでは数値を入力できます。
Conditionsで設定した数値との一致/不一致で再生を判断します。
複数のアニメーションを管理したい場合に使用します。

・Float（フロート）
Parametersでは小数値を入力できます。

 Conditionsで設定した条件で判断し再生を行います。

 Intより細かく条件を設定したい時に使用します。

・Trigger（トリガー）
Parametersにはチェックボックスがあり、オン/オフを設定できます。
特徴として、アニメーションの再生が完了すると自動でオフになります。
単発で再生したいアニメーションでよく使用します。

AnimatorウィンドウのPrametersから作成できます。
右側の+マークを押すことで各項目を登録することができます。

画像は例として各項目を追加してみたものです。

基本的にはTriggerを使用することが多く、
設定してプログラマーに再生タイミングなどをお伝えします。

また、Prametersを作成しただけでは

アニメーションに反映されていないのでTransitionに条件の設定をする必要があります。

Transitionをクリックし、InspectorのConditions欄を確認します。

+マークがあるのでクリックして、先ほど作成したParameterを選択すれば設定完了です。
これで指定した条件を満たしたときにアニメーションが切り替わるようになります。

補足ですが、各Parameterの名前は遷移先のステートの名前に合わせることが多いです。 

3.まとめ

以上、Unityのアニメーションについての覚え書きでした！

まだまだ使いはじめたばかりで最低限の知識となりますが、

同じようにUIアニメーションで悩んでいるデザイナーさんの助けになれば嬉しいです！