---
url: "/pl/bannerify/animation/custom-keyframes.md"
description: "Gdy potrzebujesz animacji spoza presetów Bannerify, utwórz własną z klatek kluczowych z właściwościami X, Y, skali, obrotu i krycia."
---

# Tworzenie własnych animacji z klatkami kluczowymi

> Gdy potrzebujesz animacji spoza presetów Bannerify, utwórz własną z klatek kluczowych z właściwościami X, Y, skali, obrotu i krycia.

### Poradnik wideo: dodawanie własnych animacji do banerów w Figmie

Ten film pokazuje, jak dodawać do banerów własne animacje z klatkami kluczowymi za pomocą wtyczki Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

## Otwieranie panelu własnych animacji {#opening-the-custom-animations-panel}

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

Aby otworzyć panel własnych animacji, kliknij przycisk **Custom Animations** w głównym nagłówku Bannerify. Otworzy się panel, w którym zaczniesz dodawać własną animację z klatkami kluczowymi.

## Tworzenie klatek kluczowych własnej animacji {#creating-custom-animation-keyframes}

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

Po otwarciu panelu animacji zobaczysz 2 klatki kluczowe: pierwszą (0%) i ostatnią (100%). Są dodawane domyślnie i nie można ich usunąć, bo animacja z klatkami kluczowymi potrzebuje co najmniej jednej klatki, od której się zaczyna, i jednej, która wyznacza jej koniec.

### Wybór klatki kluczowej do edycji {#selecting-a-keyframe-to-edit}

Między klatkami kluczowymi przełączasz się od razu, klikając klatkę na ścieżce **Keyframes** u góry panelu własnych animacji. Kliknięcie klatki pozwala edytować właściwości właśnie tej klatki.

### Wstawianie nowych klatek kluczowych {#inserting-new-keyframes}

Aby dodać klatkę kluczową między domyślnym początkiem a końcem, wpisz jej wartość procentową (na przykład **50**) w polu **Add at**, a potem wybierz **Add**.

Każda nowa klatka kluczowa jest automatycznie tworzona z tymi samymi właściwościami, co aktualnie zaznaczona klatka, więc możesz dopasowywać właściwości na podstawie już dodanych klatek. Po kliknięciu przycisku **Add** nowa klatka zostaje też automatycznie zaznaczona.

## Edycja właściwości klatek kluczowych {#editing-keyframe-properties}

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

W każdej klatce kluczowej animacji możesz edytować 5 różnych właściwości. Wszystkie różnice we właściwościach między klatkami kluczowymi są animowane automatycznie. Na przykład ustawienie skali 2x w klatce 0% i skali 1x w klatce 100% automatycznie utworzy animację „zmniejszania się”.

- Właściwość **X** animuje położenie elementu w poziomie (w pikselach).
- Właściwość **Y** animuje położenie elementu w pionie (w pikselach).
- Właściwość **Opacity** animuje procent krycia elementu.
- Właściwość **Rotate** animuje obrót elementu w stopniach.
- Właściwość **Scale** animuje rozmiar elementu.

### Względne przesunięcia X/Y w procentach {#using-percentage-based-relative-x-y-transforms}

Jeśli wolisz ustawiać położenie X/Y jako procent animowanego elementu, przełącz jednostki **Position** z **px** na **%** we właściwościach klatki kluczowej. Wtedy wartości X/Y podajesz w procentach (zamiast w pikselach).

Procentowa wartość przesunięcia X/Y automatycznie animuje element, do którego zastosowano animację, względem jego położenia, a procent jest liczony od jego rozmiaru. Na przykład wartość przesunięcia X `10%` w klatce kluczowej przesunie warstwę o szerokości `100px` o `10px`. Ta sama animacja z przesunięciem X `10%` zastosowana do warstwy o szerokości `200px` przesunie ją o `20px`.

### Rozdzielenie skali na osie X i Y {#splitting-scale-into-x-y-scale-options}

Jeśli wolisz ustawiać skalę osobno dla każdej osi X/Y, przełącz tryb **Scale** z **Uniform** na **X / Y** we właściwościach klatki kluczowej. Wtedy wartości skali w poziomie i w pionie ustawiasz w klatkach niezależnie, zamiast skalować obie osie jednakowo przy równomiernym powiększaniu lub pomniejszaniu.

