Анимации: проверка и изменение эффектов анимации CSS.

Kayce Basques

Sofia Emelianova

Просматривайте и изменяйте анимацию с помощью вкладки «Анимация» Chrome DevTools.

Обзор

Чтобы записать анимацию, откройте вкладку «Анимация» . Он автоматически обнаруживает анимацию и сортирует ее по группам.

Вкладка «Анимация» имеет две основные цели:

• Проверьте анимацию . Замедлите воспроизведение, воспроизведите или проверьте исходный код группы анимации.
• Изменить анимацию . Измените время, задержку, продолжительность или смещение ключевых кадров группы анимации. Редактирование ключевых кадров и кривой Безье не поддерживается.

Вкладка «Анимации» поддерживает CSS-анимацию, CSS-переходы, веб-анимацию и View Transitions API . Анимации requestAnimationFrame пока не поддерживаются.

Что такое анимационная группа?

Группа анимации — это набор анимаций, которые кажутся связанными друг с другом.

На данный момент в сети нет реальной концепции групповой анимации, поэтому дизайнеры и разработчики анимации составляют и синхронизируют отдельные анимации так, чтобы они выглядели как один связный визуальный эффект. Вкладка «Анимации» прогнозирует связанные анимации на основе времени начала (исключая задержки) и группирует их рядом.

Другими словами, на вкладке «Анимации» группируются анимации, запускаемые в одном и том же блоке сценария, но если они асинхронны, они попадают в разные группы.

Начать

Открыть вкладку «Анимации» можно двумя способами:

• Выбирать Настраивайте и управляйте DevTools > Дополнительные инструменты > Анимации .

• Откройте командное меню, нажав одну из следующих клавиш:

  • В macOS: Command + Shift + P.
  • В Windows, Linux или ChromeOS: Control + Shift + P.

  Затем начните вводить « Show Animations и выберите соответствующую панель «Ящик».

По умолчанию вкладка «Анимация» открывается как вкладка рядом с ящиком консоли . В качестве вкладки ящика вы можете использовать ее с любой панелью или переместить в верхнюю часть DevTools .

Вкладка «Анимация» состоит из четырех основных разделов:

1. Элементы управления . Отсюда вы можете заблокировать «Очистить все захваченные группы анимации», приостановить паузу или возобновить анимацию play_arrow или изменить скорость выбранной группы анимации.

2. Обзор . Показывает захваченные группы анимаций двух типов, отмеченных значками: с прокруткой мыши и по расписанию (по времени).

   Выберите здесь группу анимации, чтобы просмотреть и изменить ее на панели «Сведения» .

3. График . В зависимости от типа группы анимации временная шкала может быть:

   • В пикселях для анимации, управляемой прокруткой мыши .
   • В миллисекундах для расписания анимации, основанной на времени.

   На временной шкале вы можете воспроизвести воспроизведение анимации, прокрутить ее или перейти к определенной точке.

4. Подробности . Проверьте и измените выбранную группу анимации.

Чтобы записать анимацию, запустите ее, пока открыта вкладка «Анимация» . Если анимация запускается при загрузке страницы, перезагрузите ее.

Проверка анимации

После того как вы записали анимацию, есть несколько способов воспроизвести ее:

• Наведите указатель мыши на его миниатюру на панели «Обзор» , чтобы просмотреть его.
• Перетащите указатель воспроизведения (красная вертикальная полоса), чтобы прокрутить анимацию области просмотра, или щелкните в любом месте временной шкалы , чтобы установить указатель воспроизведения на определенную точку. Анимация продолжает воспроизводиться, если она уже воспроизводилась, и останавливается в противном случае.
• Выберите группу анимации на панели «Обзор» (чтобы она отображалась на панели «Сведения» ) и нажмите кнопку Кнопка повтора . Анимация воспроизводится в окне просмотра.

Нажмите кнопку Кнопки скорости анимации на панели управления позволяют изменить скорость предварительного просмотра выбранной группы анимации.

Посмотреть подробности анимации

После захвата группы анимации щелкните ее на панели «Обзор» , чтобы просмотреть ее сведения.

На панели «Сведения» каждая отдельная анимация получает собственную строку. Чтобы увидеть полное имя соответствующего элемента, измените размер столбца имени.

Наведите указатель мыши на анимацию, чтобы выделить ее в области просмотра. Щелкните анимацию, чтобы выбрать ее на панели «Элементы» .

Некоторые анимации повторяются бесконечно, если для их свойства animation-iteration-count установлено значение infinite . На вкладке «Анимации» отображаются их определения и итерации.

Крайняя левая и темная часть анимации — это ее определение. Правые, более бледные разделы представляют итерации.

Например, на следующем снимке экрана второй и третий разделы представляют собой итерации первого раздела.

Если к двум элементам применена одинаковая анимация, на вкладке «Анимации» им назначается один и тот же цвет. Сам цвет случайен и не имеет никакого значения. Например, на снимке экрана ниже к двум элементам div.eye.left::after и div.eye.right::after применена одна и та же анимация ( eyes ), как и к элементам div.feet::before и div.feet::after элементов.

Изменить анимацию

Изменить анимацию на вкладке «Анимации» можно тремя способами:

• Продолжительность анимации.
• Тайминги ключевых кадров.
• Задержка времени запуска.

В этом разделе предположим, что следующий снимок экрана представляет собой исходную анимацию:

Чтобы изменить продолжительность анимации, перетащите первый или последний круг.

Если анимация определяет какие-либо правила ключевых кадров, то они представлены в виде белых внутренних кругов. Перетащите один из них, чтобы изменить время ключевого кадра.

Чтобы добавить задержку к анимации, щелкните саму анимацию, а не круги, а затем перетащите ее в любое место.

Отредактируйте псевдоэлементы ::view-transition во время анимации.

С помощью View Transitions API вы можете изменить DOM за один шаг, создавая при этом анимированный переход между двумя состояниями. Во время анимации API создает дерево псевдоэлементов следующей структуры:

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

Чтобы отредактировать эту структуру в разделе «Элементы» > «Стили» :

1. Откройте DevTools и проверьте страницу, на которой использовался API View Transitions. Например, эта демо-страница .
2. В разделе «Анимация» нажмите «Пауза» .

3. На странице вызовите анимацию. Панель «Анимация» захватывает его и сразу же приостанавливает. Теперь вы можете найти структуру ::view-transition в DOM поверх элемента <head> .

   

4. В разделе «Элементы» > «Стили» измените CSS псевдоэлементов ::view-transition .

5. Возобновите анимацию и воспроизведите ее, чтобы увидеть результат.

Дополнительные сведения см. в разделе Плавные и простые переходы с помощью API View Transitions .