x
 
Куст
8 марта 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

А чем ещё дизайнеру могут помочь инструменты разработчика в браузере?


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

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

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

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

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

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

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

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

Первая часть
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Каким способом сделать простую анимацию на спрайтах Как устроена беспарольная аутентификация почтой 7




Недавно всплыло

Как избежать «эффекта Тильды»? 2 4 1 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1