VRやゲーム制作において、アニメーションは非常に重要です。
Unityには様々なアニメーション機能が用意されています。
Unityに用意されたアニメーション機能を使うと、プログラミング不要で高度なアニメーションを作ることができます。
本記事では図形モデルを動かすアニメーションについて、基本から紹介します。
アニメーションビューを表示する
Unityでアニメーションを作成する際は、「アニメーションビュー」上で作業をします。
アニメーションビューを表示するにはまず、「Window」メニューから「Animation」を選択してください。

アニメーションビューを開く
アニメーションビューが別ウィンドウで表示されました。
このままでは作業がしづらいので、同じウィンドウにまとめます。

アニメーションビューが現れる
「Animation」と書かれたタブの部分をドラッグしてどこかのウィンドウに組み込みます。
筆者はエディタウィンドウにまとめました。

エディタウィンドウに組み込む
Cubeを回転させる
まずはCubeが回転するだけの、シンプルなアニメーションを作っていきましょう。
まずはHierarchyウィンドウで右クリックして「3D Object」→「Cube」でCubeを作成してください。
(メニューバーの「Game Object」から作成しても問題ないです)

Cubeを作成
Cubeを選択した状態でアニメーションビューを開くと、「create」というボタンがあります。
これはアニメーションの記録をするボタンです。
クリックしてください。
アニメーションクリップのファイル名と保存場所を指定する画面が表示されるので、今回はファイル名は「Rotate」で、保存場所はデフォルトの設定で大丈夫です。

アニメーションクリップファイルを保存
保存したアニメーションクリップファイルはプロジェクトファイル内の「Assets」フォルダに含まれています。
このアニメーションクリップは他のプロジェクトでも使用できますが、今は覚えなくても大丈夫です。

アニメーションクリップファイルの保存場所
それではアニメーションの設定に入っていきましょう。

アニメーションビュー初期状態
アニメーションビューでは「Add Property」ボタンを使ってアニメーションの設定をする項目を追加していきます。
まずは「Add Property」をクリックしてください。

「Add Property」を選択
Rotateプロパティを追加する
Cubeが回転するための項目を作ります。
「Add Property」をクリックして「Transform」左横の矢印をクリックして展開し、「Rotation」の右側の+ボタンをクリックしてください。

Rotateプロパティを追加
アニメーションビューにRotateプロパティが追加されました。

アニメーションビューにRotateプロパティが追加された
このように、アニメーションビューではアニメーションで操作したい内容を「Add Property」で追加し、その値を変化させるアニメーションを作ります。
Rotateプロパティの設定
アニメーションビューのRotationの左にある矢印をクリックして展開すると、中に「Rotation.x」「Rotation.y」「Rotation.z」という項目があることがわかります。
これはInspectorウィンドウのTransformのそれぞれの数値を表します。

Rotationを展開
右側にあるグラフ部分を見てみると、「Cube:Rotation」とその中の3つの項目に◇マークが表示されています。

アニメーションビューのキーをチェック
これが「キーフレーム」というもので(「キー」ともいいます)、その点におけるアニメーションの情報を設定します。
キーの設定
キーの設定をしていきます。
「Rotation.y」の0:00にあるキーの◇マークをクリックしてください。
「Rotation.y」右の数値は0ですが、このままにします。

0:00のキー設定
次に、1:00の「Rotation.y」キーをクリックしてから0となっている数値をクリックして、360にしてください。

1:00のキー設定
このグラフは「0:00から1:00にかけてCubeがY軸を中心に0°〜360°回転する(つまり1周)」という設定を意味しています。
シーンを実行してみましょう。

Y軸を中心にした回転
Y軸を中心に回転していますね。
Curves表示
キーを設定することでアニメーションを作る方法はわかりましたが、グラフの表示の仕方について少し紹介します。
Animationビュー下部を見ると「Dopesheet」と「Curves」の2つのボタンが表示されています。
デフォルトではDopesheetが選択されていて、今までの設定もDopesheetで行なっていました。

Curvesを選択
Curvesを選択してみましょう。

Curves表示
Rotation.yの横に黄色の◇マークが表示され、グラフ上には黄色の線があります。
これはRotation.yの数値の変化を直感的に理解するのに役立ちます。
Dopesheet表示ですと複数のキー設定をする時にキー一覧を確認しやすいですが、Curves表示ですと数値の変化を把握しやすいです。
この2つの表示をうまく使い分けながらアニメーションを作っていきましょう。
アニメーションクリップの設定
Projectビューを見ると、「Cube」と「Rotate」という2つのファイルがあります。

Projectビューを確認
「Rotate」はアニメーションクリップのファイルです。
アニメーションクリップは具体的なアニメーションの内容を記録しています。
「Cube」はアニメーションコントローラのファイルです。
アニメーションコントローラはアニメーションの発生条件等、どういう時にどのアニメーションを発生させるかを決めます。
「Rotate」ファイルを選択して、Inspectorウィンドウを表示してください。

アニメーションクリップのInspectorウィンドウ
各項目の機能を紹介します。
「Loop Time」:
ここにチェックが入っていると、アニメーションが繰り返し再生されます。チェックを外すと、1度再生されたらアニメーションが停止します。
「Loop Pose」:
アニメーションを滑らかにループ再生するためのチェックです。
「Cycle Offset」:
ループ再生する際のアニメーション開始の位置をずらすための機能です。この数値を大きくすると、ループ再生の開始位置がずれます。
アニメーションコントローラ
Projectビューの「Cube」をダブルクリックすると、アニメーションコントローラが表示されます。

アニメーションコントローラ
このビューにはデフォルトで3つのパーツが配置されていますが、これらはアニメーションに関する設定を表しています。
アニメーションコントローラの設定方法は少し難しいので、今はここでアニメーションコントローラの中身を編集できるということだけ把握しておけば大丈夫です。
複数のアニメーションを追加
ここまで学んだ内容を踏まえて、移動・回転・拡大のアニメーションを全て含めたアニメーションを作ってみました。

アニメーションビューの設定

移動しながら回転しながら巨大化するCube
STYLYにアップロード
UnityからSTYLYにアイテムをアップロードする方法は以下の記事で詳しく紹介しているので、参考にしながらアップロードしてみてください。

WebStudioで確認
Web Studio上でもアニメーションが確認できました。
Unityのアニメーション機能を使うと、プログラミング不要で自分好みのアニメーションを作成することができます。