Wybór animacji

Wybieraj spośród dziesiątek gotowych animacji opartych na klatkach kluczowych dla warstw banerów.

Poradnik wideo: animowanie banerów z Figmy i eksport do HTML

Ten film pokazuje, jak w kilka sekund animować w Figmie banery HTML gotowe do publikacji i je wyeksportować.

Animacje ​

Bannerify zawiera dziesiątki gotowych animacji opartych na klatkach kluczowych, podzielonych na 5 kategorii:

  • Entrances
  • Exits
  • Basic Transforms
  • Attention Seekers
  • Background Pans

Animacje dzielonego tekstu. Bannerify zawiera też osobny zestaw animacji dzielących tekst na znaki, słowa i wiersze dla obsługiwanych warstw tekstowych. Kroki konfiguracji, obsługiwane fonty i obecne ograniczenia opisuje artykuł Animacje dzielonego tekstu.

Natywne animacje Figma Motion. Wybierz wykrytą animację z grupy Figma Motion dla pojedynczej warstwy albo wybierz Apply Each Layer's Figma Motion z menu wejścia Batch Layer Actions. Gdy Motion jest zastosowane do co najmniej jednej warstwy, włącz Mirror Figma Motion Timings nad osią czasu, jeśli chcesz też użyć natywnych przesunięć czasowych z Figmy. Pełne kroki włączania i obsługiwane właściwości opisuje artykuł Animacje Figma Motion.

Usuwanie animacji z warstwy. Jeśli warstwa ma nie mieć żadnych animacji, wybierz No Entry Animation i/lub No Exit Animation albo zmień nazwę warstwy w Figmie, dodając prefiks locked- (na przykład locked-RectangleBackground). To również zapobiega dodaniu animacji i wyłącza pole wyboru animacji na osi czasu wtyczki.

Dodawanie animacji wejścia ​

Aby ustawić animację wejścia, najedź kursorem na warstwę, którą chcesz animować na osi czasu Bannerify, i kliknij górne pole wyboru. Przewiń listę animacji i kliknij nazwę animacji, aby zastosować ją do warstwy. Podgląd baneru od razu się zaktualizuje i pokaże nową animację.

Dodawanie animacji wyjścia ​

Animacje wyjścia dodaje się tak samo jak animacje wejścia – zamiast górnego pola wyboru kliknij dolne pole wyboru, aby wybrać animację wyjścia dla warstwy.

Upewnij się, że każda animacja wyjścia ustawiona na warstwie zaczyna się po zakończeniu animacji wejścia. W przeciwnym razie obie animacje będą się nakładać, a ich przejścia będą ze sobą kolidować.