Animacje: sprawdzanie i modyfikowanie efektów animacji CSS

Kayce Basques

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.

Ważne: możesz edytować czasy wygładzania przejść i animacji CSS oraz konfigurować niestandardowe krzywe Beziera za pomocą edytora wygładzania w panelu Elementy > Style.

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

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

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.

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

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. Pokazuje zarejestrowane grupy animacji 2 typów oznaczonych ikonami: przewijane myszką i zaplanowane zwykłe (na podstawie czasu).

   Wybierz tutaj grupę animacji, którą chcesz sprawdzić i zmodyfikować w panelu Szczegóły.

3. Oś czasu. W zależności od typu grupy animacji oś czasu może wyglądać tak:

   • W pikselach w przypadku animacji myszy przewijanych.
   • W milisekundach na potrzeby zaplanowania animacji opartych na czasie.

   Na osi czasu możesz ponownie odtworzyć animację, ponownie ją odtworzyć, przewinąć lub przeskoczyć do określonego miejsca.

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 . Animacja jest ponownie odtwarzana w widocznym obszarze.

Aby zmienić szybkość podglądu wybranej grupy animacji, kliknij przyciski Szybkość 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ą.

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

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.

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.

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.

Modyfikowanie animacji

Istnieją trzy sposoby modyfikowania animacji na karcie Animacje:

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

Ważne: wszelkie zmiany wprowadzone na karcie Animacje powodują zastosowanie stylów wbudowanych do odpowiednich elementów, dzięki czemu możesz od razu zobaczyć i ponownie odtworzyć gotowe animacje.

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

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

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.

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

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

   

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.