1. Блок 1. фон. Глобальна зміна масштабу
2. Блок 2. Аватар
3. Блок 3. Значок Online
4. Блок 4. Projects і Tasks
5. Блок 5. Open tasks
6. Блок 6. Тема: Beatrice і Harris
7. іконка меню
8. Блок 7. Одометри на Hours і Sales
9. Варіант 1: подхалтурить з афтер
10. Варіант 2: Зааніміровать як мультик
11. Варіант 3: Опрацювати логіку
12. Блок 8. Графік
13. Блок 9: Пайчарт
14. Блок 10: Таблиця статистики
15. Перевантаження як візуальний прийом

У цій анімації користувач переходить з екрану Завдання на екран Профіль.

Я заново намальовані дизайн обох цих екранів. Якщо тобі потрібен повний 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. Подхалтурить з афтер
2. Зааніміровать тільки рух спідометра, не чіпаючи логіку
3. Повністю пропрацювати логіку, написавши одометр

Варіант 1: подхалтурить з афтер

Чи не морочитися і вставити одометр як маленький відео-шар в mp4. Зробити його по цього уроку . Плюси: це досить швидкий спосіб, якщо знаєш афтер і потрібен всього один об'єкт. Мінус: без перерендера не вдасться змінювати дані, а значить рішення не масштабується. Це досить швидко виходить з-під контролю: для показу 5 одометрів з різними даними треба рендерить п'ять окремих відео. У качесте прототипу канает, але програмісти помучаться, як це реалізувати на проде.

Варіант 2: Зааніміровать як мультик

Другий - зімітувати рух одометра рухомими шарами, але по мінімуму лізти в логіку. Цифри біжать вгору, маскує прямокутник їх ріже і показує в індивідуальних віконцях. Робимо тільки просту анімацію, яка закінчується, коли шар докрутили до заданого числа. Плюс: це досить швидко реалізувати.

Спеціально для цього поста я написав простий одометр. приклад на Фреймере:

Мінус моєї реалізації: барабан буде крутитися тільки до найближчої заданої ціри, не здійснюючи повний оборот. Дев'ятка ворушиться добре, а одиничка так собі. Змусити його крутитися циклічно і зупинятися за таймером = ускладнювати і втратити час. Догляд в занадто складну механіку суперечить ідеї прототипирования. Якщо час розробки прототипу можна порівняти з часом роботи програмістів над аналогічним завданням, то такий прототип вже нікому не потрібен.

Варіант 3: Опрацювати логіку

Запрограмувати логіку як тато, або інтегрувати готове рішення. Ця опція доступна для профі і саме завдяки тому що він є, Фреймер могутній. Якщо будемо програмувати самі, візьмемо за основу Варіант 2. Чи зможемо ставити значення часу, яке одометр повинен обертатися скільки завгодно оборотів.

Мінус: Це складно і вимагає великого багажу знань. Якщо ніколи не робив нічого подібного, можеш капітально застрягти і витратити багато часу на розбирання з написанням функції, паралельно вивчаючи JavaScript. Це вже не зовсім про анімацію.

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

Створити свою повноцінну функцію для одометра і інтегрувати готові js-модулі - цікаві завдання, але вони не входять в фокус цього поста.

Блок 8. Графік

Графік поміщений в маскує прямокутник і з'являється з нього, рухаючись вправо:

Блок 9: Пайчарт

Під заголовком Statistics розташована велика кругова діаграма (пайчарт). Вона починає проявлятися з кадру 9. Має ті ж самі три варіанти реалізації, що і одометр: вставити з афтер, зробити анімацію без логіки і написати функцію. ось хороший урок , Як зробити пайчарт в афтер.

Блок 10: Таблиця статистики

Всі 4 блоки (offers sent, new clients і інші) висуваються знизу. У цьому появі ми задіємо цикл. Він запустить анімації об'єктів із заданою затримкою. Та ж сама механіка, що в прикладі з заголовком Beatrice Harris, тільки вертикально.

Перевантаження як візуальний прийом

Оскільки людина не може в реальному часі обробляти стільки джерел руху, при перегляді переходу втрачається відчуття контролю за тим, що відбувається. Це зроблено навмисно, щоб склалося відчуття складної анімації. Глядач здатний вловити рух аватара і прояв всієї нижньої частини екрану. Окремі деталі він не помічає.

До цього посту прикладаю приклади, макет в скетчі і шрифт. Завантажити їх можна в телеграм-каналі .

На цьому розбір анімації №2 завершується. Залишилося з усіх цих окремих прикладів зібрати прототип на Фреймере, ніж ми займемося в наступному пості: