アニメーション

アニメーション応答の作成

フルアクションパネル / コンパクトアクションパネル

• 再生ヘッドと呼ばれる白い垂直線。現在の時間を示します。ドラッグするか、左側のフィールドに特定の時間を入力できます。
• アニメーション対象の要素やプロパティごとのキーフレームトラック。水平レーンとして表示されます。
• トラック上のひし形のマーカー。プロパティの変更が発生するキーフレームを表します。

• 現在の時間を表す再生ヘッド。
• 各アニメーション要素・プロパティのキーフレームトラック
• キーフレームの位置を示すマーカー。

• 再生ヘッドをドラッグして時間をスクラブします。
• キーフレームを直接追加または削除します。
• レイヤーを展開して、プロパティ固有のアニメーションを表示します。
• より細かい制御のためにズームイン/アウトします。

キーフレーム

キーフレームの作成

• アニメーションのデュレーションを設定し、全体の長さを定義してからその範囲内で変更を行います。
• または、フルアクションパネルを開き、再生ヘッドをプロパティを変更したい正確な時間に移動します。これにより、アニメーションの正確なタイミングとレイヤー化が可能になります。

方法A：プロパティの変更による自動追加

1. 要素を選択します。
2. キャンバス上、またはプロパティパネルでそのプロパティを直接調整します。
3. 現在の再生ヘッドの位置にキーフレームが自動的に追加されます。

方法B：手動でキーフレームを追加

1. タイムラインパネルで特定のプロパティにカーソルを合わせます。
2. ひし形のアイコンが表示されたら、それをクリックして現在の再生ヘッドの時間にキーフレームを挿入します。

キーフレームの調整

• キーフレームをドラッグしてタイムラインに沿って移動し、アニメーションのタイミングを変更します。
• キーフレームの時点で任意のパラメータを変更して、その時点のアニメーションを更新します。
• ⌫ BackspaceまたはDeleteキーを押して、キーフレームを削除します。
• キーフレームを選択し、Command ⌘+C（Mac）またはCtrl+C（Windows）を押してコピーし、後ろの時間に移動してからペーストします。

• 現在の時間に複製： 現在の時間にキーフレームのコピーを作成します。複製は、再生ヘッドがキーフレームの時間とは異なる時間に設定されている場合にのみ効果があります。例えば、1秒の位置にあるキーフレームに基づいて新しいキーフレームを作成するには、複製する前に時間を少し後（1.2秒など）に設定します。Command ⌘+D（Mac）またはCtrl+D（Windows）を押すと、キーフレームが複製されます。
• 初期値にリセット： 選択したキーフレームのプロパティを、アニメートモードがオフのときの値と同じになるように切り替えます。これは、ループアニメーションを作成するのに役立ちます。
• キーフレームを削除： キーフレームを削除します。アニメーションは、それが存在しないかのように再計算され、削除されたキーフレームの両側にあるキーフレームを接続します。

補間

0秒	0.5秒	1秒

アニメーションプリセット

アニメーションプリセットの適用方法

1. 要素を選択し、プロパティパネルの「プリセット」オプションをクリックします。
2. 目的のプリセットを選択し、要素に適用します。

アニメーションプリセットの種類

• フェードイン： 透明から不透明へ、徐々に表示されます。
• フェードアウト： 不透明から透明へ、徐々に非表示になります。
• ムーブイン： 要素が画面外の位置から移動して表示されます。
• ムーブアウト： 要素が画面外に移動して非表示になります。
• スケールイン： 要素が小さなサイズから拡大されて表示されます。
• スケールアウト： 要素が縮小されて非表示になります。
• スピンイン： 要素が画面外の位置から回転しながら表示されます。
• スピンアウト： 要素が回転しながら非表示になります。
• トリムイン： パスが描かれるように徐々に表示されます。
• トリムアウト： パスが消されるように、徐々に非表示になります。

アニメーションプリセットの調整

1. ディレイを使用して、アニメーションが開始されるまでの待機時間を設定します。

1. タイムラインを開きます
2. 該当要素のトラックセグメントを見つけます。
3. トラックセグメントの端をドラッグして、アニメーションプリセットのデュレーションを調整します。

