モーションパスについて

モーションパスを使用すると、曲線や複雑なシェイプに沿ってオブジェクトを移動させながらアニメーション化できます。ペンツールで線を描画する場合と同様に、アンカー ポイントを設定して、直線または曲線でポイントをつなぐことで、モーションパスを定義できます。

モーションパスのアニメーションは CSS で近似されるため、アニメーション化された要素がモーションパスに正確に沿って移動しない場合があります。通常、誤差はごくわずかであり（デフォルトでは 1 ピクセル未満）、モーションパス プロパティで誤差の許容範囲を指定できます。

モーションパスについて

このページの内容:

• モーションパスの表示
  • アンカー ポイント
  • コントロール ハンドル
• モーションパスの編集
  • モーションパスのシェイプを編集する
  • モーションパスを変形する
  • アニメーションの速度を編集する
• 最適化
• モーションパス プロパティ
• 制限事項

モーションパスの表示

単一の要素やグループを選択すると、アニメーション中に移動する場所と、アンカー ポイントが表示されます。

一度に表示できるモーションパスは 1 つのみです。

アンカー ポイント

アンカー ポイントは次の 2 つの方法で設定できます。

• 要素に新しい x 座標または y 座標を指定するサムネイルやキーフレームによって、アンカー ポイントが自動的に生成されます。キーフレームには常に、開始と終了のアンカー ポイントが含まれます。
• モーションパス ツールを使用して、モーションパスに沿ってアンカー ポイントを追加できます。

コントロール ハンドル

モーションパス ツール を選択すると、コントロール ハンドルが表示されます。アンカー ポイント間の各セグメントには 2 つのコントロール ハンドルがあり、それぞれのアンカー ポイントにコントロール ハンドルが 1 つ付属します。コントロール ハンドルの長さと方向は、モーションパスの屈曲度を示します。直線の場合、コントロール ハンドルはセグメントと近接して表示されるか、折りたたまれています。

モーションパスの編集

モーションパスのシェイプを編集する

モーションパスは、シンプルな曲線、多角形や円などの閉じた図形、他のオブジェクトの詳細な枠線といったシェイプにすることができます。モーションパスのシェイプを変更する手順は次のとおりです。

アンカー ポイントを追加

• 要素の位置が変更されるようなサムネイルやキーフレームを追加します。これによって、アンカー ポイントが追加され、イージングを変更できます。
• モーションパス ツール の [アンカー ポイントを追加] オプション を使用すると、モーションパス上の任意の位置をクリックしてアンカー ポイントを追加し、モーションパスを調整できます。この方法でアンカー ポイントを追加しても、サムネイルやキーフレームは追加されません。

屈曲度を調整する

• モーションパス ツール の [選択] ツールやデフォルトのオプション を選択した状態で、モーションパス上の任意の場所（アンカー ポイントを含む）をドラッグすると、パスのシェイプを変更できます。
• モーションパス ツール を選択した状態で、コントロール ハンドルをドラッグして、その長さや角度を変更すると、モーションパスの屈曲度が変更されます。同じアンカー ポイントにコントロール ハンドルがもう 1 つ付属している場合は、これに合わせて、もう一方のコントロール ハンドルの角度が自動的に調節されます。ただし、自動的に調節しない場合は、Alt キーを押しながら操作します。
• アンカー ポイントをダブルクリックして、付属しているコントロール ハンドルを折りたたみますコントロール ハンドルを展開するには、再度ダブルクリックします。

  モーションパスをまっすぐにするには、両方のアンカー ポイントをダブルクリックします。

アンカー ポイントを削除

• モーションパス ツール の [アンカー ポイントの削除] オプション を使用すると、既存のアンカー ポイントをクリックして、削除できます。モーションパス以外のアニメーション プロパティがなく、サムネイルやキーフレームに対応しているアンカー ポイントを削除すると、サムネイルやキーフレームも削除されます。
• サムネイルやキーフレームを削除すると、そのサムネイルやキーフレームで終了するモーションパスのセグメントが削除されます。

モーションパスを変形する

モーションパス ツール を選択して、ツール オプション バーの [変形コントロール] チェックボックスをオンにすると、モーションパスの移動、サイズ変更、反転、回転を行えるようになります。このオプションが有効になっている場合、モーションパスを含む要素を選択したときに変形コントロールが表示されます。

モーションパスを移動する

モーションパスをステージ上の新しい位置にドラッグします。

モーションパスのサイズを変更する

