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.

Otwieranie panelu własnych animacji

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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.

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/ lub w dowolnym innym narzędziu online do tworzenia krzywych CSS cubic-bezier.

Ustawianie punktu początkowego animacji

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

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

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

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.

Masowe stosowanie własnych animacji Podobnie jak inne gotowe animacje, własną animację możesz też zastosować masowo za pomocą funkcji masowego stosowania.

Aktualizacja zapisanych animacji

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.

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

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

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.