【After Effects】テキストを反転して表示する方法

2025年3月9日2025年3月10日

After Effects でテキストを反転して表示するアニメーションの作成方法は、以下の通りです。作成後は、上記画像の Walking 箇所のようになります。

文字レイヤーを作成
文字レイヤーにプリコンポーズを設定
プリコンポーズした文字レイヤーを複製
ペンツールで文字を横切るように線を引き、線幅を文字が隠れる太さに変更
線レイヤーを文字レイヤーの下に移動し、パスのトリミングを追加
パスのトリミングを使い、テキストの背景をなぞるアニメーションを作成
1. パスのトリミングを追加したら、アニメーション開始点に移動
2. パスのトリミング欄を開き End を 0 に変更し、トリミングの開始側にキーを打つ
3. そのあとアニメーションの開始と終了の真ん中に移動
4. Start を 100 にして開始側にキーを打つ
5. 新たにトリミングの終了側にもキーを打つ
6. アニメーションの終了点に移動。
7. End を 100 にしてキーを打つ
文字レイヤーと線レイヤーを複製
文字レイヤーを線レイヤーの下に移動させ、アルファ反転マットを設定
複製した線レイヤーに対し、アルファ反転マットを設定

テキストを反転して表示する方法

まずは、文字レイヤーを作成します。ツールバーからTの文字をクリックし、任意の場所に文字を入力してください。この例では以下の表の通りに作成し、真ん中の行の Walking の背後をなぞるアニメーションを作ります。

幅 (Width)	1920
高さ (Height)	1080
フレームレート (Frame Rate)	30fps
時間・デュレーション (Duration)	0:00:01:00 (1秒)

その文字レイヤーに対しプリコンポーズを実行します。文字レイヤーを選択し、メニューバーのレイヤーメニューからプリコンポーズを選択してください。新しい名前や属性を設定するウィンドウが表示されます。ここでは何も設定を変えずにOKをクリックしてください。

プリコンポーズ (Pre-compose) は、複数のレイヤーを1つの新しいコンポジションにまとめる機能になります。この機能は作業の効率化のためのものです。具体的には、以下の目的でプリコンポーズが使用されます。
・レイヤー・タイムライン整理
・エフェクト適用の簡略化
・アニメーション管理を容易にする
・他コンポジションでの再利用

プリコンポーズした文字レイヤーを選択し Ctrl + D を押して、複製してください。今回は3行に対し、アニメーションを行う予定です。そのため、3つ複製しました。

今回の例では2行目の Walking に対して、テキストの背景をなぞるアニメーションを作成します。上記画像のように、ペンツールで文字を横切るように線を引きます。(1行目のアニメーションについては、以下の別記事をご確認ください。)

線幅を文字が隠れる太さに変更します。

テキスト反転して表示したい文字レイヤーの下に線レイヤーを移動させます。この段階で線レイヤーの幅などを調整しておきましょう。

線のシェイプレイヤーをを選択し、コンテンツ右の追加メニューからパスのトリミングを追加してください。

次に、パスのトリミングを使ってテキストの背景をなぞるアニメーションを作ります。

パスのトリミングを追加したら、アニメーション開始点に移動
パスのトリミング欄を開き End を 0 に変更し、トリミングの開始側にキーを打つ
そのあとアニメーションの開始と終了の真ん中に移動
Start を 100 にして開始側にキーを打つ
新たにトリミングの終了側にもキーを打つ
アニメーションの終了点に移動
End を 100 にしてキーを打つ

上記画像の通りに作成する場合は、以下の手順の通りに実施してください。
(この例では 3f でアニメーションを開始し、27f で終了するものとします)
1. パスのトリミングを追加したら、アニメーション開始点 3f に移動
2. パスのトリミング欄を開き End を 0 にした後、トリミングの開始側にキーを打つ
3. そのあと3f と 27f の真ん中の 15f に移動し、Start を 100 にして開始側にキーを打つ
4. 新たに 15f のトリミングの終了側にもキーを打ち、27f に移動
5. 27f で End を 100 にしてキーを打つ
※ アニメーション作成後はイージーイーズ(F9)で、自然な動きを実現するとよいと思います。