01_01シェイプアニメーションの基礎
- yukitakagi99
- 2017年8月14日
- 読了時間: 3分
アニメーションとエフェクトを工夫して上記のようなアニメーションを作成していきます。
始めにテキストと円のシェイプを使用したアニメーションを最初に作成していきます。
1. 下記の設定でコンポジションを作成してください。名前は「shape_anim」
width: 1920
height: 1080
Frame rate: 30
Duration: 10 sec

2. 始めに中央の円を作成します。作成したコンポジションにシェイプレイヤーを作成して、楕円ツールで適当な大きさの円シェイプを作成してください。作成した円を整列パネルを使って、コンポジションの中心に配置してください。そして、円のプロパティの以下のように変更してください。
線の不透明度: 0%
塗りの色: 白

3. 次に外側の円を作成します。別のシェイプレイヤーを作成し、同じように楕円ツールを使って円を作成してください。最初に使った円よりは少し大き目に作成してください。作成した円を整列パネルを使って、コンポジションの中心に配置してください。そして、円のプロパティを以下のように変更してください。
線の色: 白
線の幅: 18
塗りの不透明度: 0%

4. テキストレイヤーを追加し、「AE」と入力し、フォントサイズなどを以下のような大きさに調整してください。整列パネルを使ってコンポジション中央に配置してください。もし、このとき、テキストが先に作った円シェイプより大きい場合は、円シェイプのスケールを調整して、テキストが隠れるような大きさにしてください。これで、使用するレイヤーの準備ができました。

5. 一番外側の円からアニメーションを作成していきます。レイヤーの中のコンテンツ項目の横にある「Add(または追加)」をクリックし、「パスをトリミング」を選んでください。プロパティが追加されます。使い方はテキストアニメーターのセレクターと同じです。


6. 追加したプロパティに以下のようにキーフレームを作成し、全てのキーフレームを選択して「F9」をクリックしてください。(イージーイースをかけるためです。)
開始:
0:00:00:00 : 100%
0:00:00:26 : 0%
終了:
0:00:00:12 : 100%
0:00:01:08 : 0%
オフセット
0:00:00:07 : 0x+54
0:00:01:05 : 0x-14

7. 次に円シェイプにアニメーションを作成します。レイヤーを選択し、エフェクトから「トランジション>放射状ワイプ」を適用してください。「変換終了」のプロパティにキーフレームを打っていきます。これでテキスト以外のアニメーションは終了です。
0:00:00:00 : 100%
0:00:00:15 : 0%
0:00:01:02 : 100%

8. テキストレイヤーを選んだ状態で、エフェクトから「スタイライズ>モーションタイル」を適用してください。モーションタイルのプロパティの中から「Title Center」を選択した状態で、「アニメーション>エクスプレッションを追加」をクリックしてください。プロパティの下にエクスプレッションが追加され、テキストが入力できるようになります。「wiggle(10,15)」と入れてください。テキストがランダムに揺れ動くようなアニメーションになりました。

9. テキストは0:00:00:15まで必要がないので、トラックバーを0:00:00:15まで縮めてください。これで完成です。

>01_02につづく
Comentarios