Skip to content
1. Mayaでアニメーションを作成
最初に下のGifアニメーションのように1つのオブジェクトが直線移動する単純なものを作成します。
出現ー移動ー消失 を繰り返すようにし、Unityでこの動きをループさせます。
タイムスライダは 開始1フレームから終了300フレームまでとし、このオブジェクトは中間の150フレームで右端(X = 20メートル)へ達すると同時に消失します。
残りの何もない時間は、この後でオブジェクトを複製し、合計5個にして動かすためにフレームを空けてあります。
![Maya1_単独.gif Maya1 単独](https://toshihiko-kato.com/wp-content/uploads/2020/07/Maya1_単独.gif)
初めてタイムスライダを使う場合、画面右下のアイコンをクリックし、プリファレンスで再生速度を設定します。
![名称未設定35.png 名称未設定35](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定35.png)
![名称未設定36.png 名称未設定36](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定36.png)
タイムスライダでのキーフレーム作成は、作成するフレームに現在時間を移動し、S キーを押すだけです。もしくは、チャネルボックスの該当項目で右クリックして「選択項目のキー設定」を選びます。 この場合、項目だけにキーフレームが作れますが、Sキーを押すと全ての項目にキーが作成されます。
![名称未設定34.png 名称未設定34](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定34-1.png)
X軸に沿って等速移動するだけですが、「移動X」以外に「可視性」が ONーOFFするようにキーフレームを打ちます。
可視性のオンは 1 を入力、オフは 0 を入力します。
![UntitledImage.png UntitledImage](https://toshihiko-kato.com/wp-content/uploads/2020/07/UntitledImage-1.png)
キーフレームは「移動 X」が1フレームで 0 、150フレームで 20 とします。
「可視性」は、1フレームで 0 (OFF)、8フレームで 1(ON)、 148フレームで 1(ON) 、150フレームで 0 (OFF) です。
![タイムスライダ.png タイムスライダ](https://toshihiko-kato.com/wp-content/uploads/2020/07/タイムスライダ.png)
下図は1フレーム時のオブジェクトの開始位置ですが、実際は可視性を0にしていますので見えません。
ピボット位置を右下角に移動し、トランスフォームをフリーズしてこの位置で X = 0 とします。
![名称未設定5.png 名称未設定5](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定5-3.png)
2. グラフエディタ
ワークスペースを 「アニメーション」に切り換えます。
グラフエディタの画面操作、ズーム、パンなどは2Dのビューポートと同じです。左項目欄で「可視性」を選択している状態です。
![名称未設定2.png 名称未設定2](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定2-4.png)
グラフエディタでのキー操作
グラフエディタでキーフレームを追加するには、追加するフレームに移動し右マウスプレスから「キー挿入」を選択します。
![グラフエディタでキー作成.gif グラフエディタでキー作成](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフエディタでキー作成.gif)
キーフレームの移動は、ドラッグするだけです。
shiftキーを押しながらドラッグすると、最初に移動した方向(時間軸または値)に制限して移動できます。
![グラフエディタでキー移動.gif グラフエディタでキー移動](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフエディタでキー移動.gif)
左項目欄で「 移動 X」も選択し、「可視性」と合わせて2つのグラフを表示します。
「移動 X」のグラフに合わせてタテ(値)方向の表示範囲が広くなるため、「可視性」のグラフは変化量が小さく表示されます。
ビュー >> 自動フレーム調整 をOFFにすれば自動で変更されなくなります。
3Dビューと同じく、Fキーを押すと選択要素のグラフが全体表示できます。
![名称未設定3.png 名称未設定3](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定3-1.png)
上の図では「移動 X」のグラフ2つのキーフレームをリニア接線に変更し、等速運動に変えてあります。
デフォルトのキーフレームは、下図のようにイージングが適用される曲線「自動接線」になります。
![名称未設定6.png 名称未設定6](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定6-3.png)
しかし今回は等速運動させるので、2つのキーフレームを選択し、「リニア接線」を適用します。
「移動 X」のキーフレームは図の2カ所だけ、1フレームで 0 、150フレームで 20 です。
![名称未設定7.png 名称未設定7](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定7-2.png)
「可視性」のキーフレームは図のとおりです。
値は 0 と1 どちらかですので、1と150フレームで 0 、8と148フレームで 1 に設定します。
![名称未設定8.png 名称未設定8](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定8-4.png)
以上で一つ目のオブジェクトのアニメーション設定は完了です。
次はこれを4個複製し、それぞれの移動時間をずらして完成させます。
3. アニメーションを含めた複製
次のGifアニメーションが完成アニメーションです。(Gifのためフレームレートは12fpsで表示しています。)
![パネルアニメ5個.gif パネルアニメ5個](https://toshihiko-kato.com/wp-content/uploads/2020/07/パネルアニメ5個.gif)
オブジェクトをアニメーショングラフを含めて複製するには、「特殊な複製」でオプションを設定して実行します。
最初に作成したオブジェクトを選択し、編集 >> 特殊な複製▢ でオプションを開きます。
オプションでは、下図のように設定してください。
![名称未設定9.png 名称未設定9](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定9-1.png)
アウトライナでオブジェクトを確認します。 4つ複製し合計5個のオブジェクトになります。
![名称未設定30.png 名称未設定30](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定30.png)
この後それぞれ名前をつけ替えていますが、Unityで開いたときに並び順などが変化することもあります。
ここでは下のように名前を変更していますが、あとで配置順が分かりやすい方が良いでしょう。
![UntitledImage.png UntitledImage](https://toshihiko-kato.com/wp-content/uploads/2020/07/UntitledImage-3.png)
4. アニメーショングラフの設定
このままでは5個とも同時にアニメーションするだけなので、次はそれぞれ時間を30フレームずつ遅らせます。
その前にグラフエディタの設定変更とエディタの操作について説明します。
自動フレーム調整をOFFにする
デフォルトでは「自動フレーム調整」がONのため、グラフがエディタ画面全体に表示されます。
現在150フレームより後はグラフがないので表示されません。このままでは時間を後へ移動する操作がやりにくいので「自動フレーム調整」をOFFにしてください。
(300フレームにキーフレームを作っても良いですが…)
グラフエディタ メニューの ビュー >> 自動フレーム調整 のチェックを外します。
![名称未設定31.png 名称未設定31](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定31.png)
エディタ画面の表示をタテ・ヨコ独立してストレッチする
option + shift キーを押しながら、右マウスボタンでヨコ方向へ画面をドラッグして縮小し、0 〜 300 フレームの範囲を表示します。
最初に動かす方向によって、タテかヨコかストレッチ方向が決定します。
画面の移動は、option キー + 中マウスボタン でドラッグです。
option + shift キーを押しながら、右マウスボタンドラッグ
![グラフ画面ストレッチ2.gif グラフ画面ストレッチ2](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフ画面ストレッチ2.gif)
グラフカーブ全体の選択
最初のオブジェクト以外の4つをアウトライナで選択します。 4つ同時にグラフカーブの移動を行い、次は3つ、更に次は2つ…というように数を減らしながらカーブを移動します。
オブジェクト自体を選択すれば、移動 X と 可視性 の2つのカーブは自動的に表示されます。
![名称未設定32.png 名称未設定32](https://toshihiko-kato.com/wp-content/uploads/2020/07/名称未設定32.png)
カーブ全体を選択するためには、キーフレームではなく、カーブのラインをドラッグで囲んで選択します。
![グラフカーブ選択.gif グラフカーブ選択](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフカーブ選択.gif)
グラフカーブの移動
カーブ全体を選択したら、shift キーを押しながらいずれかのカーブのライン上をドラッグして移動します。
shift キーを押しながらドラッグすることで、ヨコまたはタテに移動方向が限定されます。
今回は時間軸方向へ30フレーム移動してください。
最初のキーフレームの位置が 30 フレーム移動するようにします。
![グラフカーブの移動.gif グラフカーブの移動](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフカーブの移動.gif)
ここまでの操作を選択するオブジェクトを減らしながらあと3回同じように繰り返します。
結果として、5つのオブジェクトのアニメーションカーブが図のようになれば完成です。
![グラフ完成.gif グラフ完成](https://toshihiko-kato.com/wp-content/uploads/2020/07/グラフ完成.gif)
以上で、移動と出現・消失アニメーションの説明は終わりです。
次はUnity でこのアニメーションを動かすための設定について説明します。