В следующий раз, когда вы создадите очередные анимации на основе CSS3, вам может быть полезно перейти в инструменты разработчика Chrome и воспользоваться преимуществами функций проверки и настройки анимации. В этой краткой статье мы расскажем вам о том, какие инструменты анимационной разработки доступны в Chrome, как получить к ним доступ и чем они могут вам помочь.

Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.


Вот полная версия страницы.

Открытие вкладки Animations

На странице с запущенной CSS3 анимацией сначала откройте «Инструменты разработчика Chrome», перейдя в View > Developer > Developer tools. В качестве альтернативы вы можете использовать сочетание клавиш: F12 или CTRL + SHIFT + I.

Когда инструменты разработчика открыты, перейдите в меню, обозначенное тремя вертикальными точками в верхнем правом углу, затем выберите More tools > Animations, как показано ниже:



Когда вы впервые открываете вкладку анимации, вы не увидите никакого контента, связанного с вашей анимацией, вы просто увидите сообщение Listening for animations... Причина этого в том, чтобы инструмент заработал вкладка должна быть уже открыта, когда страница загружается впервые.



Чтобы панель считала информацию о ваших анимациях, обновите страницу, и вы увидите следующее:



Значок маленькой цветной иконки в левом верхнем углу представляет собой анимацию элементов вашей страницы. Нажмите на этот значок, чтобы открыть инструменты проверки анимации:

Курсор воспроизведения и ключевые кадры

По мере воспроизведения анимации вы увидите красный курсор воспроизведения, перемещающийся по временной шкале. Этот курсор может быть передвинут в нужное место при помощи мышки.

Каждая строка интерфейса представляет собой отдельный элемент анимации на странице. Вы можете заметить, что каждая строка имеет участок с более темным насыщенным цветом. Он показывает длину анимации, а более светлые сегменты, которые следуют за ним, представляют собой повтор анимации.

Вы также увидите несколько небольших кругов вдоль каждой линии анимации. Они соответствуют ключевым кадрам анимации. Круги темного цвета представляют начало и конец анимации, а полые круги представляют промежуточные ключевые кадры между ними.

Промежуточные ключевые кадры

Промежуточные ключевые кадры (ключевые кадры между началом и концом каждого цикла анимации) в каждой строке можно перетащить в разные позиции, и по мере их перемещения вы увидите, как меняется время анимации в окне браузера. Это хороший инструмент для экспериментов с тем, какой процент должен приходится на каждый промежуточный ключевой кадр.

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

Разместите курсор воспроизведения непосредственно над ключевым кадром, о котором идет речь, и вы увидите отметку времени в левом верхнем углу панели, сообщающую вам, как далеко по анимации вы находитесь в секундах. Затем вы можете выяснить, какой процент на этот раз составляет общая продолжительность анимации. В приведенном ниже примере курсор воспроизведения находится примерно на 1 секунде 2-х секундной анимации, поэтому мы знаем, что этот ключевой кадр составляет 50%.

Задержка и продолжительность анимации

Вы можете внести другие изменения на вкладке Animations, которые будут обновлять ваш код на вкладке Styles, чтобы вы могли точно видеть, какие значения вносить в ваш CSS. Первой из них это задержка до начала проигрывания анимации, а вторая — ее длительности.

Чтобы применить задержку перед началом проигрывания анимации, наведите указатель мыши на ее линию, пока не увидите курсор в форме руки, а затем перетащите его горизонтально. Вы увидите обновление значения задержки на вкладке Styles:



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

Функция тайминга анимации

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



Откроется окно, показывающее кривую Безье, которая отображает текущую функцию тайминга. Здесь вы можете выбрать существующий пресет, щелкнув одну из миниатюр слева, или вы можете перетаскивать маркеры основного изображения кривой, чтобы создать пользовательское значение кривых безье, которое вы затем можете скопировать в свой CSS:



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

Визуализация вращающихся слоев

Еще одна полезная функция — возможность визуализировать слои, используемые в вашей анимации, включая возможность поворота указанной визуализации и просмотр ее с разных точек зрения, чтобы лучше понять, как все работает.

Чтобы открыть панель Layers, перейдите в меню «Инструменты Chrome Dev» и выберите More tools > Layers.



Когда вкладка Layers открыта, выберите инструмент Rotate mode в верхнем левом углу:



Теперь вы можете использовать этот инструмент для поворота визуализации слоев на любой угол, который вам нужен, чтобы лучше видеть, как работают части вашей анимации:

Завершение

Давайте кратко рассмотрим инструменты анимации Chrome:

• Откройте инструменты анимации, сначала открыв Chrome Dev Tools, затем в меню инструментов dev выберите More tools > Animations.
• Панель Animations должна быть открыта, когда страница загружается, чтобы отображать информацию о анимации, — обновите страницу, чтобы достичь этого.
• Нажмите миниатюру маленького цветного графа, чтобы просмотреть информацию о анимации.
• Каждая строка представляет анимацию.
• Заполненные кружки представляют собой начальные и конечные ключевые кадры.
• Полые круги представляют промежуточные ключевые кадры.
• Промежуточные ключевые кадры можно перемещать, но вы не увидите соответствующее обновление кода на вкладке Styles, вместо этого вручную вычислите процентный пункт, на который они попадают.
• Измените значение задержки анимации, наведя его на линию, пока не увидите курсор руки, а затем перетащите его горизонтально.
• Измените значение продолжительности анимации, наведя курсор на его последний ключевой кадр, пока не увидите курсор стрелки с двойным контуром, а затем перетащите его по горизонтали.
• На вкладке Styles щелкните значок слева от существующей функции тайминга, чтобы открыть редактор кривых безье.
• Выбирайте из предустановок временной функции настроек или создайте свой собственный, изменив изображение основной кривой.
• Откройте панель Layers, перейдя в меню Инструменты разработчика Chrome и выбрав More tools > Layers.
• В этой панели используйте Rotate mode для просмотра слоев вашей анимации под любым углом.

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