Animacje: sprawdzanie i modyfikowanie efektów animacji CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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 w grupy.

Panel Animacje ma 2 główne przeznaczenie:

  • Sprawdź animacje. Spowalnianie, ponowne odtwarzanie lub sprawdzanie kodu źródłowego animacji grupy reklam.
  • Modyfikuj animacje Modyfikowanie czasu, opóźnienia, czasu trwania i przesunięcia klatek kluczowych w elemencie w grupie animacji. Edycja klatek kluczowych i beziera nie jest obsługiwana.
.

Panel Animacje obsługuje animacje CSS, przejścia CSS, animacje internetowe i interfejs View przejśćs 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ą.

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 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 dwa sposoby:

  • Wybierz Więcej. Dostosuj i kontroluj Narzędzia deweloperskie > Więcej narzędzi > Animacje. Animacje w menu.

  • 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. Pokaż animacje.

Domyślnie panel Animacje otwiera się jako karta obok panelu Konsola. Jako karty panelu możesz używać jej z dowolnym panelem lub przenieść ją na górę narzędzi deweloperskich.

Pusty panel animacji.

Po otwarciu panelu Animacje automatycznie przechwytują się trwające animacje. Jeśli animacja zostanie uruchomiona przy ładowaniu strony lub już się zatrzymała, załaduj ponownie stronę z otwartym panelem.

Poznaj interfejs panelu Animacje

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

Sekcje panelu Animacje.

  1. Opcje. Tutaj możesz blokować Usuń wszystkie przechwycone grupy animacji, wstrzymać animacje i wstrzymać je lub odtworzyć wznowienie oraz zmienić szybkość 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 oś czasu może mieć:

    • W pikselach na potrzeby animacji przewijanych przez mysz.
    • W milisekundach dla planowania animacji na podstawie czasu.

    Na osi czasu możesz ponownie odtworzyć animację, przewijać 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), by przejrzeć animację widocznego obszaru, lub kliknij dowolne miejsce na osi czasu, by ustawić suwak w konkretnym 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 Przycisk ponownego odtwarzania. Odtwórz ponownie. jest ponownie odtwarzana w widocznym obszarze.

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

Wyświetl szczegóły animacji

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

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

Okienko Szczegóły.

Najedź kursorem na animację, by wyróżnić ją w widocznym obszarze. Kliknij animację, aby wybrać ją w Panel Elements.

Najechanie kursorem na animację, aby wyróżnić ją w widocznym obszarze.

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.

Iteracje animacji.

Pierwsza i najciemniejsza część animacji to jej definicja. Bardziej wyblakłe sekcje po prawej reprezentować iteracje.

Na przykład na następnym zrzucie ekranu sekcje 2 i 3 przedstawiają powtórzeń sekcji pierwszej.

Diagram iteracji animacji.

Jeśli do dwóch elementów zastosowano tę samą animację, panel Animacje przypisze do nich parametr tego samego koloru. Sam kolor jest losowy i nie ma znaczenia. Na przykład na zrzucie ekranu poniżej 2 elementy div.eye.left::after i div.eye.right::after mają tę samą animację (eyes). oraz do elementów div.feet::before i div.feet::after.

Kolorowe animacje.

Modyfikuj animacje

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

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

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

Oryginalna animacja przed modyfikacją.

Aby zmienić czas trwania animacji, przeciągnij pierwszy lub ostatni okrąg.

Zmodyfikowany czas trwania.

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

Zmodyfikowana klatka kluczowa.

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

Zmodyfikowane opóźnienie.

Edytuj @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 działań.
  2. W sekcji Elements sprawdź element za pomocą wskaźnika class="pulser", a następnie w sekcji Elements 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

Interfejs View Migrates API pozwala zmienić DOM w jednym kroku, jednocześnie 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 Elements > 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. Struktura ::view-transition znajdziesz teraz w modelu DOM, nad elementem <head>.

    Edytowanie kodu CSS pseudoelementu przejścia ::view-transition.

  4. W sekcji Elements > 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.