To ustawienie przydaje się, gdy chcesz animować szerokość lub wysokość warstwy, nie zmieniając jednocześnie drugiej osi.

## Podgląd animacji na żywo {#using-the-live-preview-to-see-your-animation}

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

Aby zobaczyć, jak wygląda animacja po zmianach w klatkach kluczowych i ich właściwościach, spójrz na obszar **Live preview** obok właściwości klatki. Wszystkie zmiany klatek kluczowych, właściwości i wygładzania są automatycznie widoczne w podglądzie na żywo.

> **Tip:** **Możesz zmienić szybkość odtwarzania podglądu na żywo**. Jeśli chcesz zobaczyć, jak własna animacja wygląda przy różnych szybkościach, przeciągnij suwak **Duration** pod podglądem – określa on, ile sekund trwa każda pętla podglądu.

## Kopiowanie i wklejanie właściwości klatek kluczowych {#copying-and-pasting-keyframe-properties}

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

Aby skopiować właściwości z jednej klatki kluczowej do innej, zaznacz klatkę, z której chcesz je skopiować, i kliknij **Copy**. Potem zaznacz klatkę, do której chcesz je wkleić, i kliknij **Paste**, aby przenieść skopiowane właściwości na zaznaczoną klatkę. Możesz też kliknąć klatkę kluczową prawym przyciskiem myszy i wybrać **Copy Properties** lub **Paste Properties**.

> **Note:** **Skopiowane właściwości są dostępne tylko do zamknięcia panelu**. Właściwości możesz kopiować i wklejać między dowolnymi klatkami kluczowymi animacji, dopóki panel własnych animacji jest otwarty. Po jego zamknięciu skopiowanych właściwości nie da się już wkleić.

## Usuwanie klatek kluczowych {#deleting-keyframes}

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

Aby usunąć klatkę kluczową, kliknij ją na ścieżce **Keyframes**, żeby ją zaznaczyć, a potem kliknij przycisk **Delete** (albo kliknij klatkę prawym przyciskiem myszy i wybierz **Delete Keyframe**). Klatka zostanie usunięta z osi czasu. Pamiętaj, że _nie można_ usunąć klatek **0%** ani **100%** – to domyślne klatki wymagane przez oś czasu animacji.

Po usunięciu dowolnej klatki kluczowej jako aktywna klatka do edycji zostaje automatycznie ponownie zaznaczona klatka **0%**.

> **Warning:** **Usunięcie klatki kluczowej jest trwałe**. Usunięta klatka kluczowa znika z osi czasu na stałe i nie da się cofnąć tej operacji. Możesz jednak użyć **Copy**, aby skopiować właściwości klatki, usunąć ją, a potem wkleić te właściwości do innej klatki, dopóki nadal edytujesz oś czasu animacji.

## Ustawianie wygładzania animacji {#setting-the-animation-easing}

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

Rodzaj wygładzania animacji wybierasz w menu **Easing**. Wygładzanie jest automatycznie stosowane do całej osi czasu i aktualizuje obszar **Live preview**, dzięki czemu widzisz, jak wybrana krzywa zmienia ruch animacji z klatkami kluczowymi.

Do wyboru masz następujące opcje wygładzania:

- Ease (Default)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate

### Ustawianie własnej krzywej Cubic Bezier {#setting-a-custom-cubic-bezier-easing-value}

### Poradnik wideo: dodawanie wygładzania cubic bezier do animacji banerów w Figmie

Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać własne wygładzanie cubic-bezier do animacji banerów w Figmie.
[Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw)

