---
url: "/pl/bannerify/design/nested.md"
description: "Przesuwaj, skaluj, obracaj lub wygaszaj grupę nadrzędną, podczas gdy jej zagnieżdżone warstwy podrzędne odtwarzają własne animacje Bannerify."
---

# Niezależne animowanie grup i zagnieżdżonych warstw

> Przesuwaj, skaluj, obracaj lub wygaszaj grupę nadrzędną, podczas gdy jej zagnieżdżone warstwy podrzędne odtwarzają własne animacje Bannerify.

[Video](/assets/videos/bannerify/design/nested-layers.mp4)

### Poradnik wideo: niezależne animowanie grup i warstw za pomocą Group Motion

[Embedded media](https://www.youtube-nocookie.com/embed/B_YTLpBfROg)

[Przejdź do poradnika krok po kroku](/bannerify/tutorials/animate-groups-and-layers-independently).

Bannerify może jednocześnie animować grupę nadrzędną i znajdujące się w niej warstwy. Możesz na przykład przesuwać zgrupowany samochód przez baner i niezależnie obracać warstwy jego kół.

## Czego potrzebujesz {#things-you-ll-need}

- Ramki najwyższego poziomu w Figmie z projektem baneru.
- Warstwy nadrzędnej z co najmniej jedną warstwą podrzędną.
- Osobnych nazw dla warstw podrzędnych, które chcesz animować pojedynczo.

## Kroki {#steps}

1. W Figmie umieść powiązane warstwy w jednej grupie nadrzędnej. W przypadku animacji samochodu możesz utworzyć grupę `Car` zawierającą warstwy `Body`, `Wheel Left` i `Wheel Right`.
2. Wskaż Bannerify, że ma rozwinąć grupę nadrzędną, na jeden z tych sposobów:
   - Dodaj `[expand]` do nazwy warstwy nadrzędnej, na przykład `Car [expand]`.
   - Otwórz Bannerify, kliknij ikonę **List** u góry osi czasu baneru, a potem kliknij **strzałkę** obok warstwy nadrzędnej.
3. W panelu zagnieżdżonych warstw włącz **Keep Parent Animatable** obok rozwiniętej warstwy nadrzędnej. Ta opcja jest domyślnie wyłączona, więc istniejące konfiguracje zagnieżdżonych warstw zachowują dotychczasowe działanie, w którym animowane są tylko warstwy podrzędne.
4. Zamknij panel zagnieżdżonych warstw. Bannerify odświeży baner i doda udostępnione warstwy podrzędne do osi czasu.
5. Sprawdź, czy oś czasu zawiera warstwy podrzędne oraz osobny wiersz warstwy nadrzędnej z etykietą **(Group Motion)**. W tym przykładzie wiersz nadrzędny wyświetla się jako `Car [expand] (Group Motion)`.
6. Zastosuj wspólny ruch do wiersza **Group Motion**. Na przykład zastosuj **Slide In Left**, aby wsunąć cały samochód do baneru.
7. Zastosuj niezależne animacje do wierszy podrzędnych. Na przykład zastosuj **Rotate 360°** do każdego koła.
8. Kliknij **Play All Banners** lub użyj suwaka osi czasu, aby podejrzeć połączony efekt.
9. Wyeksportuj baner w zwykły sposób. Animacje warstwy nadrzędnej i podrzędnych są łączone w eksportach HTML, GIF, MP4, WebM i innych eksportach multimediów opartych na canvas.

## Group Motion {#group-motion}

[Video](/assets/videos/bannerify/animation/nested-parent-animation.mp4)

Gdy opcja **Keep Parent Animatable** jest włączona, Bannerify oznacza warstwę nadrzędną jako **Animatable** i dodaje do osi czasu osobny wiersz **Group Motion**. Wiersz nadrzędny działa jak kontener ruchu dla udostępnionych warstw podrzędnych. Przesunięcie, skalowanie, obrót, krycie i przycinanie zastosowane do warstwy nadrzędnej łączą się z animacjami poszczególnych warstw podrzędnych.

Jeśli opcja **Keep Parent Animatable** jest wyłączona, warstwy podrzędne pozostają rozwinięte i można je animować, ale Bannerify nie dodaje wiersza **Group Motion** warstwy nadrzędnej. Bannerify zapamiętuje tę opcję dla każdej warstwy nadrzędnej.

> **Tip:** Jeśli ta sama struktura występuje w kilku rozmiarach banerów, nadawaj warstwom podrzędnym jasne i spójne nazwy. Dzięki temu możesz użyć **Quick Select Layers**, aby zaznaczyć pasujące warstwy i masowo zastosować ich animacje.

## Przesuwanie zdjęcia wewnątrz zaokrąglonej maski {#moving-a-photo-inside-a-rounded-mask}

Aby wsunąć zamaskowaną grupę do baneru, podczas gdy zdjęcie porusza się niezależnie:

1. W Figmie użyj jednego prostokąta jako maski całej grupy. Umieść maskę pod całą grafiką, którą przycina. Każdy róg może mieć inny promień zaokrąglenia.
2. Rozwiń grupę z maską w Bannerify i włącz **Keep Parent Animatable**.
3. Zastosuj **Slide In Left** do wiersza **Group Motion** tej grupy.
4. Zastosuj do wiersza zdjęcia osobną animację, na przykład **Zoom Pan Right**. Wydłuż jej czas trwania, aby uzyskać wolniejszą panoramę.
5. Podejrzyj i wyeksportuj baner. Zdjęcie przesuwa się wewnątrz zaokrąglonego konturu, a animacja nadrzędna przesuwa całą grupę.

Obsługiwane są nieobrócone prostokątne maski ze standardowymi narożnikami, z nieprzezroczystą maską **Alpha** lub maską **Vector**. Sama maska nie staje się wierszem animacji. Grupy z wieloma maskami, maskami obejmującymi tylko część warstw siostrzanych, miękkimi maskami lub maskami luminancji, wygładzaniem narożników, obrysami lub efektami pozostaw zwinięte, aby zachować ich wygląd jako jednego obrazu.

## Korzystanie z sekcji Figmy {#using-figma-sections}

Ta sama konfiguracja działa, gdy włączona jest opcja **Use Figma sections as multi-scene banners**. Każdy udostępniony wiersz zawiera numer sceny, a warstwa nadrzędna z włączoną opcją pozostaje dostępna jako osobny wiersz **Group Motion** w tej scenie.

## Warstwy Slot w Figmie {#figma-slot-layers}

Bannerify obsługuje też [warstwy slot](https://help.figma.com/hc/en-us/articles/38231200344599-Use-slots-to-build-flexible-components-in-Figma) Figmy w ramkach banerów. Kontenery slotów są traktowane jak grupy zagnieżdżonych warstw i przy pierwszym wczytaniu przez Bannerify są rozwinięte, więc ich warstwy podrzędne są od razu dostępne na osi czasu.

Jeśli ręcznie zwiniesz warstwę Slot, Bannerify zapamięta to ustawienie po odświeżeniu baneru.

## Gdy brakuje grupy lub warstw podrzędnych {#if-the-group-or-child-layers-are-missing}

- Upewnij się, że baner jest ramką najwyższego poziomu w Figmie albo znajduje się w sekcji wczytanej w trybie wielu scen.
- Sprawdź, czy warstwa nadrzędna ma warstwy podrzędne i jest rozwinięta w Bannerify.
- Jeśli warstwy podrzędne pojawiają się bez wiersza **Group Motion** warstwy nadrzędnej, otwórz panel zagnieżdżonych warstw i włącz **Keep Parent Animatable** obok warstwy nadrzędnej.
- Jeśli zmieniono nazwę warstwy nadrzędnej, dodając `[expand]` po wczytaniu baneru, kliknij **Refresh Banner Layers**.
- Pozostaw warstwy podrzędne widoczne w Figmie i upewnij się, że znajdują się w rozwiniętej warstwie nadrzędnej.

## Przydatne linki {#useful-links}

- [Animowanie warstw baneru](/pl/bannerify/animation/animating-banners)
- [Zaznaczanie pasujących warstw za pomocą Quick Select](/pl/bannerify/animation/quick-select-layers)
- [Tworzenie banerów wieloscenicznych z sekcji Figmy](/pl/bannerify/design/scenes)
- [Eksport animowanych banerów do HTML](/pl/bannerify/export/html)
- [Eksport banerów do wideo](/pl/bannerify/export/video)