---
url: "/pl/bannerify/animation/animating-banners.md"
description: "Po wczytaniu ramek z Figmy do Bannerify możesz animować dowolną warstwę banerów za pomocą funkcji osi czasu we wtyczce."
---

# Animowanie banerów

> Po wczytaniu ramek z Figmy do Bannerify możesz animować dowolną warstwę banerów za pomocą funkcji osi czasu we wtyczce.

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

Ten film pokazuje, jak w kilka sekund animować i eksportować z Figmy gotowe do publikacji banery HTML.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Wybór animacji {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

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

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

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

> **Tip:** **Usuwanie animacji z warstwy**. Jeśli warstwa nie ma 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_). Dzięki temu do warstwy nie zostaną dodane żadne animacje, a pole wyboru animacji na osi czasu wtyczki będzie wyłączone.

## Podgląd animacji banerów na osi czasu {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

Animacje banerów odtworzysz, klikając ikonę **Play**, a w dowolnym momencie zatrzymasz oś czasu ikoną **Pause**. Ikona **Restart** uruchamia odtwarzanie animacji od początku.

Kliknij lub przeciągnij linijkę czasu nad banerami, aby przewijać animację. Wspólna głowica odtwarzania pozostaje wyrównana ze ścieżkami czasu we wszystkich banerach. Animację możesz też przewijać z nagłówka baneru, wszędzie tam, gdzie widać jego linijkę.

Użyj **+**, **−**, suwaka powiększenia albo gestu szczypania dwoma palcami na gładziku nad linijką lub ścieżkami czasu, aby powiększać widok w zakresie **od 100% do 1000%**. Po powiększeniu przeciągnij zaokrąglony niebieski uchwyt paska przewijania pod linijką w lewo lub w prawo. Kliknij **Fit**, aby znów zobaczyć całą oś czasu. Te elementy sterowania zmieniają tylko widok – nie wpływają na czasy animacji ani na długość eksportu. Wszystkie elementy nawigacji opisuje sekcja [Powiększanie i przewijanie osi czasu](/pl/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline).

