Animations: проверка и изменение эффектов анимации CSS
Проверка и изменение анимации с помощью вкладки ящика Chrome DevTools Animations .
# Обзор
Для захвата анимации откройте вкладку Анимации . Он автоматически обнаруживает анимации и сортирует их по группам.
Вкладка Анимации имеет два основных назначения:
- Проверка анимаций . Замедлите, воспроизведите или проверьте исходный код группы анимации.
- Изменить анимацию . Измените синхронизацию, задержку, продолжительность или смещения ключевых кадров группы анимации. Редактирование ключевых кадров и Безье не поддерживается.
Вы можете отредактировать временные интервалы плавности перехода и анимации CSS, а также настроить пользовательские кривые Безье с помощью редактора плавности на панели Элементы > Стили .
Вкладка Animations поддерживает анимацию CSS, переходы CSS и веб-анимацию. requestAnimationFrame 9Анимации 0038 в настоящее время не поддерживаются.
# Что такое анимационная группа?
Группа анимаций — это набор анимаций, которые кажутся связанными друг с другом.
В настоящее время в Интернете нет реальной концепции групповой анимации, поэтому моушн-дизайнеры и разработчики составляют и синхронизируют отдельные анимации, чтобы они выглядели как единый визуальный эффект. Вкладка Animations прогнозирует связанные анимации на основе времени начала (исключая задержки) и группирует их рядом друг с другом.
Другими словами, на вкладке Анимации группируются анимации, запущенные в одном и том же блоке скрипта, но если они асинхронны, они попадают в разные группы.
# Начало работы
Существует два способа открыть вкладку Animations :
Выберите Настройка и управление DevTools > Дополнительные инструменты > Animations .
Откройте меню команд, нажав одну из следующих клавиш:
- на MacOS: Команда + Shift + P
- в Windows, Linux, или Chromeos: Control + Shift + P
7 Then Atarting Animation соответствующую панель Drawer.
По умолчанию вкладка Animations открывается как вкладка рядом с ящиком Console . В качестве вкладки ящика вы можете использовать ее с любой панелью или переместить в верхнюю часть DevTools.
Вкладка Анимации сгруппирована в четыре основных панели (раздела):
- Элементы управления . Отсюда вы можете очистить все захваченные в данный момент группы анимаций или изменить скорость текущей выбранной группы анимаций.
- Обзор . Выберите здесь группу анимаций, чтобы проверить и изменить ее на панели сведений .
- Хронология . Приостановите и начните анимацию отсюда или перейдите к определенной точке анимации.
- Детали . Проверьте и измените текущую выбранную группу анимации.
Чтобы захватить анимацию, запустите ее, пока открыта вкладка Анимации . Если анимация запускается при загрузке страницы, перезагрузите ее.
# Проверка анимаций
После захвата анимации есть несколько способов воспроизвести ее:
- Наведите указатель мыши на ее миниатюру на панели Обзор для предварительного просмотра.
- Нажмите и перетащите красную вертикальную полосу, чтобы прокрутить анимацию области просмотра.
- Выберите группу анимации на панели Обзор (чтобы она отображалась на панели Подробности ) и нажмите кнопку Повтор . Анимация воспроизводится в окне просмотра.
Нажмите кнопку Скорость анимации на панели Элементы управления , чтобы изменить скорость предварительного просмотра текущей выбранной группы анимации.
# Просмотр сведений об анимации
После захвата группы анимации щелкните ее в Обзор для просмотра сведений. На панели Details каждая отдельная анимация получает свою собственную строку.
Наведите указатель мыши на анимацию, чтобы выделить ее в окне просмотра. Нажмите на анимацию, чтобы выбрать ее на панели Elements .
Некоторые анимации повторяются бесконечно, если их свойство animation-iteration-count установлено на infinity . На вкладке Animations отображаются их определения и итерации.
Самая левая, более темная часть анимации — это ее определение. Правые, более блеклые участки представляют собой итерации.
Например, на снимке экрана ниже второй и третий разделы представляют итерации первого раздела.
Если к двум элементам применена одинаковая анимация, на вкладке Анимации им назначается одинаковый цвет.
Сам цвет случайный и не имеет никакого значения. Например, на снимке экрана ниже к двум элементам div.eye.left::after и div.eye.right::after применена та же анимация ( eyes ), что и к элементу div. ноги :: до и div.feet::after элементов.
# Изменить анимацию
Существует три способа изменения анимации с помощью вкладки Анимация :
- Продолжительность анимации.
- Тайминги ключевых кадров.
- Задержка запуска.
Любые изменения, которые вы делаете на вкладке Анимации , применяют встроенные стили к соответствующим элементам, поэтому вы можете сразу же просмотреть и воспроизвести полученные анимации.
Для этого раздела предположим, что приведенный ниже снимок экрана представляет исходную анимацию:
Чтобы изменить продолжительность анимации, щелкните и перетащите первый или последний круг.
Если анимация определяет какие-либо правила ключевых кадров, то они представлены в виде белых внутренних кругов.