アニメーション
何かを動かす方法は 4 つあります。これは同じものの階層ではなく、本当に別々の道具です。まずやる ことは、正しいものを選ぶことです。
| 方法 | 得意なもの | 設定する場所 |
|---|---|---|
| トランジション | ここからそこへの、なめらかな 1 回の変化 | ステップや state の時間指定 |
| アニメーションのステップ | イベントに付ける、使い回せる動き | イベントの中のステップ |
| タイムライン | 演出。複数のオブジェクト、複数のトラック、1 つの時計 | Animation Controller |
| モデルのクリップ | 読み込んだモデルに付いてきたアニメーション | そのモデル自身の設定 |
ざっくり言えば、ボタンのフェードはトランジション、タップで開くドアはアニメーションの ステップ、カットシーンはタイムライン、歩くキャラクターはモデルのクリップです。
同じオブジェクトを 2 つの方法で同時にアニメーションさせてはいけません。タイムラインは毎フレーム 対象に書き込むので、トランジションを黙って上書きします。アニメーションが自分自身と争って見える ときの原因はこれです。
トランジション
変化に時間を指定すると、飛ばずになめらかに変わります。時間を指定した state の切り替えにも、 時間を指定したイベントのステップにも当てはまります。
トランジションには時間、イージング、そして任意で繰り返し回数と往復（ping-pong）があります。 なめらかに変化できるものは なめらかに変化するものに一覧があります。 それ以外は最後にまとめて変わります。
往復は 2 から始まります。これによって、古いプロジェクトが突然脈打ちはじめることがありません。
アニメーションのステップ
アニメーションのステップは、指定した対象を移動・回転・スケール・フェードさせます。
到達点を 1 つだけ与えれば、そこへなめらかに向かいます。キーフレームを 2 つ以上与えれば、 カーブ全体を再生します。
| ステップ | 動かすもの |
|---|---|
| transformation | 位置・回転・スケール |
| 不透明度 | フェードインとフェードアウト |
| ボーンの transform | 1 本のボーン |
| マテリアル | 保存済みマテリアルの見た目を対象にコピーします |
| アニメーションの再生 / 停止 | タイムラインのプリセットを開始・停止します |
キーフレームとイージング
キーフレームとは、時刻と値のことです。
出ていく側ではありません。イージングは到達先のキーフレームに設定してください。イージングなしは 直線を意味します。
イージングは、CSS の cubic-bezier とまったく同じ、2 本のハンドルを持つカーブです。名前の付いた
プリセット（quad・quart・circular・expo・back、それぞれ In・Out・InOut）は、便利なハンドル位置に
すぎません。
| イージング | 感じ |
|---|---|
| In | ゆっくり始まり、速度が乗る。動き出すもの |
| Out | 到達して落ち着く。UI にはいちばん自然 |
| InOut | 両端でやわらかく。長い移動に向きます |
| Back | 少し行きすぎて戻る。遊びのある動き |
| Elastic | 行きすぎて揺れる。量と周期を指定できます |
| Step | 保持して、最後にパチッと切り替わる。滑らせず切り替えたいときに |
迷ったら、Out がほぼ常に正しい第一候補です。
タイムライン
Animation Controller は演出のための道具です。複数のものが 1 つの時計に合わせて動きます。
構造は 3 階層です。
- プリセットは、名前を指定して再生できる 1 本のアニメーション
- バーは、その中の 1 オブジェクトのパートで、トラックの上に載ります
- バーの中では、プロパティごとにキーフレームを持ちます
バーは再生バーにもできます。自分では何もアニメーションさせず、再生ヘッドが到達したときに 別のオブジェクトのプリセットを開始します。手足が別々のプリセットになっているキャラクターが そろって動くのはこの仕組みです。ループと速度は、そこから開始されたものすべてに引き継がれ、 プリセットを止めれば、それが開始したものもすべて止まります。
バーの中のプロパティは個別にミュートできます。位置と回転をアニメーションさせているバーから、 キーフレームを失わずに回転だけを外せます。
モデルと一緒に届いたアニメーションは近似し直されません。読み込んだ歩行サイクルは、制作者が 作ったとおりに再生されます。
モデルのクリップ
モデルは、名前の付いたクリップを自分で持ってきます。1 つ選び、速度、ループ（1 回・回数指定・ 無限）、開始フレームを設定します。開始フレームは、元素材のレートにかかわらず毎秒 30 フレームで 数えます。
クリップや開始フレームを変えると巻き戻ります。一時停止は、リセットではなく現在の時刻を保持します。
単位と、1 つだけ存在しないもの
- 時間は秒（state 切り替えの時間はミリ秒）
- 回転は、目に見えるところではすべて度
- 開始フレームは 30 fps で数えます
4 つの仕組みのどれも用意していません。アニメーションのあとに何かを続けたいときは、同じ長さの 待機ステップを使うか、script で経過時間を数えてください。
次へ: States — オブジェクトの、名前の付いたスナップショット。