パスのトリミング

パスのトリミングの作成

1. パスのトリミングを適用したい図形を描きます（長方形、円、またはカスタムパス）。
2. プロパティパネルの「エフェクト」横にあるアイコンをクリックして、パスのトリミング機能を有効化します。
3. 再生ヘッドを開始地点（通常は 0 秒）に移動します。
4. 開始と終了の値を 100% に設定します。
5. 再生ヘッドを終了地点に移動します。
6. パスのトリミングの開始を 0%、終了を 100% に設定します（0%で線が表示され始めます）。
7. 再生して確認します。

オフセット

パスのトリミングモード

同時

個別

モーションパス

基本構成

• モーションパスの開始点：要素の動きのスタート地点。
• モーションパスの点：パス上のキーポイントとなる位置。
• モーションパスの曲線の操作：ポイント間の曲線の調整。
• モーションパスのセグメント：2つのモーションパスポイント間の区間。

モーションパスの作成

1. タイムライン上の再生ヘッドを移動して、開始点を設定します。
   要素を動かすと、モーションパスが自動生成されます。
2. 位置のキーフレームには、X値とY値の両方が自動的に含まれます。

曲線のモーションパス

• モーションパスの点を選択して、形状オプションを表示します。
  • ストレート：カーブのない直線。
  • ミラー：ハンドルの長さが同じで、左右対称の曲線。
  • アシンメトリック：ハンドルの長さが異なる、左右非対称の曲線。
  • インデペンデント：両方のハンドルを個別に操作可能。
• 曲線コントロールハンドルを使用して曲線を調整します。

方向

タイミング、デュレーション、イージング

• 時間：キーフレームを使って各セグメントの速度を調整可能
• デュレーション：パスはタイムラインのデュレーションを超えることができますが、超過した動きはレンダリングされません。
• イージング：各パスセグメントごとに適用可能で、動きの滑らかさを調整します。

例：バウンドするボール

• スカッシュとストレッチのテクニックを使うことで、よりリアルな動きを表現できます。
• ボールの重さは、バウンドの速度と高さに影響します。
• 曲線の調整を使用して、跳ね返りの動きを細かく制御できます。

イージング

イージングの使用方法

1. キーフレームを選択します。
2. プロパティパネル下部の イージングコンテキストメニュー を開きます。
3. プリセットを選ぶか、カーブハンドルを直接操作してカスタムカーブを作成します。

イージングパネルの機能

• ビジュアルカーブエディタ：ハンドルを直接ドラッグして曲線を調整します。
• タイプメニュー：イーズイン、イーズアウトなどのプリセットを選択します。
• カスタムモード：ハンドルが手動で調整されたときに自動的に有効化されます。
• ベジェ座標：[Bx, By, Tx, Ty] 形式として表示され、数値による微調整も可能です。

カーブグリッド

• 2本のハンドルを持つグラフ表示で操作します。
• ハンドルが長いほど変化が大きくなります（強いカーブ）。
• ハンドルが短いほど変化が穏やかになります（緩やかなカーブ）。

プリセットイージングタイプ

基本的なイージング

• ステップ：次のキーフレーム値に一瞬で切り替わります。
• リニア：一定速度で変化し、加速/減速なし。
• イーズイン：ゆっくり始まり、速く終わります。
• イーズアウト：速く始まり、ゆっくり終わります。
• イーズインアウト：滑らかな始まり、滑らかに終わります。

バックイージング

• イーズインバック / アウトバック / インアウトバック：始点または終点、またはその両方で一度オーバーシュート（反動）してから戻る効果を追加します。

エラスティック＆バウンス

ホップイージング

ベジェ曲線の理解

• すべてのイージングカーブはベジェ曲線に基づいており、キーフレームに付属するハンドルで制御されます。
• 開始点（0,0）と終了点（1,1）は固定されます。
• ハンドルのX値は0〜1の範囲で固定され、Y値は上下に拡張可能。
• 値が大きいほど急なカーブになりますが、変化が極端すぎると効果が得にくくなる場合もあります（収穫逓減）。