Aby użyć własnej krzywej, przeciągnij jej uchwyty w menu **Easing** albo wklej poprawną wartość CSS cubic-bezier (na przykład `cubic-bezier(0.65,0.05,0.36,1);`) w pole pod presetami. Własną krzywą cubic-bezier możesz wygenerować w serwisie takim jak [https://easings.co/](https://easings.co/) lub w dowolnym innym narzędziu online do tworzenia krzywych CSS cubic-bezier.

## Ustawianie punktu początkowego animacji {#setting-the-animation-origin-point}

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

Domyślnie punkt początkowy wszystkich własnych animacji jest ustawiony na `Center` i `Center` dla osi X/Y. Możesz to zmienić, klikając jeden z dziewięciu punktów siatki **Origin point**, która łączy `Top`, `Center` lub `Bottom` dla osi pionowej z `Left`, `Center` lub `Right` dla osi poziomej.

Zmiana punktu początkowego wpływa na to, w którym miejscu warstwy animacja jest „przypięta”. Na przykład ustawienie punktu na `Top` i `Left` sprawi, że to właśnie wokół tego punktu warstwa będzie się obracać i względem niego będzie się powiększać lub pomniejszać.

## Zapisywanie nowej własnej animacji {#saving-your-new-custom-animation}

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

Aby zapisać nową animację, nadaj jej nazwę w polu tekstowym **Animation name**, a potem kliknij przycisk **Add New Animation**.

> **Note:** **Własne animacje są zapisywane i dostępne tylko w bieżącym pliku Figmy**. Zapisana animacja jest dostępna na każdej _stronie_ w _bieżącym_ pliku Figmy. Zapisane animacje _nie_ pojawią się jednak, jeśli uruchomisz Bannerify w zupełnie innym lub nowym pliku Figmy, ponieważ są zapisywane bezpośrednio w pliku Figmy i nie da się ich przenieść do innego pliku. W nowych plikach Figmy musisz utworzyć te animacje od nowa. Możesz też dodać nową _stronę_ w _bieżącym_ pliku Figmy – zapisane w nim własne animacje nadal będą tam dostępne.

## Korzystanie z zapisanych własnych animacji {#using-your-saved-custom-animations}

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

Gdy zapiszesz co najmniej jedną własną animację, możesz jej użyć w banerach, klikając pola wyboru **animacji wejścia** i **animacji wyjścia** przy warstwach na osi czasu. W opcjach pola wyboru pojawi się nowa grupa **Custom Animations** ze wszystkimi zapisanymi przez Ciebie własnymi animacjami.

> **Tip:** **Masowe stosowanie własnych animacji** Podobnie jak inne gotowe animacje, własną animację możesz też zastosować masowo za pomocą funkcji [masowego stosowania](/pl/bannerify/animation/animating-banners#applying-bulk-animations).

## Aktualizacja zapisanych animacji {#updating-your-saved-animations}

[Video](/assets/videos/bannerify/animation/update-saved-keyframes.mp4)

Aby zaktualizować zapisaną wcześniej własną animację, wybierz ją w menu **Saved animations** – animacja i jej klatki kluczowe wczytają się do panelu własnych animacji.

Po wybraniu zapisanej animacji możesz w razie potrzeby edytować klatki kluczowe i ich właściwości. Gdy zmiany Ci odpowiadają, kliknij przycisk **Update Saved Animation**, aby je zapisać i _nadpisać_ poprzednie klatki kluczowe animacji.

Pamiętaj, że aktualizacja zapisanej animacji automatycznie stosuje zmienione klatki kluczowe do wszystkich warstw w banerach, które już korzystały z tej własnej animacji.

> **Tip:** **Tworzenie nowej animacji na podstawie zapisanej**. Jeśli chcesz wczytać zapisaną animację i ją zmodyfikować, ale nie „nadpisywać” zapisanej wersji, możesz utworzyć na jej podstawie nową animację: wpisz nową nazwę w polu **Animation name** i kliknij przycisk **Add New Animation**.

## Usuwanie zapisanych animacji {#deleting-your-saved-animations}

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

Aby usunąć animację, wybierz dowolną pozycję w **Saved animations**, żeby ją wczytać, a potem kliknij przycisk **Delete Saved Animation**.

> **Warning:** **Usunięcie zapisanej animacji jest trwałe i usuwa ją z Twoich warstw**. Usunięta zapisana animacja znika na stałe z listy **Saved animations**. Wszystkie warstwy w banerach, które korzystały z usuniętej własnej animacji, wrócą do stanu **bez animacji**.