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.

Gdy pasek jest zbyt wąski, aby wygodnie go chwycić, najedź na niego kursorem lub ustaw na nim fokus klawiaturą. Pojawią się wtedy okrągłe uchwyty po lewej i prawej stronie, a gdy pasek ma szerokość 28px lub mniej – także mały uchwyt do przesuwania pod paskiem. Przeciągnij kropkę, aby zmienić tę krawędź, albo przeciągnij dolny uchwyt, aby przesunąć animację. Te elementy mają większe pola chwytu i pozostają w obrębie kolumny osi czasu. Paski czasu trwania hover mają tylko prawy uchwyt. Działa tu to samo przyciąganie, te same skróty klawiszowe i ta sama historia cofania co przy zwykłym pasku.

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.

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

Zmiana czasów na wielu warstwach

Zaznacz co najmniej dwie warstwy, a potem przeciągnij pasek czasu animacji wejścia, wyjścia lub hover na jednej z nich. Bannerify przesunie w ten sam sposób odpowiadającą jej aktywną ścieżkę czasu na pozostałych zaznaczonych warstwach, zachowując ich względne przesunięcia.

Jeśli najwcześniejszy lub najpóźniejszy zaznaczony czas dotrze do krawędzi osi czasu, Bannerify zatrzyma grupę na tej granicy. Zablokowane warstwy, nieaktywne ścieżki czasu oraz czasy wejścia sterowane przez odwzorowane animacje Figma Motion pozostają bez zmian.

Każde zakończone przeciągnięcie jest zapisywane jako jeden krok historii, który można cofnąć.

Powiększanie i przewijanie osi czasu

Użyj przycisków + i − albo suwaka powiększenia nad listą warstw, aby zobaczyć więcej lub mniej szczegółów. Procent obok suwaka pokazuje bieżący poziom powiększenia. Kliknij Fit, aby wrócić do 100% i znów zobaczyć całą oś czasu. Powiększenie zmienia tylko widok – nie wpływa na czasy animacji ani na długość eksportu.

Zsuwaj lub rozsuwaj dwa palce na gładziku, gdy wskaźnik znajduje się nad linijką lub ścieżkami czasu. Moment pod wskaźnikiem pozostaje na miejscu podczas powiększania w zakresie 100–1000%. Gest szczypania zmienia tylko widok i jest ignorowany podczas przeciągania paska czasu. Możesz też przytrzymać Ctrl i przewijać kółkiem myszy.

Po powiększeniu kliknij i przytrzymaj zaokrąglony niebieski uchwyt paska przewijania tuż pod linijką, a potem przeciągnij go w lewo lub w prawo, aby poruszać się po osi czasu. Uchwyt podświetla się po najechaniu i podczas przytrzymania. Możesz też przewijać w poziomie gładzikiem albo przytrzymać Shift i przewijać nad ścieżką czasu. Linijka i paski czasu pozostają wyrównane we wszystkich banerach.

Paski animacji wejścia i wyjścia pokazują czas odtwarzania każdej animacji. Koniec paska wejścia oznacza moment zakończenia animacji wejścia; warstwa może potem nadal być widoczna. Paski hover określają czas trwania animacji po najechaniu, a ich początek jest stały.

Zmiana pasków z klawiatury

Ustaw fokus na pasku lub jednym z jego uchwytów krawędzi, a potem użyj klawiszy strzałek, aby przesuwać go co 0,1 sekundy. Przytrzymaj Shift, aby przesuwać co 1 sekundę. Przesunięcie paska zachowuje jego czas trwania, a przesunięcie krawędzi zmienia jego początek lub koniec.

Naciśnij Escape podczas przeciągania, aby przywrócić czasy sprzed przeciągnięcia, także dla zaznaczonych warstw przesuwanych razem z paskiem. Paski scen przesuwają edytowalne animacje sceny razem, zachowując ich indywidualne czasy trwania.

Przyciąganie i porządkowanie osi czasu

Otwórz Timeline Settings → Timeline Tools i włącz Snap, aby przeciągane paski wejścia i wyjścia, paski scen i ich edytowalne krawędzie przyciągały się do głowicy odtwarzania, znaczników, granic obszaru roboczego i pobliskich krawędzi animacji. Przytrzymaj Alt (lub Option w macOS) podczas przeciągania, aby pominąć przyciąganie. Linia pomocnicza pokazuje wyrównanie. Przyciąganie zależy od bieżącego poziomu powiększenia, więc do drobniejszych zmian powiększ widok.

Na tej samej karcie możesz filtrować warstwy, aby pokazać All Layers, Selected Layers lub Animated Layers. Filtr zmienia tylko listę na osi czasu; ukryte wiersze nadal normalnie się odtwarzają i eksportują. W tym samym panelu ustawień Collapse Groups zwija listy warstw scen, a Expand Groups ponownie je rozwija. Zaznacz warstwy i kliknij Zoom To Selection, aby dopasować widok do ich aktywnych zakresów czasu, maksymalnie do limitu powiększenia 1000%.

