Изменчивые формы и вау-эффекты: о магии простыми словами
Продолжаем рассматривать идеи создания различных эффектов для сайтов. Закончили мы на SVG масках, а сегодня на повестке дня элемент path и формы, которые с его помощью создаются. Точнее их изменения. И снова мы постараемся избежать использования сложных технологий, рассмотрим преобразование одних иконок в другие, создание эластичных элементов и использование силуэтов для придания сайту атмосферности.
К чему все это?
Изменение формы в интерфейсах — это очень полезная вещь, если вы работаете над впечатлением, которое сайт произведет на пользователя.
С помощью преобразования форм можно красиво показать пользователю, что состояние какого-то элемента изменилось. Это может быть ответ на его действия (например он открыл меню-гамбургер и его иконка превратилась в крестик) или что-то, что происходит само по себе (пришло уведомление или закончилась загрузка и нужно изменить ее индикатор).
С другой стороны мы можем лучше обыграть то движение, которое уже есть на странице. То же самое меню или всплывающее уведомление может становиться эластичным, немного менять свою форму при движении, особенно в моменты, когда по идее движется с ускорением. Этот подход часто используют с героями мультфильмов — их постоянно «плющит» и «колбасит», благодаря чему движения выглядят более живыми. Так почему бы не применить это на сайте?
Что будем использовать?
Снова SVG. Но на этот раз элемент path. По сути path — это кривая линия, которая может быть замкнутой, и в этом случае мы можем залить ее каким-либо цветом или картинкой. Также path используется как траектория движения, но об этом как-нибудь в другой раз. Этот элемент имеет атрибут d, который интересует нас в первую очередь. Обычно его значение выглядит примерно так:
Это информация о тех точках, по которым строится кривая, а также всех их параметрах. Если картинка сжата, то будет меньше знаков после запятой в числах, но понятнее ничего не станет. Можно конечно поискать в сети описание синтаксиса, который там используется, запомнить где должны быть пробелы и запятые, но…. Забудьте об этом. Никто не правит такие вещи своими руками. Все делается в векторных графических редакторах:
Согласитесь, двигать мышкой точки по экрану куда проще, чем пытаться исправлять числа прямо в исходниках.
Поскольку наша конечная задача состоит в том, чтобы трансформировать одну картинку в другую, возникает важное условие: количество точек в обоих вариантах должно быть одинаковым. И их типы также должны совпадать. Это связано с тем, что современные инструменты, которые мы скорее всего будем использовать для анимации, не умеют адекватно трансформировать сильно отличающиеся кривые. Точнее говоря они могут это делать, но выглядеть это будет ужасно.
Начинайте с более сложной фигуры, а затем из ее точек делайте более простую. Это поможет сохранить плавность анимации.
Еще один момент, о котором стоит помнить — это то, что при переходе от одной сложной фигуры к другой, точки, на которых строится кривая, будут двигаться по прямым линиям (большинство инструментов все анимируют именно так). Из этого следует еще одно замечание:
При переходе между сложными по форме объектами может понадобиться сделать промежуточные шаги, чтобы не появлялись самопересечения кривых и странные перекрестные заливки.
Будем считать, что мы можем взять графический редактор и нарисовать в нем какие-то несложные формы. Дальнейшие действия лучше всего показывать на практических примерах.
Посмотрим все это на практике
Первым примером будет гамбургер. Немного похожий на иероглиф, он будет хорошо смотреться на сайте суши-бара или тату-салона. Но нас интересует общая идея того, как сменить одну иконку на другую.
Здесь у нас есть три элемента, три кривых:
Чтобы лучше понять, какой из элементов куда движется, взгляните на цветную иллюстрацию:
Если количество элементов было бы разным, мы бы просто скрыли лишние за теми, которые переиспользуются.
Единственное, что нам нужно сделать, для того, чтобы осуществить преобразование — это взять любимый инструмент для анимаций (в этой серии статей мы используем anime.js) и изменить значения атрибутов d у кривых, с тех, которые были в первой иконке, на те, которые используются во второй.
let hamburger = anime.timeline();
hamburger
.add({
targets: '#part-1',
d: '. . .' // Здесь новое значение
})
.add({
targets: '#part-2',
d: '. . .' // И здесь тоже
})
.add({
targets: '#part-3',
d: '. . .' // И тут новое
});
А что делать если иконки не такие удобные?
Бывает так, что мысль об анимации каких-то элементов приходит в голову уже после того, как они были нарисованы кем-то другим 10 лет назад. Никто не думал о том, чтобы использовать один и тот же набор точек при рисовании. В такой ситуации простые алгоритмы преобразования одной кривой в другую уже не работают. Все начинает разлетаться в разные стороны и самопересекаться много раз, создавая ужасное впечатление. Конечно самым правильным решением будет все перерисовать, но иногда можно обойтись тем, что есть.
Есть инструменты, которые работают с разными объектами, в том числе и с произвольными кривыми. Например SVG Morpheus. Помимо простой трансформации элементов, этот инструмент добавляет разные вращения. Иногда он дает кашу, о которой уже говорили выше, но чаще всего эффект получается приемлемым, особенно если иконки имеют более-менее строгие геометрические формы. А иногда даже забавным, как в этом случае.
Но помните, что в большинстве случаев лучше собраться и перерисовать все как полагается, чем тащить в проект еще одну зависимость из-за пары иконок.
Переходим к эластичности
Здесь основная идея состоит в том, чтобы украсить форму каких-то уже существующих элементов интерфейса. Часто подобные эффекты применяют на выезжающих панелях. Основная идея состоит в том, чтобы передняя или задняя граница движущегося объекта изменялась в процессе. Например вылетающее из-за края экрана уведомление может иметь «хвостик» с задней стороны, который уменьшается по мере замедления движения и полностью исчезает при остановке. Мы реализуем похожий эффект, но с передней границей бокового меню.
Подход к созданию таких эффектов предполагает минимальные изменения уже существующей верстки. SVG элемент располагается по самому краю элемента абсолютным позиционированием и существует как бы «сам в себе».
В данном случае используется форма прямоугольника, у которого одна из границ выгибается в одну или в другую сторону. Это простейший вариант. Примеры кода приводить нет смысла, поскольку все операции идентичны тем, что были в первом примере.
Более интересным подходом было бы использовать готовые решения для затухающих колебаний, когда анимация проходит до конечной точки, затем еще дальше, возвращается назад, затем опять вперед и назад и.т.д. Их вполне можно найти в сети.
Здесь стоит отметить, что такие вещи вдвойне красиво смотрятся на минималистичных сайтах, где много чистого белого пространства. Если вместо заливки цветом нарисовать саму кривую (светлой тонкой линией, может быть 1–2 px), то получится эффект гибкой разделяющей линии для элементов.
Развиваем мысль
Простая эластичность — это конечно хорошо, но она не имеет своего лица. В плане эффектности может быть интересно вместо выпуклостей и вогнутостей делать осмысленные силуэты, выходящие из наших элементов интерфейса.
Это позволяет добавить атмосферности сайту. Тематическое кафе, выставка реконструкторов, разные клубы и магазины для взрослых. Можно и сайт какой-либо персоны или героя фильма так украсить, особенно если силуэт узнаваем.
В техничесвом плане здесь все то же самое, что и в предыдущем примере, но эффект совершенно другой:
Этот примем определенно стоит взять на вооружение. Он особенно хорошо работает на больших экранах. Главное — помнить об адаптивности, которая в примере отсутствует, но на реальном сайте все же должна быть.
Вместо заключения
Анимирование кривых — это просто и занимательно (если все сразу хорошо нарисовать). Можно сказать, что это один из самых полезных инструментов в арсенале верстальщика при создании нестандартных сайтов, к тому же не требующий долгого изучения.
