Animacje: sprawdzanie i modyfikowanie efektów animacji CSS

Kayce Basques

Sofia Emelianova

Sprawdzaj i modyfikuj animacje na karcie Animacje w drawerze Narzędzi deweloperskich w Chrome.

Omówienie

Aby przechwycić animacje, otwórz panel Animacje. Automatycznie wykrywa animacje i sortuje je w grupy.

Panel Animacje ma 2 główne przeznaczenie:

• Sprawdź animacje. Możesz zwolnić animację, odtworzyć ją lub sprawdzić kod źródłowy grupy animacji.
• Modyfikuj animacje. Zmień czas wyświetlania, opóźnienie, czas trwania lub przesunięcie klatek kluczowych grupy animacji. Edycja klatek kluczowych i beziera nie jest obsługiwana.

Panel Animacje obsługuje animacje CSS, przejścia CSS, animacje internetowe i interfejs View Transitions API. Animacje requestAnimationFrame nie są jeszcze obsługiwane.

Co to jest grupa animacji?

Grupa animacji to zestaw animacji, które wyglądają na powiązane ze sobą.

Na razie w internecie nie ma prawdziwej koncepcji animacji grupowej, więc projektanci animacji i programiści tworzą i określają czas poszczególnych animacji, aby stały się one spójne. Panel Animacje prognozuje powiązane animacje na podstawie czasu rozpoczęcia (bez opóźnień) i grupuje je obok siebie.

Inaczej mówiąc, panel Animacje grupuje animacje wywoływane w tym samym bloku skryptu, ale jeśli są asynchroniczne, trafiają do różnych grup.

Otwórz panel Animacje

Panel Animacje możesz otworzyć na dwa sposoby:

• Kliknij  Dostosowywanie i sterowanie DevTools > Więcej narzędzi > Animacje.

• Otwórz menu poleceń, naciskając jedną z tych opcji:

  • W systemie macOS: Command + Shift + P.
  • W systemach Windows, Linux lub ChromeOS: Control+Shift+P

  Następnie zacznij wpisywać Show Animations i wybierz odpowiedni panel panelu.

Domyślnie panel Animacje otwiera się jako karta obok szuflady Konsola. Jako kartę w szufladzie możesz używać go z dowolnym panelem lub przenieść go na górę Narzędzi deweloperskich.

Gdy otworzysz panel Animacje, automatycznie zostaną zarejestrowane trwające animacje. Jeśli animacja jest wywoływana podczas wczytywania strony lub została już zatrzymana, ponownie załaduj stronę z otwartym panelem.

Zapoznaj się z interfejsem panelu Animacje

Panel Animacje składa się z 4 głównych sekcji:

1. Opcje. Tutaj możesz zablokować Wyczyść wszystkie zarejestrowane grupy animacji, wstrzymać Wstrzymaj lub play_arrow Wznów animacje albo zmienić prędkość wybranej grupy animacji.

2. Omówienie. Pokazuje grupy animacji 2 typów oznaczonych ikonami: z przewijaniem myszką i z harmonogramem (na podstawie czasu).

   Tutaj wybierz grupę animacji, aby ją sprawdzić i zmodyfikować w panelu Szczegóły.

3. Oś czasu. W zależności od typu grupy animacji osi czasu może być:

   • W pikselach na potrzeby animacji przewijanych przez mysz.
   • W milisekundach w przypadku harmonogramu animacji na osi czasu.

   Na osi czasu możesz odtwarzać od nowa animację, przesuwać ją lub przejść do konkretnego miejsca.

4. Szczegóły. Sprawdź i zmodyfikuj wybraną grupę animacji.

Aby nagrać animację, uruchom ją, gdy panel Animacje jest otwarty.

Sprawdzanie animacji

Po zrobieniu animacji możesz ją odtworzyć na kilka sposobów:

• Najedź kursorem na miniaturę w panelu Przegląd, aby wyświetlić jej podgląd.
• Przeciągnij suwak odtwarzania (czerwony pionowy pasek), by przejrzeć animację widocznego obszaru, lub kliknij dowolne miejsce na osi czasu, by ustawić suwak w konkretnym punkcie. Jeśli animacja była już odtwarzana, będzie kontynuowana, w przeciwnym razie zostanie zatrzymana.
• Wybierz grupę animacji w panelu Przegląd (aby była wyświetlana w panelu Szczegóły) i naciśnij przycisk Powtórz. Animacja jest odtwarzana w widocznym obszarze.

