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



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

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


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



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

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


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

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


    Анимирование кривых – это просто и занимательно (если все сразу хорошо нарисовать). Можно сказать, что это один из самых полезных инструментов в арсенале верстальщика при создании нестандартных сайтов, к тому же не требующий долгого изучения.
    • +14
    • 8,3k
    • 9
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 9
    • +1
      Спасибо, что пишете. Очень хотелось бы узнать не только о техниках и средствах анимации, но о том как она должна выглядеть, сколько длится, какие должны быть временные кривые и т.д. Т.е. свод правил, гласных и не гласных, очевидных и не очевидных. И нужно знать это не только в контексте вау-анимации для лендигов, а ещё и про интерфейсную анимацию.

      Есть конечно несколько лекций на ютубчике, несколько статей про это, но всё очень не систематизировано и разбросано, а хотелось бы какой-то основательный труд видеть по этой теме.
      • 0
        Классно! Я вот пробовал делать поп-апы с бэкграундом из анимированных svg. Идея с шейповой анимацией выезжающей формы очень хороша, буду пробовать!
        • +1
          спасибо, и круто что не перевод
          • 0
            Это просто, если формы простые. Проблемы начинаются там, когда дизайнер (или ваш воспаленный мозг) создает крутую и сложную фигуру, состояющую из разных частей (один svg с множеством которые внутри имеют свои деревья из элементов), и её каким-то образом нужно анимировать (аля перемещение, морфинг и так далее разных кусков). И проблемой тут становится не сам код анимации, а маппинг этих частей и во что они должны превратиться.

            У меня имеется много демок с ручным морфингом, это крайне занимательный опыт, но кастомный морфинг двух не сильно отличающихся по размерам вещей может разительно отличаться по сложности и времени запиливания. Раньше люди часто писали, типа вот ты тут такую классную анимацию сделал, помоги нам анимировать это, «вроде похоже». Я смотрю и мне 5 секунд хватает чтобы понять что там работы на несколько дней страданий чтобы все по итогам идеально работало во всех мозможных ситуациях. В общем все эти жутко кастомные вещи тяжело масштабируются, на то они и кастомные. Безболезненное запиливание 10 морфинг анимаций не означает что вы легко справитесь с относительно похожей одиннадцатой.
            • 0

              Вот после таких статей программисты начинают, наконец, понимать, зачем нужен был Flash.

              • 0

                да, только собирался написать насколько же проще такие вещи было сделать там :)

                • 0
                  Так есть же Adobe Animate, разве там нельзя сделать тоже, что может Flash?
                  • 0

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

                • 0
                  Ненавижу этот ваш флэш, от которого весь браузер тупит и выжирает память.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое