Animacje: sprawdzanie i modyfikowanie efektów animacji CSS

Kayce Basques

Sofia Emelianova

Możesz sprawdzać i modyfikować animacje na karcie Animacje w Narzędziach deweloperskich w Chrome.

Omówienie

Aby przechwycić animacje, otwórz panel Animacje. Automatycznie wykrywa animacje i sortuje je według grup.

Panel Animacje ma 2 główne przeznaczenie:

• Sprawdź animacje. Spowalnianie, ponowne odtwarzanie lub sprawdzanie kodu źródłowego animacji grupy reklam.
• 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 zbiór animacji, które wyglądają jako powiązane ze sobą.

Obecnie w internecie nie ma prawdziwego pojęcia animacji grupowej, więc projektanci i programiści zajmujący się grafiką 2D tworzą i synchronizują poszczególne animacje, aby wyglądały jak jeden spójny efekt wizualny. 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 uruchamiane 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 2 sposoby:

• Wybierz Dostosuj i kontroluj Narzędzia deweloperskie > 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 zostanie uruchomiona przy wczytaniu strony lub już się zatrzymała, załaduj ponownie 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. Przegląd. Pokazuje grupy animacji 2 typów oznaczonych ikonami: z przewijaniem myszką i z harmonogramem (na podstawie czasu).

   Wybierz tutaj grupę animacji, aby ją sprawdzić i zmienić w panelu Szczegóły.

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

   • W pikselach w przypadku animacji sterowanych 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 przechwycić animację, uruchom ją, gdy otwarty jest panel Animacje.

Sprawdź animacje

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

• Najedź kursorem myszy na miniaturę w panelu Przegląd, aby wyświetlić podgląd.
• Przeciągnij suwak odtwarzania (czerwony pionowy pasek), aby przesuwać animację widoku, lub kliknij dowolne miejsce na osi czasu, aby ustawić suwak odtwarzania w określonym punkcie. Animacja jest nadal odtwarzana, jeśli była już odtwarzana. Jeśli tego nie zrobisz, animacja zostanie zatrzymana.
• Wybierz grupę animacji w panelu Przegląd (tak, aby była wyświetlana w sekcji Szczegóły panelu) i naciśnij przycisk Odtwórz ponownie. jest ponownie odtwarzana w widocznym obszarze.

Aby zmienić szybkość podglądu wybranej grupy animacji, kliknij przycisk Szybkość animacji na pasku Elementy sterujące.

Wyświetl szczegóły 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ę, by wyróżnić ją w widocznym obszarze. 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 2 elementy mają taką 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 modyfikować w panelu Animacje na 3 sposoby:

• 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ę (nie okręgi), a następnie przeciągnij ją w dowolne miejsce.

Edytowanie @keyframes na żywo

Gdy zmodyfikujesz element @keyframes w sekcji Style, efekty widać od razu w panelu Animacje.

Wypróbuj tę stronę demonstracyjną:

1. Otwórz panel Animacje. Automatycznie rejestruje aktualną animację pulsu na stronie. Wybierz animację w sekcji elementów sterujących na pasku czynności.
2. W sekcji Elementy sprawdź element za pomocą wskaźnika class="pulser", a następnie w sekcji Style znajdź sekcję @keyframes pulse.
3. Spróbuj zmodyfikować klatki kluczowe, na przykład 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

Dzięki interfejsowi View Transitions API możesz zmienić DOM w jednym kroku, tworząc jednocześnie animowane przejście między 2 stanami. Podczas animacji interfejs API tworzy drzewo pseudoelementów o tej 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ła interfejsu View przejść 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 > Styles (Style) – zmień kod CSS pseudoelementów typu ::view-transition.

5. Aby zobaczyć efekt, wznów animację i odtwórz ją ponownie.

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