みなさんこんにちは
魔法使い系Vtuberのアヤナです！
今日はテキストに様々なアニメーションを加える方法について解説していきます。
それでは早速いってみましょう！
スタート！
まず、アニメーターの不透明度プロパティを使ってテキストを一文字ずつ左から順番に表示させてみます！
「不透明度」を使ってテキストを１文字ずつ表示させる
タイムラインパネルにアニメーションさせるテキストレイヤーを準備します。テキストプロパティの右側にあるアニメーターの三角のボタンをクリックし、「不透明度」を選択します。
「アニメーター１」の「範囲セレクター１」の中にある不透明度プロパティの値を0%に変更しテキストが見えない状態にします。
再生ヘッドをアニメーションを開始したい位置に移動し、「開始」プロパティの左側にあるストップウォッチボタンをクリックし、キーフレームを打ちます。このとき開始プロパティの値は0%になっています。再生ヘッドを移動し、開始プロパティの値を100%に設定すると自動的にキーフレームが打たれます。
プレビューパネルで再生してみるとこのように１文字ずつ表示されるテキストアニメーションを作成する事ができました！
テキストをランダムに一文字ずつ表示させる
先ほどはテキストを左から順番に表示させましたが、今度はテキストをランダムに一文字ずつ表示させてみます。
先ほど作成したテキストアニメーションをそのまま使用し、さらに「高度」プロパティの中の「順序をランダム化」をオンにします。
ランダムシードの値を変更するとランダムに表示されるテキストのパターンを変更できます。
プレビューパネルで再生してみるとこのように１文字ずつランダムに表示されるテキストアニメーションを作成する事ができました！
マスクを使ってテキストを一文字ずつ表示する
今度はマスクを使ってテキストを一文字ずつ表示させてみましょう！
タイムラインパネルにテキストレイヤーを配置したらマスクを作成します。テキストレイヤーを選択した状態で長方形ツールを使うとマスクを作成できるのでテキストの左側に長方形のマスクを作成します。
アニメーションを開始したい位置に再生ヘッドを移動しマスクプロパティの「マスクパス」の右側にあるストップウォッチボタンをクリックしキーフレームを打ちます。
再生ヘッドをアニメーションが終了する位置まで移動します。選択ツールでマスクの左側をドラッグしてテキストが表示される位置でドロップするとキーフレームが自動的に作成されます。
さらにマスクの境界のぼかしプロパティの数値を変更し、テキストが表示される際の境界線をぼかしてみます。
プレビューパネルで再生してみるとこのように１文字ずつ表示されるテキストアニメーションを作成する事ができました！
ブラーエフェクトでテキストを一文字ずつ消す
タイムラインパネルにアニメーションさせるテキストレイヤーを準備します。テキストプロパティの右側にあるアニメーターの三角のボタンをクリックし、「ブラー」を選択します。
最終的にブラーエフェクトでテキストが見えなくなるようにブラーの値を変更します。
アニメーションを開始する位置に再生ヘッドを移動し、終了プロパティの左側にあるストップウォッチボタンをクリックしキーフレームを設定します。この時、値は0%にしておきます。再生ヘッドを移動し終了プロパティの値を100%にします。
プレビューパネルで再生してみるとこのように１文字ずつ消えていくテキストアニメーションを作成する事ができました！
テキストを一文字ずつ回転しながら表示させる
タイムラインパネルにアニメーションさせるテキストレイヤーを準備します。テキストプロパティの右側にあるアニメーターの三角のボタンをクリックし、「すべてのトランスフォームプロパティ」を選択します。
①まず「アニメーター１」の「範囲セレクター１」の中の「位置」プロパティの値を調整し、テキストがコンポジションパネルから見えなくなる位置まで上に移動します。
➁次に「スケール」の値を変更します。テキストが回転しながら元のサイズに戻るように予めスケールの値を大きくしておきます。
➂最後に「回転」の値を変更します。テキストを１回転させて表示させるには値を１+0.0°に変更します。
アニメーションを開始する位置に再生ヘッドを移動し、開始プロパティの左側にあるストップウォッチボタンをクリックしキーフレームを設定します。この時、値は0%にしておきます。再生ヘッドを移動し開始プロパティの値を100%にします。
プレビューパネルで再生してみるとこのように１文字ずつ回転しながら表示されるテキストアニメーションを作成する事ができました！
字送りを使って文字間隔を狭くするアニメーション
まず、テキストレイヤーを中央揃えにします。アニメーター機能「字送り」を適用します。
コンポジションパネルを確認しながら「トラッキングの量」の値を変更します。ここで設定した値がアニメーションの始めの値になります。
「高度」プロパティの「基準」を行に変更するとテキストの文字間隔が変化する中心が行の中心になります。
アニメーションを開始する位置に再生ヘッドを移動し、開始プロパティの左側にあるストップウォッチボタンをクリックしキーフレームを設定します。この時、値は0%にしておきます。再生ヘッドを移動し開始プロパティの値を100%にします。
プレビューパネルで再生してみるとこのように徐々に文字間隔が狭くなるテキストアニメーションを作成する事ができました！
トラックマットを使って映像をテキストの形に切り抜く
続いてトラックマットを使って文字の中に映像を映し出してみましょう！
まずは映像のレイヤーとテキストのレイヤーを準備します。
映像レイヤーのトラックマットのメニューの中から「アルファマット」を選択すると、テキストの形に映像を切り抜く事ができます。
プレビューパネルで再生してみるとこのようにテキストの形で映像を切り抜いたアニメーションを作成する事ができました！
これでテキストに様々なアニメーションを加える方法についての解説を終わります！
みなさんいかがでしたか？
今日の解説は理解できましたか？
それでは、また次回の講義でお会いしましょう！
それじゃあまた！バイバイ！
コメント