タイトルデザイナーのキーフレーム機能を使ってアニメーションテキストを作ってみたいと思います。
タイトルデザイナーのキーフレームで設定できる項目は
・位置
・拡大/縮小
・不透明度
・回転
この4つになり、不透明度以外のパラメータでは、イーズイン・イーズアウトという緩急機能も使えます。
どちらもアニメーションのパラメータは同じですが、
上のテキストがイーズインとイーズアウトを設定しているアニメーションテキストです。
下のテキストはイーズインとイーズアウトを設定していないので緩急がついていないアニメーションテキストです。
アニメーションその1.位置変更アニメーション
シンプルにテキストが移動してくるアニメーションです。
このアニメーションのポイントは、タイトルを３つに分けて移動アニメーションをつけているところです。
それぞれにイーズインとイーズアウトを設定するのはもちろんですが
キーフレームの位置を調整しそれぞれがバラバラにかつ、整えられた動きをさせています。
これにより、１つのタイトルにスライドの開始エフェクトをつけるよりも
奥深い繊細なアニメーションにすることができます。
キーフレーム設定
1.タイトル：
１つ目のキーフレーム位置 (X -0.317 Y 0.200)：イーズアウト (0.4)、２つ目のキーフレーム位置 (X 0.226 Y 0.200)：イーズイン (0.4)
2.タイトル：
１つ目のキーフレーム位置 (X -0.411 Y 0.367)：イーズアウト (0.4)、２つ目のキーフレーム位置 (X 0.157 Y 0.367)：イーズイン (0.4)
3.タイトル：
１つ目のキーフレーム位置 (X -0.416 Y 0.465)：イーズアウト (0.4)、２つ目のキーフレーム位置 (X 0.168 Y 0.465)：イーズイン (0.4)
この辺はお好みでアニメーションを早くしたりして調整します。
各キーフレームの置く位置も重要です。僕は大体0.15秒スパンで設定したりします。
例えば1の2個目のキーフレームと2の2個目のキーフレームの間隔は0.30秒です。
2の2個目と3の2個目のキーフレームも同様の0.30秒です。
これをもうちょっと早くしたいなーと思ったら、0.15秒に設定したり
もうちょっと遅くしたいなーと思ったら0.45秒にしたりしています。
このへんは気持ちの問題ですが、僕は0.15秒くらいの間隔で設定するのが気持ちよくて好きですね！
アニメーションその2.拡大/縮小変更アニメーション
大きいテキストからぎゅっと小さくなるテキストです。
さらに繊細にアニメーションさせるために
ぎゅっと小さくなるアニメーションの前後にも緩やかに大きさが変更されるアニメーションを適用しています。
ピタッとアニメーションが止まるよりは緩やかに止まっていくほうが繊細なアニメーションになります。
1.タイトル：
１つ目のキーフレーム (幅+高さ 8.0)：イーズアウト (0.4)
２つ目のキーフレーム(幅+高さ 7.0)：イーズイン (なし)
３つ目のキーフレーム (幅+高さ 0.6)：イーズアウト (なし)
４つ目のキーフレーム(幅+高さ 0.55)：イーズイン (0.4)
このへんはイーズインとイーズアウトの設定が難しくなります。
全部つけるとくどい緩急になりますので、どういうアニメーションにしたいかをイメージして最小限の緩急で仕上げるのが大事だと思います。
アニメーションその3.不透明度変更アニメーション
キーフレームで細かく不透明度を変更させると、このように点滅っぽいアニメーションにすることもできます。
不透明度はイーズインとイーズアウト機能が使えないので、緩急はつけにくいです。
ですが、不透明度に関しては緩急がなくてもそこまで気にはならないかなとは思います。
動きに緩急をつけるのはわかりやすいのですが、そうじゃない場合はわかりにくいのだと思います。
1.タイトル：
１つ目のキーフレーム (不透明度 19%)
２つ目のキーフレーム (不透明度 82%)
３つ目のキーフレーム (不透明度 14%)
４つ目のキーフレーム (不透明度 100%)
大体こんな感じですが、4つ目のキーフレームの位置を0.15秒にしているところ以外は適当です。
ざっくり1個目が小さい、2個目が大きい、3個目が小さい、4個目が100%という数値にすると点滅系のアニメーションとして成立します。
交互に0％と100%で設定してもいいし、あえてざっくりした数値にするのもアリです。
アニメーションその4.回転変更アニメーション
回転に緩急(イーズインとイーズアウト)をつけたアニメーションになります。
これが一番緩急をつけるのが難しい気がします。
適当にイーズインとイーズアウトをつけまくると、回転の動きを阻害する動きになりがち！
1.タイトル：
１つ目のキーフレーム (回転 17,53 )：(イーズインなし、イーズアウトなし)
２つ目のキーフレーム (回転 0 )：(イーズインなし、イーズアウトなし)
３つ目のキーフレーム (回転 -360 )：(イーズイン 0.4、イーズアウトなし)
４つ目のキーフレーム (回転 -382.11 )：(イーズインなし、イーズアウトなし)
５つ目のキーフレーム (回転 -720.00)：(イーズイン 1.0、イーズアウトなし)
ざっくり仕上げてみた感じですが、イーズアウトがちょっと相性悪い気がします。
イーズインは、早い回転を止めるキーフレームで設定するといい感じですね！
