今回は、拡大率と中心を使ったモーションで特定の語句を強調するテキストアニメーションを作ってみたので紹介したいと思います。
語句を強調する
上の画像のように同じ大きさのテキストの中で特定の語句を拡大率で強調します。
特定の語句を拡大すると幅や高さが変わるので、拡大に合わせて前後のテキストを移動させます。
それぞれ動かす必要があるので、語句毎に別オブジェクトになります。
拡大率と中心
中心と拡大率。
このテキストアニメーションのポイントとなるのが拡大率と中心です。
拡大縮小の動きは中心の位置によって異なる動きをするため、レイアウトや動きに合わせて中心をどこに据えるのかが重要となってきます。
拡大率と中心のパターン
中心をテキストの下に据えた場合。
中心がテキストの底にあるので、周りのテキストと下のラインを揃えてレイアウトすることができます。
ちなみに、タイムラインはこんな感じ。拡大率と座標の移動のタイミングを揃えます。
イージングはこんな感じのカーブです。
中心をテキストの左下に据えた場合。
強調する語句が文中ではなく冒頭にある場合は、中心を左側に据えると左揃えのレイアウトがしやすくなります。併せて下のラインでテキストを揃えるとなると中心は左下ということになります。
中心を中央に据えて拡大縮小すると、上下左右に広がります。
周りの語句のラインを左右で変えたりといった工夫もできますね。
応用と使用例
文中の語句の強調はいわば中間のモーションです。強調の拡大後にさらにモーションを足して組み上げることもできます。
登場のテキストアニメーションと組み合わせて語句を強調するテキストアニメーション。
いかがだったでしょうか。
多段階的なテキストアニメーションでは、登場にプラスアルファのモーションを加えることでより動きのあるテキストアニメーションになります。
中心を意識した拡大率で語句を強調するモーション、機会があれば是非試してみてください。