【リピーターを使ったシェイプアニメーション】

作り方はもうインターネットにありふれているものですがプリセットを配布したいので簡単に解説します。

①シェイプレイヤーを作成

任意の形状のパス(見本は楕円形パス)を追加。
線や塗りはお好みで設定してください。

見本は「グループ」に格納していますが単体で作るだけならなくても特に影響はありません。

②リピーターを追加

「リピーター1」と「トランスフォーム:リピーター1」のプロパティを下記の数値に設定

コピー数・・・任意の数値(見本は6)

位置・・・0.0,0.0(初期値は100,0.0)
回転・・・360÷コピー数

「回転」は「360/content("リピーター 1").copies」というエクスプレッションを記述しておくだけで、設定したコピー数に応じた回転値を自動で出力してくれます。

③アニメーションを追加

パス内の「位置」の数値を変更することで中心から外側に広がるようなシェイプアニメーションを作成することが出来ます。

トランスフォームの位置を「0.0,0.0」にしていなかったり、パスの初期値がおかしなところにあるとイメージ通りの形状を再現することが出来ません。(初心者あるある！)

ペンツールで描画したパスを使用する場合は少し勝手が異なるため別途解説します。

①シェイプレイヤーを作成

コンポジションパネルの下部の左から7番目にある「グリッドとガイドのオプションを選択」から「プロポーショナルグリッド」をクリックしてガイドを追加します。
ガイドを参考に、中央より少し上辺りにペンツールでパスを制作してください。(自動的に線と塗りが追加されますが塗りは削除してしまって構いません。)

パスの位置を調整する時、トランスフォームを使ってしまうとリピーターを追加した時に意図した挙動にならない場合があるため、「パス」をクリックした状態で選択ツールで移動させることを推奨します。(Shiftを押しながらドラッグするとまっすぐ水平に移動出来ます。)

中級者向けですが、何もない「パス」に対して「createPath(points = [[0,-400(任意の数値)], [0,-100(任意の数値)]], inTangents = [], outTangents = [], isClosed = false)」というエクスプレッションを記述すると、ぴったり真ん中に線が生成されるため大変便利です。

②リピーターを追加

手順は先ほどと同様です。

「リピーター1」と「トランスフォーム:リピーター1」のプロパティを下記の数値に設定

コピー数・・・任意の数値(見本は6)

位置・・・0.0,0.0(初期値は100,0.0)
回転・・・360÷コピー数

③アニメーションを追加

先程と同じくシェイプ内の「トランスフォーム:シェイプ1＞位置」の数値を変更することでアニメーションさせることが出来ます。

線が現れて消えるようなアニメーションは、「パスのトリミング」を追加し、開始点と終了点にキーフレームを打ってあげることで再現出来ます。
シェイプ自体のアニメーションと組み合わせることでよりダイナミックなアニメーションを表現することが可能です。

---

質問やリクエストなどございましたらこちらからどうぞ！

https://marshmallow-qa.com/6ir1mm8ae4jgxu9

＜有料エリアにてプリセットを2種類配布しています＞

①Shape Repeter
リピーターは勿論、シェイプの形状(楕円形パス、長方形パス、多角形パス、パス)や線と塗りのカラーや表示/非表示、パスのトリミングまで全て一つのエフェクトでコントロール出来るプリセットです。(使用感参考)

②Repeter
リピーターのみコントロールが出来るプリセットです。
グループ内に自由にシェイプを作成してお使いください。