Анализ UI-анимации №2: Бесшовный переход между экранами
Во втором посте этой серии я продолжу разбирать, из чего состоит анимация гифки от UI8 и как её реализовать на Фреймере. В ней можно выделить 8 микровзаимодействий. По их числу я разделил ролик и последовательно рассказываю про каждое.
Серию лучше читать с первого поста:
В этой анимации пользователь переходит с экрана Задачи на экран Профиль.
Я заново отрисовал дизайн обоих этих экранов. Если тебе нужен полный Merge UI-kit, его можно купить на сайте UI8. Наиболее близкий шрифт, который используется в этом дизайне — Titillium. Девушку на автар нашёл в Гугле по запросу girl face. В конце поста ищи примеры, макет и шрифт.
Этот переход завязан на тех богатых возможностях, которые даёт анимация на ключевых кадрах в After Effects. Хотя, во Фреймере кардинально другой подход, почти всё из увиденного можно сделать и в нём. Как и любую другую гиф-анимацию, разбирать этот ролик лучше при помощи монтажной программы ScreenFlow. Анализирую от общего к частному и выделяю движущиеся объекты. Начинаю всегда с триггера — действия, инициирующего анимацию. Здесь триггер это нажатие на аватар.
Проанализируем каждый блок по отдельности.
Блок 1. фон. Глобальная смена масштаба
Экран вместе со всеми блоками пропорционально увеличивается процентов на 300 в ширину и высоту, оставаясь привязанным к верхнему левому краю.
Пример на Фреймере:
Блок 2. Аватар
По триггеру объект маленького аватара заменяется на объект большого, затем большой увеличивается. Можно было бы не сшивать две картинки, а сделать аватар одним объектом, в котором меняется степень скругления углов и используется маска, но здесь это не лучшее решение. Тогда пришлось бы всегда показывать его в большом разрешении, даже если находишься на экране Задачи. Плохо для производительности. Пример на Фреймере.
Блок 3. Значок Online
Зелёный значок Online увеличивается вместе с аватаром. На позднем этапе он исчезает и появляется после имени Beatrice Harris.
Блок 4. Projects и Tasks
В процессе увеличения масштаба холста блоки Projects и Tasks сдвигаются вправо вниз, что ещё больше их ускоряет. Затем, они скрываются за нижним краем:
Чтобы упростить понимание, можно разделить весь переход между экранами на две логические части: до скрытия блока Projects и после. Поскольку блоки движутся одновременно, все эти деления на стадии условны.
Первую стадию мы воспринимаем как анимацию экрана Задачи. После скрытия блока считаем, что произошёл переход на экран Профиль и осталось лишь проявить все объекты на нём.
Начиная с кадра 5, анимация приходит в завершающую стадию. Проявляются блоки экрана Профиль.
Блок 5. Open tasks
В верхнем правом углу выдвигается серый блок с количеством задач пользователя. Его впервые можно заметить на кадре 4. Он завершает движение одновременно с аватаром.
Блок 6. Заголовок: Beatrice и Harris
Слова Beatrice и Harris — это отдельные объекты.
Текст заголовка изначально опасен всего процентов на 20 и сдвинут вправо. Это хорошо видно на кадре 4. Затем, объект Beatrice сдвигается на своё место, набирая опасность до 100. С небольшой задержкой его нагоняет Harris. Такая же анимация срабатывает на объектах Sales и Manager. Пример на Фреймере:
Иконка меню
Остроумный приём: слева от текста вылетают три точки, которые формируют иконку меню. Их впервые можно заметить на кадре 6. Также, начиная с этого кадра, проявляется зелёный значок Online.
Блок 7. Одометры на Hours и Sales
Одóметр — это счётчик, в котором цифры сменяются вертикальным вращением. В них есть большая прелесть, поскольку они превносят в интерфейс что-то знакомое из реального мира. Цифры с одометром оживают и дают иллюзию, что данные обновились в реальном времени.
Первым начинает вращаться одометр напротив Sales, затем с задержкой проявляется левый, Hours. Рассинхронизация прибавляет жизни.
Это самое сложное место всей сегодняшней анимации. Тут у нас три пути:
- Подхалтурить с Афтером
- Заанимировать только движение спидометра, не трогая логику
- Полностью проработать логику, написав одометр
Вариант 1: Подхалтурить с Афтером
Не заморачиваться и вставить одометр как маленький видео-слой в mp4. Сделать его по этому уроку. Плюсы: это довольно быстрый способ, если знаешь Афтер и нужен всего один объект. Минус: без перерендера не удастся менять данные, а значит решение не масштабируется. Это довольно быстро выходит из-под контроля: для показа 5 одометров с разными данными надо рендерить пять отдельных видео. В качесте прототипа канает, но программисты помучаются, как это реализовать на проде.
Вариант 2: Заанимировать как мультик
Второй — сымитировать движение одометра движущимися слоями, но по минимуму лезть в логику. Цифры бегут вверх, маскирующий прямоугольник их режет и показывает в индивидуальных окошках. Делаем только простую анимацию, которая заканчивается, когда слой докрутил до заданного числа. Плюс: это довольно быстро реализовать.
Специально для этого поста я написал простой одометр. Пример на Фреймере:
Минус моей реализации: барабан будет крутиться только до ближайшей заданной циры, не совершая полный оборот. Девятка шевелится хорошо, а единичка так себе. Заставить его крутиться циклично и останавливаться по таймеру = усложнять и потерять время. Уход в слишком сложную механику противоречит идее прототипирования. Если время разработки прототипа сопоставимо с временем работы программистов над аналогичной задачей, то такой прототип уже никому не нужен.
Вариант 3: Проработать логику
Спрограммировать логику как папа, либо интегрировать готовое решение. Этот вариант доступен для профи и именно благодаря тому что он есть, Фреймер могуч. Если будем программировать сами, возьмём за основу Вариант 2. Сможем задавать значение времени, которое одометр должен вращаться сколько угодно оборотов.
Минус: Это сложно и требует большого багажа знаний. Если никогда не делал ничего подобного, можешь капитально застрять и потратить много времени на разборки с написанием функции, параллельно изучая JavaScript. Это уже не совсем про анимацию.
Плюсы: такая функция универсальна и её можно использовать в других прототипах, где нужны одометры. Программисты будут довольны тем что ты сделал за них всю алгоритмическую работу и им будет легче написать решение на своём языке, особенно, для веба.
Создать свою полноценную функцию для одометра и интегрировать готовые js-модули — интересные задачи, но они не входят в фокус этого поста.
Блок 8. График
График помещён в маскирующий прямоугольник и появляется из него, двигаясь вправо:
Блок 9: Пайчарт
Под заголовком Statistics расположена большая круговая диаграмма (пайчарт). Она начинает проявляться с кадра 9. Имеет те же самые три варианта реализации, что и одометр: вставить из Афтера, сделать анимацию без логики и написать функцию. Вот хороший урок, как сделать пайчарт в Афтере.
Блок 10: Таблица статистики
Все 4 блока (offers sent, new clients и другие) выдвигаются снизу. В этом появлении мы задействуем цикл. Он запустит анимации объектов с заданной задержкой. Та же самая механика, что в примере с заголовком Beatrice Harris, только вертикально.
Перегруз как визуальный приём
Поскольку человек не может в реальном времени обрабатывать столько источников движения, при просмотре перехода утрачивается ощущение контроля за происходящим. Это сделано нарочно, чтобы сложилось ощущение сложной анимации. Зритель способен уловить движение аватара и проявление всей нижней части экрана. Отдельные детали он не замечает.
К этому посту прикладываю примеры, макет в Скетче и шрифт. Скачать их можно в телеграм-канале.
На этом разбор анимации №2 завершается. Осталось из всех этих отдельных примеров собрать прототип на Фреймере, чем мы займёмся в следующем посте:
Я веду канал Скетч-дизайнер, в котором рассказываю о дизайне интерфейсов в Скетче, горячих клавишах и плагинах. Другие темы: дизайн-системы, вдохновляющие дизайнеры и UI-анимация в Фреймере. Если застрял с Фреймером, пиши в Фреймер-чат.
