アニメーション
ものを動かす方法は 3 つあります。このページでは、目的に合った方法を選んで設定する手順を説明します。
アニメーションの方法を選ぶ
| 方法 | 向いている用途 | 設定する場所 |
|---|---|---|
| トランジション | ある値から別の値へ、1 回だけなめらかに変える | Set state ステップに設定する長さ（時間） |
| タイムライン | キーフレームを使った動き、または複数のオブジェクトを一緒に動かす | Animation パネル。開始するのは Play animation ステップです |
| モデルクリップ | 読み込んだモデルに最初から入っているアニメーション | Animation パネル。読み込み時にここに入ります |
例えば、次のように使い分けます。
- ボタンのフェードや、タップすると開くドアは、別のステートへのトランジション
- カットシーンはタイムライン
- 歩くキャラクターはモデルクリップ
同じオブジェクトを 2 つの方法で同時にアニメーションさせないでください。タイムラインは、トランジションを知らないうちに上書きします。アニメーションどうしがぶつかっているように見えるときは、これが原因です。
トランジション
変化に長さ（時間）を設定すると、値が一気に切り替わらず、なめらかに変わります。Set state ステップと Override properties ステップには、どちらも長さとイージングがあります。
なめらかに変化するプロパティと、トランジションの最後に切り替わるプロパティがあります。詳しくはなめらかに変化するものを参照してください。
スクリプトでは、ctx.startTransition で繰り返したり、行ったり来たり（yoyo）させたりもできます。
行ったり来たりさせるには、repeat: 2 以上が必要です。
アニメーションステップ
イベントは、2 つのステップでアニメーションを開始・停止します。
| ステップ | すること |
|---|---|
| Play animation | タイムラインのアニメーションを、どのオブジェクトでも再生します。ループの方法、繰り返し回数、速度、遅延を設定できます |
| Stop animation | それを停止します |
イベントから何かを移動・回転・拡大縮小したり、フェードさせたり、色を変えたりするには、Animation パネルでアニメーションをつくり、Play animation で再生します。1 回だけの変化なら、長さを設定した Set state で十分です。
以前につくったプロジェクトには、Transformation、Opacity、Material、Bone transform、Built-in animation の各ステップが残っていることもあります。これらはそのプロジェクトでは引き続き動きますが、エディターではもう選べません。例えば Material は、対象の色、不透明度、発光、表面の設定を保存したマテリアルに近づけるようにブレンドし、各スロットの種類とテクスチャはそのまま保ちます。
キーフレームとイージング
キーフレームは、ある時点での値です。イージングは、キーフレームとキーフレームの間で値がどう変化するかを決めます。
イージングは、値が離れていく側ではなく、値が向かう側のキーフレームに設定します。イージングがない場合、値は直線的に変化します。
イージングは、CSS の cubic-bezier と同じく、2 つのハンドルを持つカーブです。名前の付いたプリセットは、あらかじめ用意されたハンドルの位置です。quad、quart、circular、expo、back があり、それぞれに In、Out、InOut があります。
| イージング | 動きの印象 |
|---|---|
| In | ゆっくり動き出して加速します。走り出すものに向いています |
| Out | 到着して落ち着きます。UI ではいちばん自然です |
| InOut | 始まりも終わりもゆっくりです。長い移動に向いています |
| Back | 終点を少し越えてから戻ります。遊び心のある動きです |
| Elastic | 終点を越えて揺れます。揺れの大きさと周期を設定できます |
| Step | 値を保ったまま、最後に一気に切り替わります。滑らせずに切り替えたいときに |
迷ったら Out から始めましょう。
タイムライン
複数のものを 1 つの時計に合わせて一緒に動かしたいときは、Animation パネルを使います。パネルの使い方は Animation パネルで説明しています。
タイムラインは 3 つの階層でできています。
- プリセットは、名前を指定して再生できる 1 つのアニメーションです。
- バーは、その中の 1 つのオブジェクトの受け持ち部分で、トラックの上に置かれます。
- バーの中では、プロパティごとにキーフレームを持ちます。
バーは再生バーにすることもできます。再生バー自体は何もアニメーションさせません。そのかわり、再生ヘッドがそこに来たときに、別のオブジェクトのプリセットを開始します。手足ごとにプリセットがあるキャラクターでも、これで動きがそろいます。
- ループと速度の設定は、再生バーが開始するすべてのプリセットに引き継がれます。
- プリセットを止めると、そのプリセットが開始したものもすべて止まります。
バーの中のプロパティを 1 つだけミュートすることもできます。例えば、位置と回転をアニメーションさせるバーで、回転だけをオフにできます。キーフレームは残ります。
モデルに付いてきたアニメーションは、元のカーブをそのまま保ちます。読み込んだ歩行サイクルは、作られたとおりに再生されます。
モデルクリップ
モデルには、名前の付いたクリップが含まれていることがあります。モデルを読み込むと、それぞれのクリップが、クリップと同じ名前のアニメーションとしてモデルに追加されます。自分でつくったアニメーションと同じように、Animation パネルに表示されます。
イベントからクリップを再生するには、Play animation ステップを使い、そのアニメーションを選びます。
単位
- 時間は秒です。ステートを切り替えるときの長さはミリ秒です。
- 回転は、画面に表示されるところではすべて度です。
3 つの方法のどれも、アニメーションが終わったことを知らせてくれません。アニメーションのあとに何かを始めたいときは、同じ長さの Wait, then ステップを使うか、スクリプトで時間を計ってください。
次へ： ステート — オブジェクトの見た目を保存して、切り替えます。