top of page

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


特集記事
後でもう一度お試しください
記事が公開されると、ここに表示されます。
最新記事
アーカイブ
タグから検索
ソーシャルメディア
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square

© 2016 yukitakagi All Rights Reserved.

  • facebook-square
  • Twitter Square
bottom of page