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.

Poradnik wideo: niezależne animowanie grup i warstw za pomocą Group Motion
Przejdź do poradnika krok po kroku.

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 ​

  • 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 ​

  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 ​

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.

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 ​

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 ​

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 ​

Bannerify obsługuje też warstwy slot 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 ​

  • 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.