Otwórz Timeline Settings → Timeline Tools, aby dodać nazwany znacznik w miejscu głowicy odtwarzania. Wpisz Marker Name i kliknij Add At Playhead. Kliknij romb znacznika na linijce albo jego czas w panelu, aby przejść do tego miejsca. W panelu możesz zmieniać nazwy znaczników i je usuwać. Znaczniki są zachowywane na czas bieżącej sesji edycji i nie wpływają na eksportowane animacje.

Zapisywanie i ponowne użycie sekwencji ruchu

Sekwencja ruchu przechowuje skoordynowane animacje wejścia, wyjścia i hover kilku warstw. Możesz ją zastosować do warstw o innych nazwach, przypisując je jawnie.

1. Otwórz Timeline Settings → Motion Sequences i wybierz Source Banner.
2. Opcjonalnie włącz Selected Source Layers Only, aby użyć tylko zaznaczonych warstw tego baneru.
3. Wpisz nazwę sekwencji i kliknij Save Sequence. Zapisane sekwencje są przechowywane w ustawieniach Bannerify; biblioteka mieści do 50 sekwencji. Zapisanie zaznacza nową sekwencję i odświeża sugerowane przypisania docelowe, więc przejrzyj je ponownie przed zastosowaniem.
4. Wybierz zapisaną sekwencję i zaznacz co najmniej jeden baner docelowy. Zapisana sekwencja dostarcza animacje zamiast baneru źródłowego; Selected Source Layers Only działa przy przechwytywaniu lub stosowaniu bezpośrednio ze źródła. Możesz też stosować animacje bezpośrednio z baneru źródłowego, bez wcześniejszego zapisywania.
5. Przejrzyj sugerowane przypisania warstw. Unikalne pasujące nazwy są uzupełniane automatycznie; przy powtarzających się lub niedopasowanych nazwach musisz wybrać warstwę docelową. Odznacz przypisanie lub wybierz Skip / Choose A Layer, aby pozostawić tę warstwę docelową bez zmian.
6. Opcjonalnie wpisz wartość Offset (Seconds), aby przesunąć czasy wejścia i wyjścia. Przesunięcie nie zmienia czasu trwania hover.
7. Panel przeglądu wyjaśnia, czego brakuje w źródle, celu lub przypisaniu warstw. Jeśli przypisane ścieżki już się zgadzają, nie ma nic do zastosowania. Przejrzyj czasy przed zmianą i po niej, a potem kliknij Apply Motion Sequence. Całe zastosowanie to jedna zmiana, którą można cofnąć. Użyj Undo, Redo lub panelu History, aby wrócić do innego kroku.

Zablokowane warstwy i warstwy, których nie da się wyrenderować, są pomijane. Ścieżki Figma Motion pozostają powiązane z oryginalnymi węzłami i nie są kopiowane ani nadpisywane. Animacje przeznaczone dla tekstu wymagają warstw tekstowych. Ścieżki, które wykraczałyby poza oś czasu, są pomijane i zgłaszane w podglądzie; Bannerify nie skraca ich po cichu. Istniejące nieaktywne ścieżki pozostają bez zmian, chyba że sekwencja wprost dostarcza animację dla danej ścieżki.

Aby usunąć zapisaną sekwencję, wybierz ją w Saved Sequence, a potem kliknij ikonę kosza. Usunięcie pozycji z biblioteki nie usuwa animacji, które już zastosowano do banerów.

Sekwencje korzystają z definicji animacji dostępnych już w Bannerify, w tym z Twojej biblioteki własnych animacji. Brakujące własne animacje i niezgodne ścieżki są zgłaszane i pomijane. Animacje Draw wymagają warstwy SVG, a Split Text – odpowiedniej warstwy tekstowej, tak jak w selektorze animacji. Synchronizacja samych czasów zachowuje animację docelową i nie podlega tym ograniczeniom animacji źródłowych. Sekwencje nie zawierają grafik ani definicji własnych animacji, więc nie da się ich przenieść do instalacji innego użytkownika.

Synchronizacja czasów między rozmiarami banerów

Użyj Timeline Settings → Sync Timings, aby skopiować zakresy czasu z baneru źródłowego do odpowiadających warstw w innych wczytanych banerach.

1. Wybierz baner źródłowy i opcjonalnie ogranicz go do zaznaczonych warstw źródłowych.
2. Zaznacz banery docelowe i przejrzyj przypisania każdej warstwy.
3. Odznacz przypisania, które mają zachować obecne czasy. Przy niejednoznacznych lub niedopasowanych nazwach warstw wybierz cel ręcznie.
4. Przejrzyj zakresy czasu przed zmianą i po niej, a potem kliknij Apply Timing Sync.

Synchronizacja czasów zachowuje wybrane animacje, ustawienia pętli i inne ustawienia warstw w banerach docelowych. Nieaktywne ścieżki docelowe, zablokowane warstwy i ścieżki Figma Motion są pomijane. Każde zastosowanie to jedna zmiana, którą można cofnąć w panelu History. To jednorazowe kopiowanie: późniejsze zmiany w źródle nie zmieniają automatycznie banerów docelowych. Zastosuj synchronizację ponownie, gdy zechcesz przenieść kolejną zmianę.