【AE】モーション周期表のOffset実践編｜パスに沿って流れるモーションを作る

※Offsetの考え方から確認したい方は、理解編をご参考ください。

今回のゴールは「線をパスに沿って流す」こと

作業前に準備するもの

サナ

いきなりパスのトリミングを使う前に、何を用意すればいいですか？

シン

流したい線の「パス」を持つシェイプレイヤーと、それを置くコンポジションを先に用意します。パスさえあれば、円でも曲線でも自由な軌道で流せますよ。

下準備1：コンポジションを作成する

新規コンポジションを作成します。練習用なので、次のような設定で問題ありません。

下準備2：シェイプレイヤーを作ってパスを描く

流したい軌道（パス）を持つシェイプレイヤーを用意します。

シェイプレイヤーを作ったら、ペンツールや図形ツールで**線のパス**を描きます。曲線・直線が混ざった自由な軌道でも構いません。

下準備3：パスのトリミングを追加する場所を確認する

パスのトリミングは、シェイプレイヤーのコンテンツから追加します。

環境によって表示名が英語の場合は、「Add ▶」から「Trim Paths」を探してください。

実践1：パスを描いてパスのトリミングを追加する

サナ

シェイプレイヤーとパスを用意したら、次は何をすればいいですか？

シン

そのシェイプレイヤーのコンテンツに「パスのトリミング」を追加します。まずは細かい調整より、「描画範囲を変えられる状態」になっているかを確認しましょう。

手順1：シェイプレイヤーのコンテンツを開く

タイムラインで、パスを描いたシェイプレイヤーの**コンテンツ**を開きます。

ここで別のレイヤーを開いていると、パスのトリミングを追加する場所が見つかりません。

手順2：パスのトリミングを追加する

コンテンツの右側にある **「追加 ▶」** をクリックし、メニューから**パスのトリミング**を選びます。

追加できると、タイムラインに「パスのトリミング」の項目（開始点・終了点・オフセット）が表示されます。

手順3：開始点・終了点で描画範囲が変わるか確認する

パスのトリミングを追加したら、**終了点**の数値を下げてみて、線の描画範囲が短くなるか確認します。

この段階では線の長さが理想通りでなくても問題ありません。大事なのは次の3点です。

Q&A：パスのトリミングを追加しても線が変わらないとき

サナ

追加したのに、終了点を下げても線が短くなりません……。

シン

パスに「線（Stroke）」が設定されていないと、トリミングの変化が見えにくいことがあります。線を設定してあるか、別のシェイプにトリミングがかかっていないかを確認しましょう。

実践2：開始点・終了点で「流す線」を作る

サナ

描画範囲は変えられました。でも、流す線はどうやって作るんですか？

シン

まず**開始点と終了点**で「短い線」を作ります。開始点と終了点の差を狭めると、パスの一部だけが描かれた短い線になります。これがパス上を流れる対象になります。

開始点（Start）：描画を始める位置

開始点は、パスのどこから線を描き始めるかを決めます（0%〜100%）。

**目安：まずは 0% のまま**
（終了点とセットで「線の長さ」を決めるので、最初は終了点から触ると分かりやすい）

終了点（End）：描画を終える位置

終了点は、パスのどこまで線を描くかを決めます（0%〜100%）。開始点との差が「線の長さ」になります。

**目安：終了点 = 20〜40% から調整して「短い線」を作る**
（開始点0%・終了点30%なら、パスの先頭30%だけが描かれた短い線になる）

オフセット（Offset）：描画範囲をパス上でずらす量

オフセットは、開始点〜終了点で作った描画範囲を、**パス上でそのままずらす**項目です。あとでこの項目にキーフレームを打つと、短い線がパスに沿って流れます。

**目安：まずは0%。動かすのは実践3で行う**
（開始点・終了点は「線の長さ」、オフセットは「線の位置」を動かす、と役割を分けて考える）

Q&A：線が全部見えてしまって「流す対象」が作れない

サナ

終了点を下げたつもりなのに、線が全部表示されたままです……。

シン

開始点が0%・終了点が100%のままだと、パス全体が描かれてしまいます。終了点を下げて、開始点との差を狭めると「短い線」になりますよ。

実践3：オフセットのキーフレームでパスに沿って流す

サナ

短い線はできました。これをパスに沿って動かすにはどうすればいいですか？

シン

**オフセットにキーフレーム**を打つと、短い線がパス上を流れていきます。開始位置と終了位置で数値を変えるのがポイントです。

手順1：オフセットにキーフレームを打つ

パスのトリミングの**オフセット**を開き、開始位置で **ストップウォッチマーク** をクリックしてキーフレームを打ちます。

次に時間を進めて、オフセットの数値を増やします。これで、短い線がパスに沿って流れる動きになります。

オフセットは「回転量」のように扱われ、数値を増やすほど描画範囲がパス上を進んでいきます。

手順2：流れる速さはキーフレームの間隔で調整する

流れる速さは、2つのキーフレームの間隔で調整できます。間隔を詰めると速く、広げるとゆっくり流れます。

手順3：スケールや破線を足して演出する（任意・応用）

モーション周期表では、Offsetは**他のモーションと組み合わせる**使い方も紹介されています。たとえば**Offset＋Scale**で短い線をパス上で流しつつ拡縮させると、ローディング・スキャン風の演出になります。

Q&A：オフセットを動かしても線が流れない

サナ

オフセットにキーフレームを打ったのに、再生しても線が流れません……。

シン

開始点と終了点が0%・100%のまま（線が全部表示）だと、オフセットを動かしても見た目が変わりにくいです。先に短い線を作ってから、オフセットを動かしましょう。

完成動作を見てみよう

ここまでの操作で実際にどんな動きになるか、完成動作を確認しておきます。

仕上げ：開始点・終了点の差と組み合わせで質感を整える

流れる動きの基本ができたら、最後に質感を整えます。**開始点・終了点の差** で線の長さを調整し、表現に合わせて選びます。

まとめ：Offsetは「描く→短くする→流す→仕上げる」の順番で考える

うまくいかない時の3チェック

ここまでの手順通りに進めても、思った通りにならない場合は、以下の3点を順番に確認してください。

次に読むおすすめ記事

Offsetの基本的な作り方がわかったら、次は関連する表現も確認しておくと、使いどころが広がります。