アニメーション

【パスに沿って素材を動かす】きれいな軌道でアニメーションをさせる方法

超解読AE! |シェイプの線に沿って素材を動かす
ペンツールで曲線を描いて、その線に沿ってシェイプや画像を移動させたいんですがどうやればいいんでしょうか。
A子さん
E太郎
AEなら「コピペ+ひと手間」で簡単にパスに沿ってアニメーションをさせることができますよ!手付けの移動アニメーションよりもきれいな軌道で動かせることもあるので、是非覚えておきましょう!

パスを「動きの軌道」にする

はじめに:パスに沿って何かを動かす手順

ペンツールなどで曲線を描いて、それに沿って何かを動かしたい時の手順は4つ(+調整1つ)です。

  1. ペンツールで線を描く
  2. 線に沿わせたいものをコンポジションに入れる
  3. 線の「パス」をコピーして「沿わせる素材」の「位置」にペーストする
  4. 「位置」のキーを調整する
  5. (お好みでこの工程も)動きに合わせて素材の向きを自動で修正させる
E太郎
早速詳しく見ていきましょう!

手順1:ペンツールで線を描く

ペンツールでパスを描く

ペンツールを使って、「動きの軌道」になる線を描きます。

微調整もして、形をしっかり整えましょう。

線が綺麗であるほど、動きもきれいになります。

ペンツールの使い方はこちらを参考に

超解読AE! | 文字とシェイプ、モーショングラフィックスの基礎
【シェイプ・ペンツール】直線・曲線の描き方。パスの調整方法もこれを読めば完ぺき!

続きを見る

手順2:線に沿わせたいものをコンポジションに入れる

コンポジションに素材を入れる

コンポジションに「線に沿わせたいもの」を入れます。

画像・シェイプなど、だいたい何でも大丈夫です。

「線に沿わせたいもの」のアンカーポイントが線に沿いますので、あらかじめ調整しておきましょう。

超解読AE! |アンカーポイントと位置の使い分け。基点をマスター
【アンカーポイント】「基点」を理解したら、アニメーションに強くなれる!

続きを見る

手順3:線の「パス」をコピーして「沿わせる素材」の「位置」にペーストする

パスをコピーする

線の「パス」をコピーします。


位置にペーストする

「線に沿わせたいもの」の「位置」にペーストします。

「位置」にパスの形に動くようなキーがつきます。

E太郎
この時点でパスに沿う動きが出来ましたので、プレビューを再生してみて動きを確認してみましょう!
超解読AE! | 作ったら画面で再生して見よう。プレビューの操作方法とタイムラインを解説
【プレビュー】タイムラインの見方と再生方法。処理が重い時の5つの対処方法も解説。

続きを見る

手順4:「位置」のキーを調整する

キーを調整する

キーのタイミングは自動でつくため、意図していたスピードではない場合があります。

キーの間隔を詰めたり、広げたりして動きを調整しましょう。

超解読AE! | キーを使いこなせ!アニメーションの基本。
【アニメーション】キーの打ち方と種類を解説。基本からしっかりマスター!

続きを見る

超解読AE! |グラフエディターは簡単!動きを理解していれば今日からアニメーションが生き生きと生まれ変わる!
【グラフエディター】グラフの見方がわかればアニメーションは簡単になる!

続きを見る

手順5(お好みで):動きに合わせて素材の向きを自動で修正させる

向きが一定

このままでは素材の向きが一定で少しぎこちない感じがします。

動きに合わせて向きを調整させましょう。

手付けのアニメーションで回転にキーを入れても良いですが、AEなら勝手に向きを調整してくれる便利な機能があります。


自動方向設定をする

素材を選択した状態で

メニューの レイヤー > トランスフォーム > 自動方向 とたどるか、ショートカットの

Windows : Ctrl + Alt + O

MacOS : Command + Option + O

を実行します。自動方向設定のウィンドウが出てくるので、

「パスに沿って方向を設定」を選択してOKを押します。


自動で方向を調整してくれる

すると、パスに沿って自動で向きを調整してくれるようになります!

軌道として作った線は非表示にしたり、消しても大丈夫です。

テキストレイヤーの文字をパスに通すやり方はこちらの記事を参考に!

超解読AE! |文字をアニメーションさせよう!簡単にできるアニメーター機能をマスター
【テキスト・アニメーター】文字を簡単・自由自在に動かそう!

続きを見る

まとめ:軌道がきれいならアニメーションもきれいに見える!

通って欲しい位置に素材を通すことができるので、すごく便利ですね!
A子さん
E太郎
パスに沿って動かすやり方はモーショングラフィックスでも結構使える技なので、是非覚えておきましょう!

描いた線の通りに動かす方法もチェック!

超解読AE! |モーションスケッチの使い方
【モーションスケッチ】動きを描くだけ!一瞬でキーを付けちゃう便利ツール

続きを見る

-アニメーション
-, , ,