位置(Position)
位置(Position)の変更は手軽ですが大きな動きに繋がります。
「動き」というとまず位置の変更が頭に浮かぶはずです。
要素全体を一気に動かすと単なる「場所の変更」ですが、要素を細かく分割して別々に動かすと「モーショングラフィックス」と感じませんか？その動き、分割してみましょう。
透明度(Opacity)
拡大縮小(Scale)
題名
原理
作成
関連
作成日 : 2020-09-12
原理
1. 文字の3種類の位置
文字の位置には、①レイヤー自体の位置、②エフェクト「トランスフォーム(Transform)」などの位置、③テキストアニメータの位置があります。①と②は使い方にあまり違いはありませんが、組み合わせることで複合的な動作をしやすくなります。
2. 文字の3種類の位置 - テキストアニメータの位置
特に③のテキストアニメータの位置では簡単に面白い動きを作ることができます。この例ではX軸を順番に動かす→Y軸を順番に動かすというキーフレームを打っただけですが、文字が生きているような動きになります。
3. シェイプの3種類の位置
シェイプの位置には、①レイヤー自体の位置、②エフェクト「トランスフォーム(Transform)」などの位置、③シェイプコンテンツの位置があります。①はマスクごと動き、②はマスクごと動くが表示上はマスクは動かず、③はマスクはそのままに動きます。
作成
1. Positionの出現
この部分は原理で説明したアニメータそのままの動きです。
2. 位置の出現
この部分も前半はアニメータで動かし、後半はレイヤー自体の位置で動かしています。2文字程度であればどちらの方法でもあまり違いは有りません。
3. Positionの消失 01
この部分は文字をそれぞれのレイヤー8個にシェイプとして分解しています。そして、それぞれの文字を覆うようにマスクを作ります(Ctrl/Cmd + Shift + N)。
4. Positionの消失 02
最後に分解したそれぞれの文字(シェイプ)のシェイプコンテンツの位置を動かすことで、マスクから外れて消失します。