Браузерные инструменты разработчика имеют в своем арсенале множество интересностей. Мы уже рассказывали о некоторых из них, но теперь уделим внимание анимации CSS и работе со слоями, отрисовкой сайта, перерисовкой. Казалось бы, что это невозможно в принципе: работать в браузере с анимацией, но представьте, что как раз таки – можно. При этом DevTools позволяет манипулировать визуализацией и анимацией, изменять её, контролировать, настраивать и проверять. Разумеется, что использовать все это можно по-разному и кому-то может пригодиться, кому-то – не очень. Но факт остается фактом, такой инструмент есть и он «под рукой».
И как обычно обратим внимание на тот момент, что инструменты разработчика во всех браузерах практически одинаковые, поэтому если в прошлый раз мы взяли за основу Google Chrome, то теперь остановимся на Opera.
В качестве примера возьмем самую обычную анимацию смена цвета при наведении мышкой. В обычном состоянии – серый оттенок, при активности внутри окна просмотра – ярко-оранжевый. Анимация плавная, скоротечна, но сделаем её еще медленнее и длительнее. А также воспользуемся еще одним набором анимации.
Простые возможности анимации
Для открытия инструмента переходим в инструментарий, кликаем по троеточию (меню справа) –> More tools -> Animations. У нас появляется еще одна панель. Изначально она пустая и тут есть два варианта: либо подвести курсор к анимации, либо обновить страницу. Так или иначе, но в верхней части появятся небольшие отдельные блоки, представляющую всю ту анимацию, которая совершалась на данной странице. Так, например, мы уменьшили часть панели, подняли верхнюю часть codepen, потом увеличили окно инструментария и так далее. Все это время анимация проигрывалась, а потому и отражается она на панельке в виде блоков под масштабом.
То есть здесь можно выбрать какая анимация на странице нужна разработчику: частная (иконка, смена цвета и пр.) или вся возможная (когда мы меняли размеры окон на страничке). Выберем второй вариант (третья по счету) и увидим кривую нашей анимации.
При паузе появится красная разделительная линия, которую можно перемещать мышкой и находить нужные моменты анимации. Так, в начале у нас темно-серый еще, а в конце произошла окончательная смена цвета на оранжевый. Если бы анимация была длительной и постоянной (например, падающие снежинки), то кривая была бы длиннее и волнистой, олицетворяя, тем самым, повтор действий и множественность для каждой снежинки. К такому примеру обратимся позже.
Полезность инструментария для веб-верстальщиков
Так зачем может потребоваться обычному веб-верстальщику такой инструмент внутри самого браузера? Для разных целей, хотя и не всегда. Например, если на сайте есть анимация, то, как минимум, DevTools – возможность быстро её подкорректировать. Можно увеличить её длительность путем сдвига правой контрольной точки. При этом такое изменение будет прописываться в код автоматически и увидеть его можно на вкладке Стили. После этого можно снять с паузы видео и посмотреть на странице уже, как будет выглядеть анимация. Мы увеличили её до 1,18 секунд.
Можно изменить кривую анимации. Выглядит это – не сказать, что очень просто… предстоит поработать с кривой Безье, которая и является в данном случае графическим представлением тайминга. Вариантов работы два: выбрать готовые пресеты слева или создать свою кривую, а затем скопировать полученный код CSS из вкладки Стили в свой рабочий. Также вверху всплывающего окошка присутствует анимация движения шарика. Она демонстрирует разные стили тайминга, которые и выбираются с помощью Безье.
Так, например, второй вариант кривой cubic-bezier позволяет сделать анимацию смены цвета более плавной, степенной, с практически мгновенной сменой цвета. А при оригинальном ease – длительно показывается серый цвет, затем быстрая смена и долго виден оранжевый.
Также, если существуют ключевые кадры, как на примере ниже, их можно сдвигать и редактировать. Особенность только в том, что изменения во вкладке Стилей не появятся. Их придется вносить вручную, но зато есть возможность узнать какие это изменения. На каких миллисекундах появляется новый ключевой кадр. Кроме того, вносить изменения требуется в процентах. Ключевой кадр на 1,50 секунде из 2-х секундной анимации. Значит, в процентах это ¼ часть – 75%. Аналогично на скриншоте представлено изменение для второй точки у слова «Loading…».
И обратите внимание на повторы анимации и кривой на таймлайне, о которых мы говорили выше.
.jpg)
В общем и целом, панель анимации в браузерном инструментарии разработчика весьма хорошее подспорье при работе с вёрсткой сайтов. Не требуется постоянно открывать и редактировать код в приложении, копировать, загружать на сайт, проверять. Можно все проверить и отредактировать, вот, сразу, здесь и наглядно, а уже затем скопировать полученный код куда требуется. Тем более мы в прошлом материале рассказывали о том, как сохранить локально сделанные в инструментарии изменения.
Работа со слоями
Но было бы совсем все просто, если кроме инструмента анимации в DevTools более ничего полезного и не было бы. Это не так. И оно есть. Визуализация слоев (отрисовка, перерисовка (Repaint, Reflow)), из которых и получается данная анимация. Такая визуализация позволяет увидеть вашу анимацию с разных «сторон» и представлена она на вкладке Слои (Layers). Впрочем, вкладка Слои нужна не только для анимации.
Снова кликаем по троеточию (меню справа) –> More tools -> Layers. Здесь поначалу кажется все не слишком понятным, но давайте попробуем посмотреть на нашу смену цвета сбоку. На панели инструментов выбираем rotate mode и поворачиваем объекты-слои в центральной части. Можно снять галочку с Slow scroll rects, дабы ничего не мешало просмотру. У нас получилось много слоев: сначала прогрузили, потом изменяли размер окон на самой странице codepen, анимировали… а слои создавались и отрисовывались.
Слои и скорость сайта
Здесь стоит сказать о том, как панель Слои влияет на работу сайта и его скорость. Если коротко и без терминов: браузер создает слои, на которых располагает элементы страницы и в случае необходимости перерисовывает их, обновляет. Иногда из-за одного элемента обновляться и отрисовываться заново может вся страница, а это, в свою очередь, ведет к замедлению скорости работы сайта в целом. Все происходит быстро и просто, если показывается на странице пользователю только один кадр, что-то статичное и постоянное. Но если какое-либо изменение введено в интерфейс (например, прокрутка, запуск анимации), браузер должен в таком случае создать серию кадров, чтобы отобразить такое изменение. Изменения объектов влекут за собой repaint и reflow стилей – отрисовка без или с влиянием на размер и положение.
Если посмотреть на 3D-визуализацию слов, то при клике по объекту можно увидеть количество всех слоев и описание выбранного. Это может быть полезно для понимания того, почему некоторые элементы помечаются как отдельный слой, даже если они для этого не предназначены или как перерисовка одного элемента может повлиять на другие узлы. Например, зачем перерисовывать всю анимацию, когда можно изменять только элементы на одном каком-то слое? Тогда становится проще разобраться какие элементы и где они должны находиться.
Вот пример анимации с рейтингом звёздочек и пример слоев выше. Ситуация: на странице с данным виджетом рейтинга при клике по двум последним звездам (справа) изменений в стиле не происходит (reflow). Если же выделить звезды слева, то весь документ (именно документ, контент) под виджетом рейтинга перерисовался (repaint). Причина? Звезды не были выше текста "Рейтинг сердец" в понятии группировки слоев. Здесь было достаточно изменить свойство Z-index для звезд и перерисовки исчезли. И страница стала загружаться немного, но быстрее.
Это простенький пример того, для чего вообще нужна панель Слои и как выполняется отрисовка и перерисовка страницы и объектов браузером. Разумеется, что все это может занимать миллисекунды и быть не слишком заметным, но обращать на это внимание и помнить – не лишнее.
Слои занимают память РС, чем больше взаимодействий с элементами, тем и слоев больше. Но одно дело слои, другое дело – как происходит обновление данных и отрисовка, всего документа или только элемента. Панель Слоев и призвана в этом разобраться, позволяет увидеть такие данные и понять, что и на что влияет. Создать анимацию отдельным файлом (gif, например) – хорошо, но если требуется взаимодействие с пользователем и анимация создается с помощью CSS, то подходить к этому нужно чуть более внимательно.
Завершение
Возможно, очень условно, сумбурно мы рассмотрели вариант работы с анимацией в браузерных инструментах разработчика DevTools и то, как можно ускорить работу сайта. Но наша цель состояла в том, чтобы попросту рассказать об этом моменте и представить варианты примеров использования и реализации.
Разумеется, что при работе над обычным сайтом кафетерия, на странице которого размещается статическая информация о меню, фотографии блюд, интересные варианты сочетания напитков и еды, небольшая анимация рейтинга попросту не сможет затормозить загрузку страницы в браузере. Заметно затормозить!
Но если весь сайт анимирован, он создан с большим количеством технологий, обладает даже объемными объектами или меню «супер-пупер-ноу-хау», то тогда не лишним будет посмотреть на то, как браузер отрисовывает страницу, как создает слои, где размещены объекты и как происходит их изменение. Да, это потребует времени, но это того стоит, дабы конечный проект получился весьма недурным и говорил о верстальщике, как о профессионале.
