【After Effects】シェイプレイヤーの追加オプションの基礎【シェイプアニメーション】

シェイプレイヤーに追加できるオプション項目についての覚書。理解し次第追記する予定。

シェイプレイヤーを追加して円シェイプを配置した初期状態はこう。

<img width="827" alt="スクリーンショット 2020-02-17 14.33.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/d63fa371-0f8e-de5d-b34e-e6719c0fe142.png">

##空のグループ

トランスフォームのみが追加される。

<img width="760" alt="スクリーンショット 2020-02-17 14.36.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/85adce31-1835-53d8-f673-b40de8e35a1b.png">

##シェイプテンプレートを追加するオプション（4種類）

編集するシェイプの土台を生成する。描画されるシェイプはシェイプレイヤーのアンカーポイントに配置される。パスのみの生成なので線にも面にも色は指定されていない。

<img width="233" alt="スクリーンショット 2020-02-17 14.39.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/048846ac-d01b-b01b-d804-84b259d6abba.png">

##色に関するオプション（4種類）

シェイプの線や面の色を指定する。

<img width="232" alt="スクリーンショット 2020-02-17 14.40.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/337230c6-85b5-4adc-24bf-242d7532d0be.png">

##パスに関するオプション（10種類）

###パスを結合

シェイプレイヤーの中に生成されたパスのブーリアン演算を行う。

<img width="757" alt="スクリーンショット 2020-02-17 14.51.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/38d14a35-e12e-2a9b-d99a-dd0f6993bf9c.png">

|結合方式|結果|図解|
|:-:|---|---|
|結合|線も塗りも残る。|<img width="69" alt="スクリーンショット 2020-02-17 14.56.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/91bdf15f-5e83-ad35-2ec3-eabd77f72231.png">|
|追加|交差した線は塗りに統合されて消える。|<img width="69" alt="スクリーンショット 2020-02-17 14.56.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/620596f1-2472-05d1-1831-e44bfdbc1e80.png">|
|型抜き|下のレイヤーのシェイプで切り抜かれる。|<img width="70" alt="スクリーンショット 2020-02-17 14.56.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/68003cf9-3db4-e321-61a1-19c764b54aec.png">|
|交差|互いに重なる部分のみ残る。|<img width="68" alt="スクリーンショット 2020-02-17 14.56.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/f487acc7-45d3-4b83-5dd7-66190a96f88a.png">|
|中マド|互いに重なる部分の塗りのみ消え、線は残る。|<img width="70" alt="スクリーンショット 2020-02-17 14.56.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/d791c64e-d250-ca7a-14b7-818640f38e65.png">|

###パスのオフセット

シェイプの境界を拡張・収縮させる。その範囲の頂点形状として3種類の設定がある。

|モード|結果|図解|
|:-:|---|---|
|マイター|シェイプの形状のまま。||
|ラウンド|コーナー半径を付与。||
|ベベル|角落としを付与。||

`角の比率`という項目は`マイター`を選択しているときのみ適用される。角落としの量を設定する数値らしいが、ベベルとの違いがよく分からん。

###パンク・膨張

破裂や膨張の形状で装飾するオプション。ポップなロゴや吹き出しなどで使えそう。オプション項目は`量`のみ。

<img width="633" alt="スクリーンショット 2020-02-17 17.24.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/c4a5ff07-f6f6-8f6c-5e9e-d5b31d9a5f67.png">


###リピーター

<img width="573" alt="スクリーンショット 2020-02-17 17.27.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/934b9d40-70db-48ad-9562-506b8b787e12.png">

|リピーターの項目|結果|図解|
|:-:|---|---|
|コピー数|複製する数を設定。トランスフォームの数値で複製うる位置やパターンを設計できる。||
|オフセット|||
|コンポジット|||

トランスフォームは複製されるシェイプに対して加算式に適用されるため、変化がグラデーションのように現れる。

|トランスフォームの項目|結果|図解|
|:-:|---|---|
|アンカーポイント|||
|位置|複製するシェイプがオリジナルが生成される位置を、アンカーポイントからの相対距離で設定。||
|スケール|複製するシェイプのサイズの設定。プラスにすると徐々に大きく、マイナスにすると徐々に小さくなっていく。||
|回転|複製するシェイプの角度の設定。||
|開始点の不透明度|オリジナルのシェイプ側の不透明度。||
|終了点の不透明度|複製するシェイプ側の不透明度。||

###リピーターを使った頻出例

応用としてよくある花火のようなシェイプアニメーションの設定を載せておく。コンポジション設定は。(x,y)=(1000,1000)正方形のコンポジションサイズで、フレームレートは60fps。

まずシェイプパスの設定。アンカーポイントはシェイプ中央、位置は画面中央、色は自由だがここでは白の塗り。

<img width="755" alt="スクリーンショット 2020-02-17 17.52.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/54d0b639-0286-b0f3-157b-2fc53f0c6407.png">

<img width="327" alt="スクリーンショット 2020-02-17 17.55.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/d4def651-660b-f429-a706-c98028b77fd7.png">

次にリピーターの設定。コピー数12で、回転角を30°にすることで時計のような放射状に複製されるようになる。アンカーポイントをシェイプ中央に配置しているのでプロペラのようにリピート生成されることになる。

<img width="750" alt="スクリーンショット 2020-02-17 17.53.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/5d0ac8eb-b812-ebe2-f1c8-909498039c73.png">

<img width="330" alt="スクリーンショット 2020-02-17 17.55.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/fc1181ad-19ef-4c78-7a92-bbcc7b301932.png">


アニメーションのキーフレーム。リピートされたシェイプが放射状に飛び散り、長方形シェイプが長手方向に伸び縮する動きを設定。そして全てのキーフレームにイージーイーズを適用しておく。

|項目|数値|フレーム数|
|:-:|---|---|
|位置|0<br>400|0f<br>60f|
|スケールx|0% <br>100%<br>0%|0f<br>30f<br>60f|

<img width="753" alt="スクリーンショット 2020-02-17 17.59.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/6a17befd-37c4-92b5-dedf-bf785b6b8165.png">

結果物はこうなる。

![コンポ 1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/87cdd06c-e6a8-843f-b918-43f0ca9d3c4f.gif)


###角を丸くする

シェイプの頂点にコーナー半径を付与する。ただし、曲線パスが結合された頂点に対しては適用されない。オプション項目の`半径`はそのままの意味。

<img width="454" alt="スクリーンショット 2020-02-17 17.13.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/701db1eb-7f3c-8d72-184e-e5c55c8e7428.png">

###パスのトリミング

パスの表示・非表示の範囲を設定する。有り体に言えば、パスの線が引かれるアニメーションを作れるやつ。あくまでパスに対するトリミングであり、シェイプに対してではないため、トリミングは輪郭線上から適用される。よって円グラフのようなアニメーションは作れない。

<img width="186" alt="スクリーンショット 2020-02-17 18.26.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/28e25990-5bc9-6f84-a31c-4ffe3cf7d7a8.png">

|オプション||
|開始点|トリミングを開始する輪郭線上の位置。|
|終了点|トリミングを終了する輪郭線上の位置。|
|オフセット|開始点と終了点の境界位置を移動。|
|複数のシェイプをトリム||

###旋回

シェイプに対して捻れるような動きを与える。液体が混ざり合う表現や、レンズの歪み、火の玉といった表現に使えそう。下図は正方形シェイプに適用した例。

|項目|結果|図解|
|:-:|---|---|
|角度|ねじれの量を設定。|<img width="116" alt="スクリーンショット 2020-02-17 18.32.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/cea5e944-c33e-d593-b124-50956a1cb097.png">|
|中央|ねじれの中心を設定。|<img width="126" alt="スクリーンショット 2020-02-17 18.33.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/de8e355e-bcb5-fd07-defe-d1556afdef64.png">|

###パスのウィグル

パスの頂点の位置やハンドルの長さ・角度に対してランダムに数値的な揺らぎを与える。プルプル震える表現や、オーディオスペクトラムのようなノイズ、ポップな爆発といった表現に使えそう。

<img width="566" alt="スクリーンショット 2020-02-17 18.41.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/2d3814e9-d49a-a177-71db-887725baa950.png">

|項目|結果|図解|
|:-:|---|---|
|サイズ|揺れの振れ幅。||
|ディテール|変形のフラクタルな粒度。||
|ポイント|直線的な変形か、曲線的な変形か。||
|ウィグル/秒|揺れの頻度。||
|相関性|元の形状をどれだけ残すかという設定。||
|時間的フェーズ|変化のタイミングの時間的位置の移動。||
|空間的フェーズ|変化のタイミングの状態的位置の移動。||
|ランダムシード|ランダムの量とか。||

![コンポ 1あs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/28c830eb-987d-f9ef-e820-2531e3082e7e.gif)

![asdfaf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/16563cc2-9fbe-07a8-48a0-43513082feab.gif)

![ふぁs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/d22c20da-ab8b-8edb-34b3-734913c02e8b.gif)


###トランスフォームのウィグル

パスのウィグルのような時間的な変化を、トランスフォームのパラメータに対して適用する。エクスプレッションで`wiggle`を設定するようなもの。

<img width="566" alt="スクリーンショット 2020-02-17 18.53.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/3a8a61f2-491c-9250-0a4e-a38ac893ff0c.png">

###ジグザグ

シェイプ形状の輪郭をジグザグに装飾する。

<img width="242" alt="スクリーンショット 2020-02-17 15.14.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278293/11ef7c64-aadb-d32d-9f3a-ecfce1902738.png">