Aby zmienić szybkość podglądu wybranej grupy animacji, kliknij przyciski  Prędkość animacji na pasku Elementy sterujące.

Wyświetlanie szczegółów animacji

Po utworzeniu grupy animacji kliknij ją w panelu Przegląd, aby wyświetlić jej szczegóły.

W panelu Szczegóły każda animacja ma swój własny wiersz. Aby zobaczyć pełną nazwę odpowiedniego elementu, zmień rozmiar kolumny nazwy.

Najedź kursorem na animację, aby ją wyróżnić w widoku. Kliknij animację, aby ją wybrać w panelu Elementy.

Niektóre animacje powtarzają się w nieskończoność, jeśli ich właściwość animation-iteration-count ma wartość infinite. Panel Animacje zawiera ich definicje i iteracja.

Pierwsza i najciemniejsza część animacji to jej definicja. Prawe, bardziej rozmyte sekcje przedstawiają iteracje.

Na przykład na kolejnym zrzucie ekranu sekcje 2 i 3 stanowią iteracje sekcji 1.

Jeśli do 2 elementów zastosowano tę samą animację, panel Animacje przypisze im ten sam kolor. Kolor jest losowy i nie ma znaczenia. Na przykład na zrzucie ekranu poniżej widać 2 elementy (div.eye.left::after i div.eye.right::after) z taką samą animacją (eyes), jak elementy div.feet::before i div.feet::after.

Modyfikuj animacje

Animację możesz zmodyfikować na 3 sposoby w panelu Animacje:

• Czas trwania animacji.
• Czasy klatek kluczowych.
• Opóźnienie rozpoczęcia.

W tej sekcji załóżmy, że następny zrzut ekranu przedstawia oryginalną animację:

Aby zmienić czas trwania animacji, przeciągnij pierwsze lub ostatnie kółko.

Jeśli animacja zdefiniuje reguły dotyczące klatek kluczowych, są one reprezentowane jako białe okręgi wewnętrzne. Przeciągnij jeden z nich, aby zmienić czas animacji klatki kluczowej.

Aby dodać opóźnienie do animacji, kliknij samą animację (a nie kółka), a następnie przeciągnij ją w dowolne miejsce.

Edytuj @keyframes na żywo

Gdy zmienisz @keyframes w Stylów, efekty będą od razu widoczne w panelu Animacje.

Wypróbuj to na stronie demonstracyjnej:

1. Otwórz panel Animacje. Automatycznie rejestruje bieżącą animację pulsu na stronie. Wybierz animację w sekcji Sterowanie na pasku akcji.
2. W sekcji Elementy sprawdź element o wartości class="pulser", a w sekcji Style odszukaj sekcję @keyframes pulse.
3. Spróbuj zmienić klatki kluczowe, np. zmień drugą klatkę kluczową z 50% na 20%.
4. Obserwuj, jak zmiany wprowadzone w sekcji Style wpływają na animację przechwyconą w panelu Animacje.

Edytowanie pseudoelementów ::view-transition podczas animacji

Za pomocą interfejsu View Migrates API możesz zmienić DOM w jednym kroku, tworząc animowane przejście między dwoma stanami. Podczas animacji interfejs API tworzy drzewo pseudoelementów o następującej strukturze:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Aby edytować tę strukturę w sekcji Elementy > Style:

1. Otwórz Narzędzia deweloperskie i sprawdź stronę, która używa interfejsu View Transitions API. Może to być na przykład strona demonstracyjna.
2. W sekcji Animacje kliknij wstrzymaj Wstrzymaj.

3. Wywołaj na stronie animację. Panel Animacje przechwytuje obraz i od razu się zatrzymuje. Strukturę ::view-transition znajdziesz teraz w DOM na szczycie elementu <head>.

   

4. W sekcji Elementy > Style zmień kod CSS pseudoelementów ::view-transition.

5. Wznów animację i odtwórz ją, aby zobaczyć wynik.

Więcej informacji znajdziesz w artykule Płynne i proste przejścia dzięki interfejsowi View Migrates API.