Школа
Веб-разработка

Чем дизайнеру могут помочь инструменты разработчика в браузере (отладка анимаций)

Куст
8 мар 2018
👁 3325  
Веб-разработка

Чем дизайнеру могут помочь инструменты разработчика в браузере (отладка анимаций)

Куст
8 мар 2018
👁 3325  
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

С помощью инспектора анимаций в Хроме можно прямо на странице подкрутить анимации без знания ЦСС и функций сглаживания.

Инспектор анимаций находится в отдельной вкладке в выдвигающейся панели (Console Drawer), которую можно открыть с помощью клавиши Esc или через меню. Если вкладку не видно, то её можно включить в выпадающем списке:

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

При наведении на схему, появится превью анимации. При клике, анимация проиграется заново, а схема раскроется в более подробную, на которой видно как свойства изменялись на определённых отрезках времени и с какими функциями сглаживания:

Инспектор позволяет перезапустить анимацию, проиграть её на замедленной скорости или перемотать её на нужный отрезок:

Схема анимаций интерактивная, поэтому можно на месте подвигать анимации и поиграть с их длиной:

Наконец, если кликнуть на отрезок с анимацией, то во вкладке стилей отобразятся ЦСС свойства, применённые к элементу. Среди этих свойств будет transition, которое задаёт функцию сглаживания анимации. Рядом с ней будет значок с иконкой кривой линии, при клике на который открывается редактор функции сглаживания. В нём можно выбрать один из предложенных вариантов или накрутить свой. К сожалению, инспектор анимаций пока не умеет подхватывать изменения фунция сглаживания на лету, поэтому анимацию придётся перезапускать вручную:

Вот и всё. С помощью инспектора можно рассмотреть анимацию повнимательнее, немного её подкрутить и передать результат технологу в понятном для него виде.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы