Ścieżki animacji umożliwiają animowanie obiektów poruszających się wzdłuż linii krzywych oraz takich, które mają skomplikowane kształty. Podobnie jak w przypadku linii rysowanych narzędziem Pióro, możesz zdefiniować ścieżki animacji, określając punkty zakotwiczenia łączone później liniami prostymi bądź krzywymi.
W CSS animacja na ścieżce jest odzwierciedlana w przybliżeniu, więc elementy animowane mogą nie poruszać się dokładnie wzdłuż swoich ścieżek. Zazwyczaj różnica jest niezauważalna (domyślnie nie powinna przekraczać jednego piksela). Stopień odchylenia możesz ograniczyć we właściwościach ścieżek animacji.
Informacje o ścieżkach animacji
Na tej stronie:
Wyświetlanie ścieżek animacji
Wybierz jeden element lub grupę, by zobaczyć linie pokazujące ich tor ruchu podczas animacji, razem z punktami zakotwiczenia.
Punkty zakotwiczenia
Punkty zakotwiczenia można ustawić na dwa sposoby:
- Miniatury lub klatki kluczowe, które określają nowe współrzędne x lub y elementu, automatycznie generują punkty zakotwiczenia. Początkowe i końcowe punkty zakotwiczenia znajdują się zawsze w klatkach kluczowych.
- Możesz dodać punkty zakotwiczenia na ścieżce animacji za pomocą narzędzia Ścieżka animacji.
Uchwyty sterowania
Uchwyty sterowania pojawiają się po wybraniu narzędzia Ścieżka animacji . Każdy segment pomiędzy punktami zakotwiczenia ma dwa uchwyty sterowania – po jednym przy każdym punkcie zakotwiczenia. Długość i kierunek uchwytu sterującego wskazują krzywiznę ścieżki animacji. W przypadku linii prostych uchwyty sterujące przylegają do segmentu lub są zwinięte.
Edytowanie ścieżek animacji
Edytowanie kształtu ścieżki animacji
Ścieżki animacji mogą mieć postać zwykłych krzywych, zamkniętych kształtów takich jak wielokąty i okręgi lub dokładnych konturów innych obiektów. Aby zmienić kształt ścieżki animacji:
Dodaj punkt zakotwiczenia
- Dodaj miniaturę lub klatkę kluczową, która zmienia pozycję elementu. W ten sposób dodasz punkt zakotwiczenia, w którym możesz zmienić wygładzanie.
- Za pomocą opcji Dodaj punkt zakotwiczenia
narzędzia Ścieżka animacji
możesz kliknąć dowolne miejsce na ścieżce animacji, aby dodać punkt zakotwiczenia i określić w ten sposób kształt ścieżki. Dodanie punktu zakotwiczenia za pomocą tej metody nie powoduje dodania miniatury ani klatki kluczowej.
Dostosuj krzywiznę
- Po wybraniu Narzędzia do zaznaczania lub opcji domyślnej
narzędzia Ścieżka animacji
- Po wybraniu narzędzia Ścieżka animacji
- Kliknij dwukrotnie punkt zakotwiczenia, aby zwinąć dołączone uchwyty sterowania. Ponowne dwukrotne kliknięcie powoduje rozwinięcie uchwytów sterowania.
Aby wyprostować ścieżkę animacji, kliknij dwukrotnie oba punkty zakotwiczenia.
Usuń punkt zakotwiczenia
- Za pomocą opcji Usuń punkt zakotwiczenia
narzędzia Ścieżka animacji
- Usunięcie miniatury lub klatki kluczowej usuwa segment ścieżki animacji, który kończy się na tej miniaturze lub klatce kluczowej.
Przekształcanie ścieżek animacji
Aby przenieść ścieżki animacji, zmienić ich rozmiar lub orientację i je odwrócić, wybierz narzędzie Ścieżka animacji , a potem zaznacz pole Sterowanie przekształceniem na pasku opcji narzędzi. Gdy masz te kroki za sobą, opcje sterowania przekształceniem pojawiają się po wybraniu elementu ze ścieżką animacji.
Przenieś ścieżkę animacji
Przeciągnij ścieżkę animacji w nowe miejsce na scenie.
Zmień rozmiar ścieżki animacji
- Okno zmiany rozmiaru ma postać niebieskiego obramowania wokół ścieżki animacji z uchwytami na jej rogach i bokach. Aby zmienić rozmiar ścieżki animacji, przeciągnij uchwyt.
- Przytrzymaj wciśnięty klawisz Shift podczas przeciągania, by zachować pierwotny współczynnik proporcji.
- Przytrzymaj wciśnięty klawisz Alt podczas przeciągania, by ścieżka animacji pozostała wyśrodkowana w tym samym miejscu.
- Aby zmienić rozmiar ścieżki animacji w innym kierunku, obróć okno zmiany rozmiaru, wpisując kąt obrotu w polu
na pasku opcji narzędzi. Możesz też przytrzymać klawisz Alt (w Windows) lub Option (na Macu) i naciskać klawisz strzałki w lewo lub prawo, aby obracać okno zmiany rozmiaru o 5°. Pole zawsze resetuje się do 0°, dlatego wpisz wybraną wartość obrotu z uwzględnieniem bieżącej orientacji. Obracanie okna zmiany rozmiaru nie powoduje obracania ścieżki animacji.
- Aby zresetować orientację okna zmiany rozmiaru, kliknij dwukrotnie wewnętrzny element sterowania obrotem (mniejszy pierścień). Powoduje to również zresetowanie lokalizacji osi obrotu.
na pasku opcji narzędzi. Możesz też przytrzymać klawisz Alt (w Windows) lub Option (na Macu) i naciskać klawisz strzałki w lewo lub prawo, aby obracać okno zmiany rozmiaru o 5°. Pole zawsze resetuje się do 0°, dlatego wpisz wybraną wartość obrotu z uwzględnieniem bieżącej orientacji. Obracanie okna zmiany rozmiaru nie powoduje obracania ścieżki animacji.Odwróć ścieżkę animacji
- Przeciągnij uchwyt zmiany rozmiaru na uchwyt zmiany rozmiaru po przeciwnej stronie.
Obróć ścieżkę animacji
- Aby obrócić ścieżkę animacji, przeciągnij zewnętrzny element sterujący (większy pierścień) w kierunku zgodnym z ruchem wskazówek zegara lub przeciwnym.
- Przytrzymaj wciśnięty klawisz Shift podczas przeciągania, by obracać co 45°.
- Aby przenieść oś obrotu, przeciągnij wewnętrzny element sterowania obrotem (mniejszy pierścień) na inne miejsce. Lokalizację osi obrotu możesz zresetować, klikając dwukrotnie wewnętrzny element sterowania obrotem (powoduje to również zresetowanie orientacji okna zmiany rozmiaru).
Edytowanie szybkości animacji
Możesz kontrolować szybkość obiektu poruszającego się po ścieżce animacji, zmieniając czas miniatur lub klatek kluczowych i wygładzając je. Możesz też zapętlić animację na ścieżce.
Optymalizacja
Za każdym razem, gdy tworzysz lub edytujesz ścieżkę animacji, Google Web Designer automatycznie optymalizuje animację, zmniejszając liczbę stylów CSS używanych do jej renderowania. Zachowuje przy tym tolerancje określone przez Ciebie we właściwościach ścieżki animacji. Im niższe wartości tolerancji, tym dokładniej animacja będzie się trzymać ścieżki. Jednak możliwości optymalizacji zostaną wtedy ograniczone.
Aby osiągnąć dodatkową kompresję, kliknij Optymalizuj krzywą we właściwościach ścieżki animacji. Ten proces może trwać dłużej niż optymalizacja automatyczna.
W panelu Właściwości Google Web Designer wyświetla szacunkowy rozmiar ścieżki animacji wybranego elementu, określając ilość miejsca, które ścieżka animacji zajmie na dysku po opublikowaniu dokumentu.
Właściwości ścieżki animacji
Właściwości ścieżki animacji pojawiają się w panelu Właściwości po dodaniu punktu zakotwiczenia za pomocą narzędzia Ścieżka animacji lub zmianie kształtu ścieżki animacji na krzywą.
| Właściwość | Opis |
|---|---|
| Kieruj do ścieżki | Po włączeniu tej opcji element obraca się podczas animacji zgodnie z kierunkiem ścieżki animacji (np. element przesuwający się po ścieżce animacji wzdłuż opadającej krzywej przechyla się w dół). Dokładność obrotu możesz określić, korzystając z właściwości Tolerancja kąta. |
| Tolerancja pozycji | Określa stopień odchylenia elementu od ścieżki animacji.
|
| Tolerancja kąta | Określa stopień odchylenia orientacji elementu od orientacji ścieżki animacji. Dostępna tylko po włączeniu opcji Kieruj do ścieżki.
|
| Optymalizuj krzywą | Kliknij przycisk |
| Szacunkowy rozmiar | Wyświetla szacunkowy rozmiar ścieżki animacji. Aby osiągnąć dodatkową kompresję, użyj przycisku Optymalizuj krzywą. |
Ograniczenia
- Określanie pozycji względem górnej i lewej krawędzi – ścieżki animacji nie obsługują określania pozycji względem górnej i lewej krawędzi. W zamian użyj właściwości
transformCSS (jest to wartość domyślna). - Animacja 3D – Google Web Designer nie obsługuje ścieżek animacji 3D. Możesz zastosować przesunięcia 3D osobno do elementu.
- Panel CSS – panel CSS nie wpływa na ścieżki animacji, ale style nadal są stosowane do samego elementu.
- Widok kodu – nie możesz wyświetlać ani edytować ścieżek animacji w widoku kodu.
- Reklamy graficzne – narzędzie Ścieżka animacji jest niedostępne w przypadku reklam graficznych.