アニメーター機能でテキストアニメーションを作成する

前回に引き続き、テキストのアニメーター機能を使っていきましょう。

• 目標
• 制作手順
• 1.アニメーションするテキストを用意
• 2.スライドインの設定を行う
• 3.フェードアウトさせる
• 4.イーズを設定する
• 実習

目標

複数のアニメーター、プロパティを使ってテキストアニメーションを作成します。

以下のように、右からスライドインし、回るようにフェードアウトするよう設定してみます。

制作手順

1.アニメーションするテキストを用意

アニメーションさせる文字部分を作ります。

解説では新規コンポジション（アニメーター練習2）を作成して、そちらで設定していきます。

テキストレイヤーを追加。文字はお好きに打ってください。
見やすいように、大きめのフォントサイズで、ど真ん中に配置するのがお勧めです。

2.スライドインの設定を行う

テキストレイヤーにアニメーターを追加します。
位置と不透明度、2つのプロパティを追加してください。

アニメーターの位置プロパティで、X方向の数値（1つ目の数値）を変更します。
文字全体がコンポジションの右外になるように設定しましょう。

不透明度は0％に変更します。

範囲セレクターを開いて、開始のストップウォッチアイコンでキーフレームを追加。
20フレーム後ろ（右）に移動し、キーフレームを追加。開始の値を100％にします。

プレビュー再生してみましょう。

右から1文字ずつ、文字が出てきました。

このままだと、少しカクカクした動きに見えるので、ブラーを追加しましょう。
ブラーは“ぼかし”もしくは“滲み”のことです。

アニメーター1の追加から、ブラーを選択。

ブラーの数値を変更します。
横方向にだけブラーを設定できるよう縦横比の固定を解除し、1つ目の数値を変更します。

キーフレームの始点、終点よりも後だと、数値を変更しても見えません。
上図のようにインジケーターを10フレームあたりに置いておくと、見え方を確認しながら設定できます。

設定できたら、プレビュー再生して確認。
これで、タイトルを表示する部分は完成です。

3.フェードアウトさせる

次は、タイトルの文字を消していくアニメーションを設定します。

テキストレイヤーを選択し、アニメーターのからスケールを選択。
「アニメーター 2」と新しいアニメーターと、スケールプロパティが追加されます。

インジケーターの位置を3秒地点（3s / 03:00f ）に移動してください。
アニメーター2のオフセットでキーフレームを追加。値は-100％にします。

スケールの方にもキーフレームを追加します。
1つめ、X軸方向（横方向）の数値をゼロに設定してください。

ここまでの設定ではコンポジションパネル（プレビュー）での、テキストの表示は変わっていません。

インジケーターを20フレーム先へ進めます。
オフセットのキーフレームを追加。値は「0 ％」に設定してください。
コンポジションパネル上で、テキストが表示されなくなっていればOKです。

プレビュー再生で、動きを確認します。

ベースの動きは出来ていますね。

アニメーター2の追加からプロパティ > ブラーを選択。
ブラーの効果がわかる位置にインジケーターを動かして、数値を調整します。

プレビュー再生して違いを確認してみましょう。
ブラー設定前よりも滑らかに見えていたらOKです。

高度のプロパティについて

ここまでの設定でもテキストアニメーションとしては出来ています。
が、アニメーターの使い方練習として、もう少し設定を触ってみましょう。

アニメーター2の中にある高度を展開します。
下図、赤線で囲ったシェイプという部分は、プルダウンで選択可能になっています。

高度のシェイプでは、アニメーションが開始から終了までを「どんな風に進めるか」を設定できます。
シェイプを短形から“下へ傾斜”に切り替えて、再生してみましょう。

アニメーションが大幅に変わりましたね。

キーフレームの終点でも文字が残った状態になっています。
オフセットの数値0から100％に変えて、完全に消えるようにしましょう。

最初から再生すると、下のようになります。

ぱっと見ると、あまり違いは感じられないかもしれません。
同じフレーム数で見比べてみると、速度に違いがあります。

【シェイプって何？】

デフォルトの短形は1文字ずつ、区切ったような形でアニメーションしていきます。
それ以外は滑らかにアニメーションが継続するようになっており、どう継続させるかで“上に傾斜”や“下に傾斜”などの項目に分かれています。
下アニメーションのようなイメージです。

わかるような、わからないような……と思った方、それでOKです。
実は、このアニメーターの高度（特にシェイプ）はAfter Effectsの設定の中でも、理解のしにくさ上位に入ります。
変化させるプロパティによっても、ちょっと見え方が違いますしね。

最初は「アニメーションの動き方が変わる項目」という認識で大丈夫。
最初は、オフセットを使って調整できるかのほうが重要です。

“高度”の設定について詳しく知りたい方は、下記サイトのような詳細解説を書かれている記事、もしくは動画を参考にしましょう。
もしくは、簡単なテキストアニメーションを作って設定を色々切り替えてみるのも良いですね。

4.イーズを設定する

イージングを設定して、アニメーション速度に緩急をつけると、より滑らかなテキストアニメーションになります。

アニメーターを使っている場合は、キーフレームのポイント、高度内のイーズ（高く/低く）と、２箇所で設定が出来ます。

今回は簡単に、キーフレームの方でイージーイーズインを適用しておきましょう。

文字が消えていく方（アニメーター2）も、お好みで設定してください。
これで、文字が現れて消えるテキストアニメーションは完成です。

After Effectsで作ったテキストアニメーションは、PremiereProで使用することも出来ます。
次回のレッスンでは、Premiereで使用するための方法・設定を解説します。

実習

前回の実習で設定したアニメーターの設定を変更します。

【手順】

1. アニメーターの追加から、位置を選択。
2. 位置のX座標をマイナス150～180くらいに設定　
3. 高度オプションで基準を「文字」に変更
4. 高度オプションでシェイプを「上に傾斜」に変更
5. オフセットでキーフレームを打ち、0秒と3秒地点は完全に文字が消えるよう設定する
6. 0秒に打たれているキーフレームをイージーイーズアウトに変更
7. 3秒に打たれているキーフレームをイージーイーズインに変更

【タイムラインパネルのイメージ】