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.
Wybór animacji
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ę.
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
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.
Do dokładniejszej edycji użyj przyciągania, filtrów warstw, znaczników i sekwencji ruchu wielokrotnego użytku albo zapętl obszar roboczy, gdy dopracowujesz przejście.
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 i dodawanie nazwanych znaczników |
| Motion Sequences | Zapisywanie i ponowne użycie skoordynowanych animacji |
| Sync Timings | Kopiowanie czasów między rozmiarami banerów |
Snap, filtr warstw, Zoom To Selection i przyciski zwijania grup znajdziesz w Timeline Settings → Timeline Tools.
Przeglądanie i przywracanie zmian
Kliknij History obok strzałek cofania i ponawiania, aby przeglądać zmiany na osi czasu. 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
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.
Dodawanie animacji wyjścia
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.
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
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.
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
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
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.
Wklejanie skopiowanej animacji do wielu warstw Skopiowaną animację możesz też zastosować masowo do wielu warstw za pomocą funkcji masowego stosowania.
Masowe stosowanie animacji
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
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.
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
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
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
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.