Do dokładniejszej edycji użyj [przyciągania, filtrów warstw, znaczników i sekwencji ruchu wielokrotnego użytku](/pl/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) albo [zapętl obszar roboczy](/pl/bannerify/animation/previewing-animations#loop-a-work-area), gdy dopracowujesz przejście.

## Timeline Settings {#timeline-settings}

Kliknij **Timeline Settings** w nagłówku. Panel otwiera się na karcie **General** i ma cztery karty:

| Karta | Ustawienia |
| --- | --- |
| **General** | Długość osi czasu, Magic Delays i Magic Speeds |
| **Timeline Tools** | [Zapętlanie zakresu podglądu](/pl/bannerify/animation/previewing-animations#loop-a-work-area) i [dodawanie nazwanych znaczników](/pl/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [Zapisywanie i ponowne użycie skoordynowanych animacji](/pl/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [Kopiowanie czasów między rozmiarami banerów](/pl/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**, filtr warstw, **Zoom To Selection** i przyciski zwijania grup znajdziesz w **Timeline Settings → Timeline Tools**.

## Przeglądanie i przywracanie zmian {#review-and-restore-edits}

Kliknij **History** obok strzałek cofania i ponawiania, aby [przeglądać zmiany na osi czasu](/pl/bannerify/animation/undo-redo). Wybierz krok, aby przeskoczyć wstecz lub do przodu; **Current** oznacza aktywny stan. Nowe zmiany wprowadzone po cofnięciu się zastępują późniejszą historię.

## Zmiana długości osi czasu {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

Otwórz **Timeline Settings → General**, wybierz czas w **Total Timeline Length**, a potem kliknij **Update Timeline Length**. Dostępne są długości od 1 sekundy do 3 minut. Zmiana obejmuje wszystkie banery; zakresy czasu, które wykraczają poza krótszą oś czasu, są do niej dopasowywane.

Poprzednią długość i czasy przywrócisz przyciskiem **Undo** albo wybierając wcześniejszy krok w **History**. Zobacz [Zmiana długości osi czasu](/pl/bannerify/animation/timeline-length).

## Dodawanie animacji wyjścia {#adding-exit-animations}

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

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

> **Note:** 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ą na siebie nachodzić, a ich przejścia będą ze sobą kolidować.

## Dostosowywanie szybkości i czasu animacji {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

Szybkość i opóźnienie animacji zmienisz, **klikając** lewą lub prawą **krawędź** paska czasu warstwy, a potem **przytrzymując i przeciągając** ją myszą, aby zmienić długość animacji oraz jej punkt początkowy lub końcowy.

Położenie animacji na osi czasu zmienisz, **klikając** **środek** paska czasu warstwy, a potem **przytrzymując i przeciągając** go myszą w lewo lub w prawo.

> **Tip:** **Wpisuj dokładne czasy z klawiatury**. Jeśli nie chcesz korzystać z paska czasu, możesz ustawić szybkość i opóźnienie, klikając drugą wartość przy warstwie na osi czasu i wpisując z klawiatury nową liczbę sekund (na przykład *1.5*).

## Zapętlanie animacji {#looping-animations}

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

Jeśli chcesz, aby animacja konkretnej warstwy powtarzała się bez końca (nawet po zakończeniu osi czasu baneru), włącz przełącznik **Loop** obok wybranej animacji. Przydaje się to przy bardzo krótkich animacjach, które dobrze wyglądają w pętli (na przykład „Heartbeat”, „Flicker” czy „Pulse”).

## Kopiowanie i wklejanie animacji {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

Animację z jednej warstwy na osi czasu możesz szybko skopiować na inną za pomocą przycisków **Copy** i **Paste**. Kliknięcie **Copy** kopiuje animację, którą potem wkleisz, klikając **Paste** przy dowolnej innej warstwie.

> **Tip:** **Wklejanie skopiowanej animacji do wielu warstw** Skopiowaną animację możesz też zastosować masowo do wielu warstw za pomocą funkcji [masowego stosowania](/pl/bannerify/animation/animating-banners#applying-bulk-animations).

## Masowe stosowanie animacji {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

Aby szybko zastosować animację do wielu warstw jednocześnie, zaznacz warstwy polami wyboru obok ich nazw (albo użyj funkcji **Quick Select Layers**), a potem ustaw animację w wysuwanym panelu na dole okna wtyczki. Gdy animacja Ci odpowiada, kliknij przycisk **Apply Animations to Selected Layers**, aby zastosować ją do wszystkich zaznaczonych warstw.

## Szybkie zaznaczanie podobnych warstw {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

Jeśli pracujesz z zestawem banerów, w którym kilka banerów ma te same elementy lub warstwy, użyj menu **Quick Select Layers** w nagłówku Bannerify, aby automatycznie zaznaczyć podobne warstwy we wszystkich banerach. To wygodna alternatywa dla ręcznego zaznaczania każdej warstwy.

> **Tip:** **Przykład użycia Quick Select Layers** Jeśli na przykład wszystkie Twoje banery zawierają warstwę o nazwie **CTA Button**, kliknij tę opcję, a wszystkie warstwy **CTA Button** zostaną zaznaczone automatycznie. Potem możesz **masowo zastosować** animacje do tej warstwy we wszystkich banerach jednocześnie.

## Magiczne opóźnienia i magiczne szybkości {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

Otwórz **Timeline Settings → General** i wybierz wartość w sekcji **Magic Delays** lub **Magic Speeds**. Kliknij **Apply To All Entry Animations** lub **Apply To All Exit Animations**, aby zastosować ją we wszystkich banerach.

### Magic Delays {#magic-delays}

Wybierz stopniowane opóźnienie od 0,1 do 0,5 sekundy. Warstwy dostają kolejne przesunięcia opóźnienia, a czas trwania ich animacji pozostaje bez zmian.

### Magic Speeds {#magic-speeds}

Wybierz czas trwania od 0,1 do 1 sekundy. Czasy rozpoczęcia pozostają takie same, chyba że trzeba je przesunąć wcześniej, aby zmieściły się na osi czasu.

Każde zastosowanie to jeden krok historii. Użyj **Undo**, **Redo** lub panelu **History**, aby przechodzić między zmianami. Zobacz [Magic Delays i Magic Speeds](/pl/bannerify/animation/magic-delays-speeds).