• サイズ変更ボックスがモーションパスを囲むように、各コーナーと両サイドにハンドルの付いた青色の線で表示されます。モーションパスのサイズを変更するには、ハンドルをドラッグします。
• Shift キーを押しながらドラッグすると、元のアスペクト比を維持できます。
• Alt キーを押しながらドラッグすると、モーションパスの中心が動かないようにすることができます。
• モーションパスを違う向きでサイズ変更するには、ツール オプション バーの に回転角度を入力して、サイズ変更ボックスを回転させます。また、Alt キー（Windows）または Option キー（Mac）を押しながら左または右矢印キーを押すと、サイズ変更ボックスを 5° 回転させることができます。この項目は常に 0° にリセットされるため、現在の向きからの回転角度を入力する必要があります。サイズ変更ボックスを回転させても、モーションパス自体の向きは変わりません。
• サイズ変更ボックスの向きをリセットするには、内側の回転コントロール（小さいほうのリング）をダブルクリックします。この操作では、回転軸の位置もリセットされます。

モーションパスを反転させる

• サイズ変更ハンドルを反対側のサイズ変更ハンドルの上にドラッグします。

モーションパスを回転させる

• 外側の回転コントロール（大きいほうのリング）を時計回りまたは反時計回りにドラッグして、モーションパスを回転させます。
• Shift キーを押しながらドラッグすると、回転が 45° 単位に制限されます。
• 回転軸を移動するには、内側の回転コントロール（小さいほうのリング）を別の場所にドラッグします。内側の回転コントロールをダブルクリックすると、回転軸の場所がリセットされます（サイズ変更ボックスの向きもリセットされます）。

モーションパスの編集

アニメーションの速度を編集する

モーションパスに沿ってオブジェクトの速度を制御するには、サムネイルやキーフレームのタイミングと、それらの間のイージングを変更します。また、モーションパスをループ再生することもできます。

モーションパス ツールでアンカー ポイントを追加しても、アニメーションの速度が変更されることはありません。代わりにサムネイルやキーフレームを追加してください。

最適化

モーションパスを作成または変更すると常に、Google Web Designer によってアニメーションが自動的に最適化されます。そのため、このレンダリングに使用する CSS の量が削減される一方で、モーションパス プロパティで指定した許容誤差を確認することができます。許容誤差が小さいほど、モーションパスに近接してアニメーションが移動しますが、最適化できる度合が小さくなります。

さらに圧縮するには、モーションパス プロパティで [曲線を最適化] をクリックします。このプロセスには、自動的な最適化よりも時間がかかる場合があります。

Google Web Designer には、[プロパティ] パネルで選択した要素のモーションパスの推定サイズが表示されるため、ドキュメントの公開後に、このモーションパスによってどの程度のディスク容量が使用されるかを確認できます。

モーションパス プロパティ

モーションパス ツールを使用してアンカー ポイントを追加したり、モーションパスを編集して曲線に変更したりすると、[プロパティ] パネルにモーションパス プロパティが表示されます。

プロパティ	説明
パスに合わせる	このオプションを有効にすると、アニメーション中に要素が回転し、モーションパスの方向を向きます（例: 要素がモーションパスの下向き曲線に沿って移動しながら、下に傾きます）。回転の精度を制御するには、[角度の許容誤差] プロパティを使用します。
位置の許容誤差	要素がモーションパスからどの程度それることができるかを設定します。 デフォルト: 0.5 px 最小: 0.1 px 最大: 100 px
角度の許容誤差	要素とモーションパスの向きの差がどの程度許容されるかを制御します。[パスに合わせる] オプションが有効な場合にのみ適用されます。 デフォルト: 1° 最小: 1° 最大: 360°
曲線を最適化	ボタンをクリックすると、モーションパスのアニメーションを生成するために使用される CSS のサイズが縮小されます。最適化後、モーションパスが変更されるまで、このボタンは無効になります。
推定サイズ	モーションパスの推定サイズが表示されます。さらに圧縮するには、[曲線を最適化] ボタンを使用します。

制限事項

• 上 / 左の位置 - モーションパスは、上 / 左の位置に対応していません。代わりに、CSS transform プロパティを使用します（これがデフォルトです）。
• 3D アニメーション - Google Web Designer では、3D モーションパスに対応していません。要素に 3D 変換を個別に適用することはできます。
• CSS パネル - CSS パネルはモーションパスに影響を及ぼしません。ただし、スタイルは要素自体に適用されます。
• コードビュー - コードビューでは、モーションパスの表示や編集はできません。
• イメージ広告 - イメージ広告ではモーションパス ツールを使用できません。