Анализ UI-анимации №1
Ковыряем гифку UI8 при помощи монтажа
Когда я натыкаюсь на такие видео, у меня всегда дух захватывает. Оно гипнотизирует: можно просто смотреть по кругу, не особенно вникая, что за уличная магия происходит. Но когда ты начинаешь разбираться, ты можешь контролировать эту магию и сделать не хуже.
О серии
В этой серии постов я положу эту гифку на операционный стол и прокомментирую, из чего она состоит. Также я постараюсь привести примеры кода на Фреймере, как эту красоту реализовать.
Что в этой части
В вводной части я расскажу, как использую монтажную программу ScreenFlow для замедления, нарезки и создания гифок. Затем, я проанализирую первое из восьми микровзаимодействий, которое можно выделить.
Смотрим на анимацию с точки зрения Фреймера
Поскольку я адепт Фреймера, я бы выбрал для такой анимации именно его. Я считаю, что анимация интерфейса должна быть интерактивной. В мультиках нет такой изюминки. Отдельные элементы всё-таки пришлось бы вставлять в Фреймер в виде mp4-роликов.
АЕ vs Фреймер
В анимации, где требуется прописывать заранее определённые сложные траектории, АЕ гораздо удобнее. Однако, Фреймер выигрывает тем, что интерактивен и его код сразу понятен программистам. Прочитав его, они могут написать аналогичный код на своей платформе и не будут тратить много времени на отладку анимаций. Да, для дизайнера это дольше и сложнее. Но Фреймер даёт полный контроль в твои руки и ты решаешь, как оно должно шевелиться и кликаться. Программисты вряд ли придумают анимацию так же хорошо как сам автор дизайна.
Пара слов про исходное видео
Это видео сделано не для настоящего боевого проекта и точно никогда не будет реализовано на проде. Это чистая реклама продукта UI8. Монтажёр намеренно сокращает паузы, чтобы зритель не успевал осознавать происходящее. Видео сделано в АЕ для других дизайнеров, чтобы похвастаться и продать скетч-файл за 28 баксов. UI8 — молодцы, у них есть чему поучиться.
Как понять, что это сделано в After Effects
UI-анимация в АЕ всегда бросается в глаза слишком ровным ходом указателя. Живой человек делает непроизвольные движения мышью. Лишь ключи анимации ведут курсор идеально гладко и с характерным механическим ускорением. Кроме того, в этом видео курсор начинает кликать на кнопки так быстро, что даже анимация перехода на следующий экран не успевает завершаться.
Другая особенность, которая есть у АЕ — в нём можно двигать объект по произвольной кривой траектории. Фреймер-анимация всегда привязана к прямой линии и это серьёзный недостаток. Это можно обойти костылями, но такой свободы траектории как в АЕ никогда не добъёшься.
Как троллить программистов
Без монтажной программы проанализировать такое видео просто невозможно. Поэтому, если отдать это видео программистам и попросить заанимировать на проде как есть и без макетов, те будут громко материться и может быть даже попытаются ударить тебя в лицо. Программисты суровы.
Чем будем препарировать: ScreenFlow
Для анализа мы будем использовать простой монтажный редактор ScreenFlow. Кажется, я его вообще не изучал, чтобы начать с ним работать. Это признак хорошего дизайна, Дон Норман бы одобрил. Он подойдёт даже тем, кто ни разу не открывал монтажную программу.
В ScreenFlow я монтирую свои видеоуроки и делаю гифки для канала. В нём же я препарирую анимационные видео с Дрибла, чтобы понять, что в них произошло.
Поскольку это дрибл-шот, он имеет размеры 400 х 300. Создаём проект:
Переносим гифку с рабочего стола на монтажную область:
Делаем в ней крупный масштаб, перетащив ползунок из предыдущего скриншота вправо:
Чтобы было легче понимать, что происходит, можно замедлить видео вдвое. Для этого надо открыть Clip Inspector, дважды нажав на регион. Укажем скорость 50%:
Режем микровзаимодействия
Если зажать и держать клавишу вправо, видео будет проигрываться, пока не отпустишь. То же самое работает для клавиши влево.
Наша задача — понять, что в видео завершилось одно логическое действие и началось следующее. Нащупав это место, нажимай T (Trim). Если клавиша не режет, проверь язык ввода, должен быть английский. Я решил резать первый кусок на 00:00:03:26. Последняя цифра таймкода соответствует кадру. Используй стрелки, чтобы анализировать каждый кадр.
Кстати, в ScreenFlow можно сохранять отдельные кадры как png-картинки. Для этого можно назначить горячую клавишу Ctrl + S (Save) на команду «Save Frame…».
Дважды кликнем на тексте названия, переименуем регион в «1».
По такой же логике нарежем все остальные микровзаимодействия и пронумеруем их:
Теперь копируем регион 1 и вставим его в новый проект (Cmd + N).
Можно сделать из него ещё одну гифку, нажав Cmd + E (Export). Откроется всплывающее окно с настройками рендера.
В поле Preset выберем Animated GIF. Важно изменить настройки рендера, иначе GIF будет ужасного качества. Для этого заходим в Customize и снимаем галку Dither (сглаживание). Framerate (количество кадров в секунду) можно поставить повыше, 25 достаточно. Делаем экспорт.
Новая гифка сохраняется на рабочий стол, как мы указали в настройках рендера. На этом с монтажом на сегодня всё.
Делать все эти переходы из видео в одном фреймер-проекте было бы катастрофически долго и бессмысленно. Я бы разделил каждое видео на отдельный фреймер-проект. Всегда надо помнить, что цель Фреймера — быстро показать анимацию разработчикам, а не упражняться в красоте кода.
Анимация 1: Свайп-меню и удаление пункта
При нажатии пункт продавливается вниз. Это можно сделать, используя свойство scale со значением в районе .95:
Пример на Фреймере с комментариями
Ещё я вижу интересную деталь справа: вдавленный блок как бы становится прозрачным. На самом деле поверх него накладывается градиент, который идёт от прозрачности в непрозрачный серый. Градиент такого же цвета как глобальный фон, поэтому кажется, что блок уходит в прозрачность. Сделать настоящий уход объекта в прозрачность на Фреймере без дополнительных скриптов нельзя.
Точка невозврата
После прохождения определённого расстояния выдвигается меню с тремя кнопками. Дальше всё зависит от того, где палец отпустит блок.
Если блок перетащили слишком мало, он вернётся на место. Если достаточно, он встанет в положение Меню раскрыто. Точку, в которой происходит развилка, я называю точкой невозврата или порогом. Подробнее о том, как реализовать такую логику, читай в конспекте, начиная со стр. 22.
Очевидно, три кнопки обозначают Редактировать, Поделиться и Удалить. При нажатии Удалить срабатывает анимация ухода блока за экран. Когда он ушёл, по цепочке или по таймеру срабатывает следующая анимация. Нижний блок поднимается на место первого.
Следующий пост этой серии:
Я веду канал Скетч-дизайнер, в котором рассказываю о дизайне интерфейсов в Скетче, горячих клавишах и плагинах. Другие темы: дизайн-системы, вдохновляющие дизайнеры и UI-анимация в Фреймере. Если застрял, пиши в Фреймер-чат.
