Animacje: sprawdzanie i modyfikowanie efektów animacji CSS

Sofia Emelianova
Sofia Emelianova

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

Przegląd

Aby rejestrować animacje, otwórz kartę Animacje. Automatycznie wykrywa animacje i sortuje je w grupy.

Karta Animacje ma dwa główne zadania:

  • Sprawdź animacje. Spowalniaj, odtwarzaj ponownie lub sprawdzaj kod źródłowy grupy animacji.
  • Zmodyfikuj animacje. Zmień czas, opóźnienie, czas trwania lub przesunięcie klatki kluczowej w grupie animacji. Edytowanie klatek kluczowych i beziera nie jest obsługiwane.

Karta Animacje obsługuje animacje CSS, przejścia CSS i animacje internetowe oraz View Transitions API. Animacje w języku: requestAnimationFrame nie są jeszcze obsługiwane.

Co to jest grupa animacji?

Grupa animacji to zbiór animacji, które pojawiają się jako powiązane ze sobą animacje.

Obecnie w internecie nie ma prawdziwego pojęcia animacji grupowej, więc projektanci ruchu i programiści komponują i synchronizują poszczególne animacje w taki sposób, aby wyglądały na jeden spójny efekt wizualny. Karta Animacje przewiduje powiązane animacje na podstawie czasu rozpoczęcia (bez opóźnień) i grupuje je obok siebie.

Inaczej mówiąc, na karcie Animacje animacje uruchamiane w jednym bloku skryptu, ale jeśli są asynchroniczne, trafiają do różnych grup.

Rozpocznij

Kartę Animacje możesz otworzyć na 2 sposoby:

  • Wybierz Więcej. Dostosuj Narzędzia deweloperskie i steruj nimi > 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 i ChromeOS: Control+Shift+P

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

Domyślnie karta Animacje otwiera się jako karta obok szuflady Konsola. Jako karty panelu możesz używać jej w dowolnym panelu lub przenieść na górę Narzędzi dla deweloperów.

Pusta karta Animacje.

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

Sekcje panelu Animacje.

  1. Elementy sterujące. Możesz na niej zablokować wyczyścić przechwycone grupy animacji, wstrzymać ich wstrzymywanie lub odtwarzać Wznów animacje oraz zmieniać szybkość wybranej grupy animacji.
  2. Omówienie. Wybierz tutaj grupę animacji, którą chcesz sprawdzić i zmodyfikować w panelu Szczegóły.
  3. Oś czasuodtwórz ponownie animację, przewiń ją lub przeskocz do konkretnego punktu.
  4. Szczegóły. Sprawdź i zmodyfikuj wybraną grupę animacji.

Aby przechwycić animację, uruchom ją, gdy otwarta jest karta Animacje. Jeśli animacja zostanie uruchomiona podczas wczytywania strony, załaduj ją ponownie.

Sprawdź animacje

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

  • Najedź kursorem na miniaturę filmu w panelu Przegląd, aby wyświetlić podgląd.
  • Przeciągnij suwak odtwarzania (czerwony pionowy pasek), aby przewijać animację widocznego obszaru, lub kliknij dowolne miejsce na osi czasu, aby ustawić go w określonym punkcie. Animacja jest odtwarzana dalej, jeśli była już odtwarzana, lub zatrzymuje się w innym przypadku.
  • Wybierz grupę animacji w panelu Przegląd (aby wyświetliła się w panelu Szczegóły) i naciśnij przycisk Odtwórz ponownie Przycisk ponownego odtwarzania.. Animacja jest ponownie odtwarzana w widocznym obszarze.

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

Wyświetl szczegóły animacji

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

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

Okienko Szczegóły.

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

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

Niektóre animacje są powtarzane bez końca, jeśli ich właściwość animation-iteration-count jest ustawiona na infinite. Na karcie Animacje widoczne są ich definicje i iteracje.

iteracje animacji.

Najciemniejsza sekcja animacji to jej definicja. Bardziej wyblakłe sekcje po prawej stronie przedstawiają iteracje.

Na przykład na następnym zrzucie ekranu sekcje 2 i 3 przedstawiają zmiany z pierwszej sekcji.

Schemat iteracji animacji.

Jeśli 2 elementy mają przypisaną tę samą animację, na karcie Animacje jest on przypisany do nich w tym samym kolorze. Sam kolor jest losowy i nie ma znaczenia. Na przykład na zrzucie ekranu poniżej 2 elementów div.eye.left::after i div.eye.right::after mają taką samą animację (eyes) jak elementy div.feet::before i div.feet::after.

Kolorowe animacje.

Modyfikowanie animacji

Istnieją trzy sposoby modyfikowania animacji na karcie Animacje:

  • Czas trwania animacji.
  • Czasy klatek kluczowych.
  • Opóźnienie 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 w animacji są zdefiniowane jakieś reguły klatek kluczowych, są one przedstawiane jako białe wewnętrzne okręgi. Przeciągnij jeden z nich, by zmienić czas wyświetlania klatki kluczowej.

Zmodyfikowana klatka kluczowa.

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

Zmodyfikowane opóźnienie.

Edytowanie pseudoelementów ::view-transition podczas animacji

Korzystając z interfejsu View Transitions API, można zmienić DOM w jednym kroku i utworzyć animowane przejście między dwoma stanami. Podczas animacji interfejs API tworzy pseudoelementowe drzewo 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ę, kliknij Elementy > Style:

  1. Otwórz Narzędzia deweloperskie i sprawdź stronę, na której został użyty interfejs View Transitions API. Na przykład ta strona demonstracyjna.
  2. W sekcji Animacje kliknij Wstrzymaj Wstrzymaj.
  3. Uruchom animację na stronie. Panel Animacje przechwytuje film i natychmiast zostaje wstrzymany. Struktura ::view-transition znajduje się teraz w modelu DOM nad elementem <head>.

    Edytowanie kodu CSS pseudoelementu ::view-transition.

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

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

Więcej informacji znajdziesz w artykule Płynne i proste przechodzenie dzięki interfejsowi View Transitions API.