テキスト・アニメーションその1「BOUNCE」

オーバーシュート, アニメーター, 範囲セレクタ, 下へ傾斜

School of Motion Youtube Channelより

ポイント

アニメーションを作成後も調整がしやすいように、動きを機能ごとに分解してアニメーションを作成する。

1:BOUNCE

初心者用確認事項:AEの座標系では、Y軸は下向きに正。+100pxは100ピクセル下へを、-100pxは100ピクセル上を意味する。

[アニメーター]の適用方法

  • 新規コンポジション作成(1920×1080、24fps、10秒)。名前を「Bounce」とする。
  • 文字ツールで「BOUNCE」と打ち込み、テキストレイヤーを作成。
  • テキストのプロパティを開くと、右上に[アニメーター]のアイコンがあり、クリックするとアニメーターの機能一覧が現れる。

  • [アニメーター]から「位置」を追加する。

  • 「アニメーター1」がテキストのプロパティに追加された。ここで最初(initial)の位置を決めたいので、Enterキーで「アニメーター1」をクリックし、「InitialPOS」に名前を変更する。
  • 「InitialPOS」のプロパティを開くと[範囲セレクター1]と[位置]のプロパティがあり、[位置]の数値をドラッグすると文字全体がそれに従って移動するのが分かる。
  • また[範囲セレクター1]のプロパティを開けると、多くの属性があらわれる。これが、アニメーターの鍵となる。
  • まず、「InitialPOS」の[位置]で、 文字を画面下に配置する(動画では位置を(0,659)に)
  • 範囲セレクターの範囲が0~100%の時は、文字に対してエフェクト(いまならば[位置])がテキストすべてにたいして、かかっている。範囲セレクターの値を変えると、エフェクトの係り具合が変化する
  • 実際に、[範囲セレクター1]の[終了点]の値をスクラブするとアニメーションされる。 これが、アニメーターの一番のシンプルな使用方法。
  • [終了点]にキーフレームを打って、0Fで100%、1:00Fで0%とすると、以下のようになる。

  • 「InitialPOS」のキーフレームは削除して[終了点]は初期値の「100%」でアニメーションさせず、[位置]は今のまま、画面下に配置したままにする

アニメーターの追加 5:00~

  • 「InitialPOS」を複製する(Ctrl+D)。名前を「POS_01」とする。
  • 「InitialPOS」の[位置]を(0,-663」とする。下に下げたぶんより若干上にしたのは、あとでオーバーシュートの動きをつけて、元の位置に戻すため。
  • [範囲セレクタ]の[終了点]をスクラブすると、アニメーションされるのが確認できる。
  • [範囲セレクタ]の[開始点][終了点]の値はどちらも初期値で変えず、[オフセット]でもアニメーション可能。
  • 今回は[オフセット]のアニメーションを追加する。いま0Fで、[オフセット]の値を「-100%」、1:00Fで「0%」とする。

 

[高度]機能の利用 7:20

1)シェイプ

[高度 Advanced]のプロパティを開き、[シェイプ]のメニューを開く。以下のように一覧が表示される。

  • [シェイプ]から「下へ傾斜 Ramp Down」を選択。すると、以下のように文字が一個ごとに独立して動くのではなく、オーバーラップしながらアニメーションするようになる。

  • アニメーションが途中までで止まるので、1:00Fの[オフセット]の値を「0%」から「100%」に変更することで最後までアニメーションさせる。

2)イーズ

  • しかし、まだ硬い印象がある。イーズの動きを追加する。[高度]の項目に[イーズ(高く)Ease High]と[イーズ(低く)Ease Low]の2つの項目がある。
  • イーズ(高く)とイーズ(低く)…選択した値が対象として完全に含まれる状態(高く)から完全に除外される状態(低く)に変化する速度を指定。例えば、イーズ(高く)が 100%の場合、すべて選択から一部選択に変化するにつれて、文字の変化は段階的(ゆっくりと変化)になります。イーズ(高く)が -100%の場合、すべて選択から一部選択に変化するにつれて、文字の変化は速くなります。イーズ(低く)が 100%の場合、一部選択から選択なしに変化するにつれて、文字の変化は段階的(ゆっくりと変化)になります。イーズ(低く)が -100%の場合、一部選択から選択なしに変化するにつれて、文字の変化は速くなります。

  • [イーズ(高く)]を「100%」にしてみる。

さらにアニメーターの追加し、オーバーシュートの動きを作成 9:45~

  • 「POS_01」を複製する(Ctrl+D)
  • いまのままだと、[位置]のぶんだけ上にオフセットしてしまうので、値をリセットする。(0,0)に。
  • オーバーシュートから戻る動きを作りたいので、[位置]のYを少しだけ下に。(0,45)に。
  • [範囲セレクター]のプロパティを開き、[オフセット]のキーフレームを2つとも選択し、2フレーム後ろへずらす(下図参照)。メインの動きに対して、わずかに遅れるようにしたいため
  • 効果をよりわかりやすくするために、[位置]を(0,92)と値を大きくし、キーフレームも後ろへずらす量を大きくする。

イーズアウト 10:50

  • オーバーシュートする時に、イーズアウトさせたいので、[イーズ(低く)]も「100%」に変更する。

少し、イーズが強くかかっているので、なめらかにするために[イーズ(低く)][イーズ(高く)]をともに「50%」に変更。

[オフセット]のキーフレームをより後ろへずらせば、以下のようなディレイ効果を出すことも出来る。

さらにもう一度オーバーシュート(下向きのオーバーシュート)させる場合 11:45

  • 「POS_02」を複製する。
  • [位置]を(0,-45)とする。
  • そして、[オフセット]のキーフレームをより後ろへずらす。

 

  • [オフセット]のキーフレームのずらし具合(タイミングの調整)でさまざまパターンが作れることが分かる。チュートリアル動画でさまざまな例を試しているので参考にしてください。

字を変更してみる  13:00~

  • 「BOUNCE」のテキストレイヤーを複製する。
  • 長い単語を入力してみる。
  • [オフセット]のタイミングや、[位置]を調整すると、面白い効果を得ることが出来る。