Виджет меню Гамбургер в настоящее время есть на любом другом сайте. Это стало синонимом сети и, возможно, даже больше, веб-разработки. Посмотрите, например, на Dribbble или Codepen. Там вы найдете немало примеров. Они бывают всех форм и размеров, где один более сложный, чем другой. Разработчики и дизайнеры не могут получить достаточно виджета.
Меню гамбургеров не без противоречий. Некоторые ненавидят это, а некоторые любят. Многочисленные статьи обсуждают это и его альтернативы. Некоторые утверждают, что его надлежащее место в учебниках истории. Независимо от его судьбы, он продолжает широко использоваться. Снова и снова он продолжает появляться на новых сайтах. Это особенно популярно для мобильных представлений, где меню обычно скрыты.
Существует довольно много вариантов изучения различных видов анимации. Я сам создал пару. Вот несколько моих творений:
Анатомия Гамбургер Меню
В самом простом воплощении меню гамбургеров представляет собой прямые параллельные линии. Обычно их трое. Эти строки остаются в какой-то форме кликабельного контейнера. Формы и размеры меню могут различаться, но их использование одинаково. Нажатие на них переключает состояние гамбургера. Это взаимодействие заставляет меню перемещаться назад и вперед между его открытым и закрытым состоянием. Обычный способ изобразить открытое состояние - показать X. Он сигнализирует пользователю, что нажатие / нажатие кнопки снова закрывает меню.
Очень часто между этими двумя состояниями происходит анимация. Такие кнопки - отличная возможность для веб-разработчиков радовать своих пользователей. Вообще говоря, это идеальное место для добавления анимации. Анимация перехода состояния кнопки не просто приятна для глаз; это также служит цели. Это хороший UX, чтобы дать пользователям обратную связь о взаимодействиях касания и нажатия.
Что такое линейная анимация SVG?
SVG Line Animation - это, как видно из названия, техника для анимации линий. Или, более конкретно, пути SVG. Это создает видимость рисования линии на экране. Метод появился в середине прошлого десятилетия, и с тех пор он остается популярным. Эта статья 2014 года подробно объясняет эту технику: https://css-tricks.com/svg-line-animation-works/ .
Эффект идеально подходит для меню гамбургеров, так как виджет чаще всего создается с помощью линий. В этой статье обсуждается, как использовать технику для анимации между двумя различными состояниями меню гамбургера.
Три горизонтально параллельные линии
Прежде всего, давайте начнем с рисования трех линий. Для рисования векторов требуется векторный редактор. То есть, если вы не хардкорный SVG-кодер и любите делать это вручную. Я использую Inkscape для рисования своих векторов.
Первое, что нужно сделать, это найти подходящий размер для рисунка SVG. Использование SVG-документа размером 100 x 100 пикселей - хорошая идея. Работа с четными числами облегчает связь и работу с размерами и пропорциями. Теоретически, при рисовании этих векторов можно использовать любой размер. Помните, что S в SVG означает масштабируемый.
Рисуя линии, давайте также оставим немного места для анимации по бокам меню. Это пространство зарезервировано для последующего анимации линий. В редакторе инструмент «Перо» создает новые штрихи.
Было ли это слишком быстро для вас? Если это так, вот рецепт
- Нарисуйте прямую линию в верхней части экрана
- Переместите конечные точки линии, чтобы сделать ее шириной 60 пикселей. Вертикально отцентрируйте линию вокруг y = 29.
- Установите ширину обводки до 6 пикселей
- Дублируйте строку и переместите копию в центр документа SVG. При y = 47px центр скопированной линии попадает в 50px. Половина ширины обводки составляет 3 пикселя. Т.е. 47 + 3 = 50.
- Создайте еще одну копию и поместите третью строку в y = 68px. Размещение третьей строки в этом положении делает гамбургер симметрично правильным.
Числа выше, например, ширина штриха, не обязательно должны быть точными числами, используемыми здесь, если вы воссоздаете этот пример. Важным является выбор ценностей, которые создают что-то визуально привлекательное. Можно настроить эти числа и настроить их. Они должны быть такими, чтобы гамбургер соответствовал стилю другого контента на веб-странице. Работа веб-разработчика заключается в создании согласованного внешнего вида и создании веб-страниц.
Взгляд на полученный код должен выглядеть примерно так: Эти важные части ниже должны быть найдены где-то в коде SVG.
<svg width = ”100” height = ”100” viewBox = ”0 0 100 100”>…
<Path d = "M 20,29 H 80" /> // верхняя строка
<path d = "M 20,50 H 80" /> // средняя линия
<path d = "M 20,71 H 80" / > // нижняя строка…
</ Svg>
Значок закрытия X
Затем создаем значок X close. Способ построить это путем расширения верхней и нижней линий. Идея в том, чтобы SVG-документ содержал обе фигуры одновременно. Комбинирование открытых / закрытых состояний прекрасно сочетается с техникой линейной анимации SVG. Это позволяет анимировать различные формы меню. Создание в этот момент может выглядеть как птичье гнездо. Не беспокойся Это будет иметь смысл позже при обсуждении анимации. Следующие три части должны быть частью модели:
- Прямые линии (гамбургер)
- Соединительные линии, соединяющие две фигуры
- Значок закрытия X
Способ продлить линию состоит в том, чтобы разбить процесс в три этапа.
1. Расширить линию
Первым шагом является расширение верхней линии с помощью резкой линии, включающей часть значка X. Рисунок на этом этапе не должен быть идеальным. Это просто должно быть достаточно хорошо, чтобы вы заметили половину X.
2. Отрегулируйте координаты
После расширения пути следующим шагом будет перемещение соединительных узлов в их соответствующие координаты. Соединительная линия может быть произвольной. Тем не менее, значок X должен быть пропорционален гамбургеру. В этом примере это линия, идущая от (25px, 25px) к (75px, 75px).
3. Сделайте линии гладкими
Наконец, что не менее важно, преобразование линии в кривую Безье делает ее гладкой. Во-первых, давайте посмотрим, как выглядит описанная выше процедура для верхнего пути. И здесь снова пригодится инструмент «Перо».
Как только верхняя строка установлена, пришло время сделать ту же процедуру для нижней строки. Поскольку все необходимое уже отображается на экране, имеет смысл повторно использовать вышеуказанную работу. Дублируйте, переверните и разместите копию, чтобы заменить предыдущую нижнюю строку. Вывод объектов вперед и назад - это один из способов получить доступ к правильному пути в нужный момент.
Переместить в HTML
Когда модель будет готова, пришло время перенести ее в HTML. К счастью, HTML совместим с SVG. Это означает, что все SVG напрямую работает внутри любого HTML-документа. При копировании кода SVG в разметку он появляется на экране при загрузке страницы в браузере.
Размещение ссылок, селекторов HTML на узлах SVG DOM - это то, что нужно делать дальше. Это открывает разметку для удивительного мира CSS. Или, более конкретно, он позволяет манипулировать путями SVG. С помощью CSS эти элементы SVG могут иметь стили, быть анимированными и проверенными. Ниже показано, как выглядит структура правил CSS после добавления классов:
<style>
.line { ... }
.line1 { ... }
.line2 { ... }
.line3 { ... }
</style>...<svg width=”100” height=”100” viewBox=”0 0 100 100”>
<path class="line line1" … /> // top line
<path class="line line2" … /> // middle line
<path class="line line3" … /> // bottom line
</svg>
Другая вещь, которую нужно сделать, это центрировать меню и убрать поле по умолчанию. Это не обязательно, но делает работу с меню более приятной. Контейнер flexbox, удобно размещает виджет в центре окна браузера.
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
margin: 0
}
Как долго эти строки?
Важной частью техники линейной анимации SVG является знание длины путей. Вот где сияет Dev Tools. Окно консоли инспектора может различными способами получать доступ к элементам DOM. Один из более удобных способов - это краткая информация об изящном элементе $ 0. Это дает прямой доступ к текущему узлу в инспекторе. Вызов функции getTotalLength , вызываемый на любом пути SVG, измеряет строки.
Измерение линий дает длины 207px и 60px. Не должно быть сюрпризом снова увидеть число 60. Это оригинальная длина линий гамбургера. Следует также отметить, что первая и последняя строки имеют одинаковую длину, за исключением незначительных ошибок округления. Этот результат - то, чего ожидать, поскольку они являются дубликатами. Оба из них имеют длину 207 пикселей при округлении вверх. Эти два числа, 207 и 60, являются значениями, необходимыми для начала работы с анимационным эффектом линии SVG.
Погружение в технику анимации линии SVG
Отличный способ привыкнуть к технике линейной анимации - использовать инспектор. Редактор стилей позволяет изменять правила CSS с немедленной обратной связью. Визуализация изменений облегчает понимание того, как CSS влияет на пути SVG. Цикл мгновенной обратной связи помогает быстро найти нужные значения. Целью здесь является использование модели, созданной выше, чтобы найти следующие два набора значений:
- Значения, которые заставляют гамбургер появляться снова.
- Значения, которые делают значок X, появляются снова.
Эти два набора значений, в свою очередь, представляют конечные точки анимации. Интерполяция между этими двумя крайностями - это то, что создает настоящую анимацию.
Первое, что нужно сделать, работая с анимацией, - это установить правило обводки-черты для одной из длинных линий. Штрих-dasharray правило имеет диапазон значений , которые описывают дефисы и пробелы. Эффект анимации в этой статье требует только двух значений. Это одна черта и один пробел. Один из способов найти пару значений тире / разрыв - установить оба значения на полную длину 207 пикселей и работать в обратном направлении. Стрелки вверх и вниз на клавиатуре ступенчато изменяют значение в редакторе. Переход по первому значению в наборе значений раскрывает гамбургер.
Та же процедура, что и выше, относится к значку X. На этот раз в игру вступает второе правило, штрих-дашоффсет . Смещение выдвигает линию вперед, чтобы изменить ее положение. Диагональная линия в X немного длиннее, чем линии в гамбургере. По этой причине линия нуждается в расширении. Добавление нескольких пикселей регулирует его длину.
Теперь давайте посмотрим на результаты. Ниже приведены различные наборы найденных значений:
<style>
/* Hamburger */
.line1 {
stroke-dasharray 60 207;
stroke-dashoffset 0;
}
.line2 {
stroke-dasharray 60 60;
stroke-dashoffset 0;
}
.line3 {
stroke-dasharray 60 207;
stroke-dashoffset 0;
} /* X icon */
.opened .line1 {
stroke-dasharray 90 207;
stroke-dashoffset -134;
}
.opened .line2 {
stroke-dasharray 1 60;
stroke-dashoffset -30;
}
.opened .line3 {
stroke-dasharray 90 207;
stroke-dashoffset -134;
}
</style>
Анимация
Dev Tools - мощный союзник в анимации. С помощью инспектора можно тестировать, настраивать и записывать анимации. Редактор стилей позволяет изменять CSS для немедленного повторного запуска анимации. Все внутри браузера. Dev Tools предоставляет идеальную площадку для изучения и создания анимации.
Самый простой способ заставить объекты двигаться на экране - использовать CSS-переходы. Они просты в использовании. Один указывает, какие другие правила CSS нужно анимировать. Установка целевого правила вместе с продолжительностью и замедлением немедленно включает анимацию. Это очень удобно. После запуска единственной вещи, необходимой для запуска анимации, является изменение значения целевого правила. Вот как выглядит правило перехода для меню гамбургеров:
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
Обратите внимание на конкретное ослабление. Упрощение кубического Безье, приведенное выше, основано на рекомендациях по интерфейсу материалов. Это немного более пробивной по сравнению с обычной легкостью смягчения.
Вот как может выглядеть тонкая настройка в Dev Tools
Собираем все вместе
Обработчик событий - последний шаг в создании анимации. Это то, что делает меню интерактивным. Переключение «открытого» класса запускает анимацию автоматически. Единственное, что нужно, это место, чтобы вызвать переход состояния. Сам элемент SVG служит идеальным местом для вставки обработчика.
<svg… onclick = "this.classList.toggle ('open')">
Доступность, обновленная версия
После публикации первой версии этой статьи Деннис Лембре указал, что вышеприведенная версия недоступна. Доступность важна, поэтому давайте исправим основные части. Правильнее всего обернуть меню внутри кнопки и переместить обработчик событий на кнопку. С кнопками часть того, что необходимо для того, чтобы меню было доступно, предоставляется бесплатно. Меню становится фокусируемым и автоматически включает навигацию по вкладкам клавиатуры.
Добавление дополнительной метки арии также очень полезно. Он предоставляет контекстную информацию пользователям, полагающимся на программы чтения с экрана.
<button onclick = "..." aria-label = "Главное меню">
<svg>
...
</svg>
</button>