Motion гайд

При разработке анимации руководствуемся 3 основными принципами:

Анимация логотипа возможна двумя путями: сборка элементов в 1 плоскости и в повороте.

Анимация логотипа «Плоская»

• Фокус всегда на основных действиях, элементы анимируются последовательно и с ускорением.
• Используется для логошотов на весь экран в начале видео.
• Используется в составе анимированных макетов с бенто-модулями.
• Используется в составе анимированных макетов с интернациональным типом верстки макета.

Анимация логотипа «Объемная»

• Анимация логотипа «Объемная»
• В случае поворота в изометрии так же соблюдаем правило поступательности и ускорения.
• Используется для логошотов на весь экран в начале видео.
• Используется в составе анимированных макетов с бенто-модулями.

Анимация лого может размещаться как на черном / белом фоне, так и непосредственно на фото и видео (в этом случае важно следить за гармонизацией движения элементов лого и видео). У каждого из 2 видов логошота есть более короткая версия.

1. Анимация «Плоская. Строки». Основная

• Строчки появляются поступательно.
• Анимация появления строчек возможна по горизонтали или по вертикали.
• Видимый путь анимации появления текста всегда должен быть меньше 30% от самой большой стороны макета.

Где применяется:

• Самый основной прием, который сочетается со всеми типами макетов.

2. Анимация «Объемная. Шторки». Основная

• Строчки появляются поступательно.
• Каждая строка появляется с помощью разворота в 3D.
• Анимация появления строчек только по вертикали.

Где применяется:

• Дополнительный прием для обогащения динамики в макетах.
• Избегаем поворота текста в 3D, если все остальные элементы композиции тоже поворачиваются.

Настройки анимации основной типографики см. в составе исходников мастер-макетов.

Используются для разнообразия в рамках роликов. Такую анимацию применяем только к текстам, размещенным крупно в кадре и не заключенным в рамки бенто-модуля.

3. Анимация «Плоская. Набор текста»

• Текст набирается приемом печатания, можно также добавлять розовую точку в конце сообщения (точка не наборная, розовый элемент логотипа).

4. Анимация «Объемная. Поворот»

• Уникальная анимация поворота текста в 3D вокруг своей оси.
• Такой прием — один из примеров, как можно разнообразить анимации со сменой плоскости (3D).

С анимацией титров можно ознакомиться в составе Showreel.

В рамках анимации композиций выделяем 3 аспекта:

• сборка композиций с бенто-модулями;
• сборка композиций с интернациональ-ным типом верстки;
• переходы от композиции к композиции.

Композиция из бенто-модулей
Крупные элементы бенто собираются в одной плоскости экрана: модули ритмично меняют свой размер, вставая на нужное место.

Для акцентных элементов вводим смену плоскости — поворот в 3D, чтобы еще больше подчеркнуть динамику, ритм и уникальность стилистики.

Поворот в 3D может быть не толькоу бенто-модулей, но и у типографики. Также можно использовать объемную прорисовку логотипа (см. Логошоты), если логотип не располагается в отдельностоящем бенто-модуле.

Квадратный бенто-модуль
Идеальная форма для поворота и превращения в куб с разным контентом на его сторонах.

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

Композиция из бенто-модулей
Крупные элементы бенто собираются в одной плоскости экрана: модули ритмично меняют свой размер, вставая на нужное место.

Для акцентных элементов вводим смену плоскости — поворот в 3D, чтобы еще больше подчеркнуть динамику, ритм и уникальность стилистики.

Поворот в 3D может быть не толькоу бенто-модулей, но и у типографики. Также можно использовать объемную прорисовку логотипа (см. Логошоты), если логотип не располагается в отдельностоящем бенто-модуле.

Квадратный бенто-модуль
Идеальная форма для поворота и превращения в куб с разным контентом на его сторонах.

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

Бенто-модули с кнопкой
Форма кнопки меняет свой размер и становится в финальную композицию. Настройки анимации кнопки подобны настройкам анимации бенто-модуля в 2D.

Пример дополнительного акцента на кнопке — поворот кнопки в 3D, смена ее цвета после поворота (кнопка становится будто «активной»). Такой прием особенно хорошо встает на узкие вертикали и горизонтали, но применяться может для форматов с любой пропорцией.

Интернациональная верстка
Для такого типа верстки поворот применяется к модулю с фото и модулю-квадрату.

Уместно как отдаляться от крупного фото-блока в начале хронометража, так и влетать в этот блок в конце.

Через поворот модулей можно также сменять контент внутри них.

В таком типе верстки самые крупные элементы поворачиваются, поэтому делать поворот типографики излишне. Таким образом сновной прием анимации типографики — только плоский.

Если в формате мало места для поворота большого модуля вокруг своей оси, то поворачиваем только квадратный бенто-модуль.

Переход от композиции к композиции может быть двух видов:
① смахивание / вымещение;
② смена «карточек» в 3D.

Примеры базовых пэкшотов с бенто. В пэкшоте анимацию логотипа размещаем крупно, поверх видео / фото.

Бенто-модули могут варьироваться исходя из задач конкретного ролика, принципы их анимации подчиняются общим принципам сборки бенто-композиций.

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

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

Анимация иллюстраций должна дополнительно раскрывать сюжет. Когда в сюжете не заложена смысловая динамика, акцент можно сместить на игру светотени (ее смещение, выгодно подчеркивающее форму) и легкое ритмичное движение объекта.

В случае анимации 3D объектов можно создавать сюжеты c левитацией и со светом (особенно цветными акцентами света).