Анализ UI-анимации №2: Бесшовный переход между экранами

Научись разбирать UI-анимацию в монтажной программе

В этой анимации пользователь переходит с экрана Задачи на экран Профиль.

Я заново отрисовал дизайн обоих этих экранов. Если тебе нужен полный Merge UI-kit, его можно купить на сайте UI8. Наиболее близкий шрифт, который используется в этом дизайне — Titillium. Девушку на автар нашёл в Гугле по запросу girl face. В конце поста ищи примеры, макет и шрифт.

Этот переход завязан на тех богатых возможностях, которые даёт анимация на ключевых кадрах в After Effects. Хотя, во Фреймере кардинально другой подход, почти всё из увиденного можно сделать и в нём. Как и любую другую гиф-анимацию, разбирать этот ролик лучше при помощи монтажной программы ScreenFlow. Анализирую от общего к частному и выделяю движущиеся объекты. Начинаю всегда с триггера — действия, инициирующего анимацию. Здесь триггер это нажатие на аватар.

Проанализируем каждый блок по отдельности.