パスのアニメーションについて

こんにちは、@TAISEI38928603t7wj さん

＞「ハートフルサステナブル」という文字の出現方法について教えていただきたいです。

以前「ハイキング」の文字を書き順通りに作成するマニュアルを作成しましたので、これで説明します。お分かりになるのではと思います。

１．線エフェクトを使用し、各画ごとにパスを作成する方法

①コンポジションを作成します。

②テキストレイヤーを作成し、文字（ハイキング）を書きます。

③テキストレイヤーを選択して、「ペンツール」をクリックします。

④「ペンツール」で、文字の各画を書き順通りになぞり、パスを伸ばします。

・パスの開始点の頂点は、「ペンツール」でクリックしてドラッグし、ベジェハンドルを引き出します。２個目の頂点も同様に、ベジェハンドルを引き出します、この時開始点の頂点と２個目の頂点はパスで結ばれます。この操作を順次繰り返します。

・パスを終了するには、「Ctrl」キーを押しながら、コンポジション内の任意の位置でクリックします。

・パスの軌跡を修正するには、「ペンツール」で頂点をドラッグして移動したり、ベジェハンドルをドラッグしで長さや方向を変更します。

・ベジェハンドルを折るには、「Ctrl」キーを押しながらベジェハンドルを折る方向へドラッグします。

・一旦終了したパスを、引き続いて伸ばすには、「選択ツール」で最後の頂点を選択した後、「ペンツール」で次の頂点でクリック＆ドラッグします。

・次画、次字に移動時、間を取る場合は、パスの終点を、各画を書き終える位置から先へ移動します。

・伸ばすスペースがない場合はパスを曲げます。また、既に描画した部分はその上を通過してもOKです。

⑤テキストレイヤーを選択したまま、メニューの「エフェクト」→「描画」→「線」を選択し、テキストレイヤーに「線」エフェクトを適用します。

⑥「エフェクトコントロール」パネルを開いて、各設定を行います。

・全てのマスク ； チェックを入れます。

・カラー ； ブラシの色を設定します。

・不透明度 ； 不透明度を下げると、ブラシと元の文字の関係を確認できます。確認後は元に戻します。

・ペイントスタイル ； 「元のイメージを表示」を選択します。ブラシの色が消えて、元の文字が表示されます。

➆「タイムライン」パネルで、「線」エフェクトの「すべてのマスク」と「線（連続）」を「オン」にします。

次に、時間インジケーターをアニメーションの開始時間に移動し、「終了」を「0.0 ％」に設定して「ストップウォッチ」をクリックします。すると、時間インジケーターの時間に「キーフレーム」が作成されます。

続いて、時間インジケーターをアニメーションの終了時間に移動し、「終了」を「100.0 ％」に設定します。すると、時間インジケーターの時間に「キーフレーム」が自動的に作成されます。

⑧プレビューして、特に文字の画と画の交差部のはみ出し有無を確認します。

・「イ」と「グ」の第１画が第２画と交差する部分は、第２画側へのはみ出しがあります。

はみ出しを無くすには、パスの軌跡を第２画側と反対側へずらします。

・「グ」の第３画は、第４画側へはみ出しがあります。

はみ出しを無くすには、パスの軌跡を第４画側と反対側へずらします。

・「キ」の第１画と第２画が第３画と交差する部分は、「ブラシのサイズ」が大きいと第３画側へのはみ出しが目立ちます。

⑨修正が終われば、完成です。

２．線エフェクトで全体を１個のパスで作成する方法（After Effects ｖ24.6.2）

ペンツールでパスを一筆書きのようにして描きます。一旦パスを描いた上を横切ることはOKです。

パスの軌跡を修正します。

「線」エフェクトを適用して、「ブラシのサイズ」を大きくし、キーフレームを打って元の文字が隠れるか確認します。隠れない場合は、パスの軌跡を修正します。

「ペイントスタイル」を「元のイメージを表示」に設定して最終確認を行います。不具合があれば修正します。

2026/02/10　pm5：00