動画チュートリアル：Group Motionでグループとレイヤーを個別にアニメーションさせる
Bannerifyでは、親グループとその中のレイヤーに同時にアニメーションを付けられます。たとえば、グループ化した車をバナーの端から端まで動かしながら、タイヤのレイヤーを個別に回転させられます。
必要なもの
- バナーデザインを含む、最上位のFigmaフレーム。
- 1つ以上の子レイヤーを含む親レイヤー。
- 個別にアニメーションさせたい子レイヤーには、それぞれ別の名前。
手順
- Figmaで、関連するレイヤーを1つの親グループに入れます。車のアニメーションなら、
Body、Wheel Left、Wheel Rightを含むCarグループを作成します。 - 次のどちらかの方法で、親グループを展開するようBannerifyに指示します。
- 親レイヤーの名前に
[expand]を追加します（例：Car [expand]）。 - Bannerifyを開き、バナーのタイムラインの上部にあるListアイコンをクリックしてから、親レイヤーの横にあるArrowをクリックします。
- 親レイヤーの名前に
- ネストされたレイヤーのパネルで、展開した親の横にあるKeep Parent Animatableを有効にします。このオプションはデフォルトでオフになっているため、既存のネストされたレイヤーの設定は、子レイヤーだけをアニメーションさせる従来の動作のまま変わりません。
- ネストされたレイヤーのパネルを閉じます。Bannerifyがバナーを更新し、展開された子レイヤーをタイムラインに追加します。
- タイムラインに子レイヤーと、(Group Motion) というラベルの付いた別の親の行があることを確認します。この例では、親の行は
Car [expand] (Group Motion)と表示されます。 - 共通の動きはGroup Motionの行に適用します。たとえば、Slide In Leftを適用して、車全体をバナーに入ってこさせます。
- 子の行には個別のアニメーションを適用します。たとえば、それぞれのタイヤにRotate 360° を適用します。
- Play All Bannersをクリックするか、タイムラインのスクラバーを使って、組み合わせた結果をプレビューします。
- 通常どおりバナーをエクスポートします。親と子のアニメーションは、HTML、GIF、MP4、WebM、その他のcanvasベースのメディアエクスポートで合成されます。
Group Motion
Keep Parent Animatableを有効にすると、Bannerifyは親をAnimatableとしてマークし、タイムラインに別のGroup Motionの行を追加します。親の行は、展開された子レイヤーを包むモーションラッパーとして機能します。親に適用した移動、拡大縮小、回転、不透明度、クリッピングは、各子に適用したアニメーションと組み合わされます。
Keep Parent Animatableをオフにすると、子レイヤーは展開されたままアニメーションを付けられますが、親のGroup Motionの行は追加されません。Bannerifyは、このオプションを親レイヤーごとに記憶します。
同じ構成が複数のバナーサイズにある場合は、子レイヤーにわかりやすく統一した名前を付けてください。そうすれば、Quick Select Layersで一致するレイヤーを選択し、アニメーションをまとめて適用できます。
角丸マスクの中で写真を動かす
マスクしたグループをバナーにスライドインさせながら、中の写真を個別に動かすには、次の手順に従います。
- Figmaで、1つの長方形をグループ全体のマスクとして使います。マスクは、切り抜くすべてのアートワークより下に置いてください。角ごとに異なる角丸の半径を使っても構いません。
- Bannerifyでマスクグループを展開し、Keep Parent Animatableを有効にします。
- グループのGroup Motionの行にSlide In Leftを適用します。
- 写真の行には、Zoom Pan Rightなどの別のアニメーションを適用します。ゆっくりパンさせたい場合は、長さを延ばします。
- バナーをプレビューしてエクスポートします。親のアニメーションでグループ全体が動く一方で、写真は角丸の輪郭の中で動きます。
この機能は、回転していない標準的な角の長方形マスクに対応しており、不透明なAlphaマスクまたはVectorマスクを使えます。マスク自体はアニメーションの行にはなりません。複数のマスク、一部の兄弟レイヤーだけにかかるマスク、ソフトマスクや輝度マスク、角の丸め（スムージング）、線、エフェクトを含むグループは、1枚の画像としての見た目を保つために折りたたんだままにしてください。
Figmaのセクションを使う
Use Figma sections as multi-scene bannersを有効にしている場合も、同じ設定で使えます。展開された各行にはシーン番号が付き、オプトインした親は、そのシーン内の別のGroup Motionの行として引き続き使えます。
FigmaのSlotレイヤー
Bannerifyは、バナーフレーム内のFigmaのスロットレイヤーにも対応しています。スロットのコンテナは、ネストされたレイヤーのグループと同じように扱われ、Bannerifyが最初に読み込んだときに展開された状態で始まるため、子レイヤーをすぐにタイムラインで使えます。
Slotレイヤーを手動で折りたたんだ場合、Bannerifyはバナーを更新してもその設定を記憶しています。
グループや子レイヤーが表示されない場合
- バナーが最上位のFigmaフレームであるか、マルチシーンモードで読み込んだセクションの中にあることを確認してください。
- 親に子レイヤーがあり、Bannerifyで展開されていることを確認してください。
- 子レイヤーは表示されるのに親のGroup Motionの行がない場合は、ネストされたレイヤーのパネルを開き、親の横にあるKeep Parent Animatableを有効にしてください。
- バナーを読み込んだ後で親の名前に
[expand]を追加した場合は、Refresh Banner Layersをクリックしてください。 - 子レイヤーをFigmaで表示状態にしておき、展開した親の中にあることを確認してください。