Pull to refresh

Изменчивые формы и вау-эффекты: о магии простыми словами

Reading time 5 min
Views 12K


Продолжаем рассматривать идеи создания различных эффектов для сайтов. Закончили мы на SVG масках, а сегодня на повестке дня элемент path и формы, которые с его помощью создаются. Точнее их изменения. И снова мы постараемся избежать использования сложных технологий, рассмотрим преобразование одних иконок в другие, создание эластичных элементов и использование силуэтов для придания сайту атмосферности.

К чему все это?


Изменение формы в интерфейсах – это очень полезная вещь, если вы работаете над впечатлением, которое сайт произведет на пользователя.

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

С другой стороны мы можем лучше обыграть то движение, которое уже есть на странице. То же самое меню или всплывающее уведомление может становиться эластичным, немного менять свою форму при движении, особенно в моменты, когда по идее движется с ускорением. Этот подход часто используют с героями мультфильмов – их постоянно “плющит” и “колбасит”, благодаря чему движения выглядят более живыми. Так почему бы не применить это на сайте?

Что будем использовать?


Снова SVG. Но на этот раз элемент path. По сути path – это кривая линия, которая может быть замкнутой, и в этом случае мы можем залить ее каким-либо цветом или картинкой. Также path используется как траектория движения, но об этом как-нибудь в другой раз. Этот элемент имеет атрибут d, который интересует нас в первую очередь. Обычно его значение выглядит примерно так:

<path d=’m 51.012704,994.53093 c 3.967595,2.89879 7.978605,5.78167 12.374577,7.97717 4.395972,2.1955 9.228469,3.6917. . . .’ />

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



Согласитесь, двигать мышкой точки по экрану куда проще, чем пытаться исправлять числа прямо в исходниках.

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

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

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

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

Будем считать, что мы можем взять графический редактор и нарисовать в нем какие-то несложные формы. Дальнейшие действия лучше всего показывать на практических примерах.

Посмотрим все это на практике


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



Здесь у нас есть три элемента, три кривых:

<svg id='hamburger' viewBox='. . .'>
    <g>
        <path id='part-1' fill='#000' d='. . .' />
        <path id='part-2' fill='#000' d='. . .' />
        <path id='part-3' fill='#000' d='. . .' />
    </g>
</svg>

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



Если количество элементов было бы разным, мы бы просто скрыли лишние за теми, которые переиспользуются.

Единственное, что нам нужно сделать, для того, чтобы осуществить преобразование – это взять любимый инструмент для анимаций (в этой серии статей мы используем 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-2px), то получится эффект гибкой разделяющей линии для элементов.

Развиваем мысль


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



Это позволяет добавить атмосферности сайту. Тематическое кафе, выставка реконструкторов, разные клубы и магазины для взрослых. Можно и сайт какой-либо персоны или героя фильма так украсить, особенно если силуэт узнаваем.

В техничесвом плане здесь все то же самое, что и в предыдущем примере, но эффект совершенно другой:


Этот примем определенно стоит взять на вооружение. Он особенно хорошо работает на больших экранах. Главное — помнить об адаптивности, которая в примере отсутствует, но на реальном сайте все же должна быть.

Вместо заключения


Анимирование кривых – это просто и занимательно (если все сразу хорошо нарисовать). Можно сказать, что это один из самых полезных инструментов в арсенале верстальщика при создании нестандартных сайтов, к тому же не требующий долгого изучения.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+14
Comments 9
Comments Comments 9

Articles