Как сделать анимацию за 7 шагов
Содержание:
- Как анимировать текст или объект в презентации
- Основной принцип работы
- Быстрый старт
- CrazyTalk
- Autodesk Maya
- Оглавление
- Как создать анимацию бесстыжего кота?
- GIF из записи экрана
- Как подготовить изображение для анимации
- Программы для создания анимации онлайн
- Как создать анимацию с псевдо-3D поворотом?
- Toon Boom Harmony
- Плавность анимации, Easy Ease
Как анимировать текст или объект в презентации
В качестве разнообразия презентации не обязательно добавлять gif-изображения. Можно отдельно анимировать части текста или объекты.
Для того, чтобы придать тексту или объекту эффект анимации, нужно:
- Выделить левой кнопкой мыши текст или объект, которому хотите придать анимационный эффект.
Выделяем левой кнопкой мыши текст
- Открываем в верхней части программы вкладку «Анимация».
Открываем в верхней части программы вкладку «Анимация»
- Выбираем необходимый анимационный эффект.
Выбираем необходимый анимационный эффект
- Заходим в «Параметры эффектов».
Заходим в «Параметры эффектов»
- Выставляем нужные параметры.
Выставляем нужные параметры
Закрываем программу. Анимационные эффекты добавлены.
Как управлять анимационными эффектами
Анимированными частями презентации можно управлять. Для этого необходимо заранее выставить требуемые настройки во вкладке «Анимация».
Шаг 1. Щелкните по графе «Область анимации», предварительно сделав активным текст или объект с анимационными эффектами.
Щелкаем по графе «Область анимации»
Шаг 2. В правой части страницы щелкните двойным левым кликом мышки по названию анимации в списке, чтобы вызвать блок настроек:
В правой части страницы щелкаем двойным левым кликом мышки по названию анимации в списке
- для запуска анимированного эффекта при переключении слайдов, необходимо выставить параметр «По щелчку» во вкладке «Время» в графе «Начало»;
Выставляем параметр «По щелчку» во вкладке «Время» в графе «Начало»
- для того, чтобы все анимированные объекты запускались синхронно, нужно выставить параметр «С предыдущим»;
Для синхронного воспроизведения анимированных объектов выставляем параметр «С предыдущим»
- для того, чтобы анимационные эффекты запускались по очереди, выставляем параметр «После предыдущего»;
Выставляем параметр «После предыдущего», чтобы анимационные эффекты запускались по очереди
- длительность анимированных эффектов возможно подстраивать под себя с помощью настройки «Продолжительность».
В настройке «Продолжительность» выставляем подходящее значение для воспроизведения анимации
Как добавить несколько анимированных эффектов
Тексту или объекту можно придать несколько эффектов анимации. Для этого необходимо:
- С помощью левой кнопки мыши выделить нужную часть текста или объект.
Выделяем левой кнопкой мыши текст
- Переходим ко вкладке «Анимация» и выбираем «Область анимации».
Переходим ко вкладке «Анимация» и выбираем «Область анимации»
- Нажать кнопку «Добавить анимацию».
Нажимаем кнопку «Добавить анимацию»
- Выбираем необходимый анимационный эффект.
Выбираем подходящий анимационный эффект
- Добавляем еще один анимационный эффект с помощью кнопки «Добавить анимацию».
Выбираем дополнительный анимационный эффект
Как изменить порядок воспроизведения анимации
Иногда требуется четкое воспроизведение эффектов анимации. Для того, чтобы настроить правильную последовательность воспроизведения необходимо:
- Выбираем слайд, на котором необходимо изменить эффекты воспроизведения анимации.
Выбираем слайд, на котором необходимо изменить эффекты воспроизведения анимации
- С помощью мыши выбираем объект, на котором нужно изменить порядок воспроизведения анимации. Переходим на вкладку «Анимация», где выбираем «Область анимации».
С помощью мыши выбираем объект, переходим на вкладку «Анимация», где выбираем «Область анимации»
- Во вкладке «Область анимации» левой кнопкой мыши выбираем анимационный эффект, который хотим переставить. На рисунке показано, как анимационный эффект 1 опускаем под анимационный эффект 3. Отпускаем левую кнопку мыши.
Левой кнопкой мыши выбираем анимационный эффект и перетаскиваем его на нужное место, отпускаем мышку
Перестановка эффектов анимации завершена.
Результат перестановки эффектов анимации
Основной принцип работы
«МультиПульт» позволяет собирать и озвучивать мультфильмы в реальном времени — примерно так, как мы это делаем на наших занятиях и представлениях. Просто нажимаем кнопочки под музыку или под речевое сопровождение… А на выходе получаем готовый видеоролик с мультиком! Для работы с программой весьма желательно иметь соединённый с компьютером или встроенный в компьютер микрофон. Но можно использовать и готовый музыкальный трек. Тогда голос, конечно, не запишешь. А вот мультфильм под музыку или под песню — пожалуйста!
Для того, чтобы создать мультфильм, достаточно выполнить перечисленные ниже шаги. Тут указаны не все, а только основные возможности. Более подробная инструкция пока не написана. Многое можно понять, изучая меню и экспериментируя
Быстрый старт
При работе с внешним звуком (запись звука через микрофон)При записи под компьютерную фонограмму (готовая озвучка)
Загрузить на компьютер файлы с картинками к мультфильму (будем называть их «мультипликат») или нарисовать картинки прямо в какой-нибудь рисовальной компьютерной программе.
Поместить файлы с картинками в папку с запоминающимся названием. Файлы могут лежать непосредственно в основной папке или в других папках, расположенных внутри неё.Папка может быть и пустой! Все кадры можно снять уже в МультиПульте. Но обязательно нужна папке. МультиПульт работает только с папкой — никак иначе.
Открыть программу «МультиПульт».Убедиться, что микрофон работает — справа внизу, в окне программы, от внешних звуков срабатывает индикатор. Если микрофон не подключён — индикатор не работает.При готовой озвучке не обязательно проверять работу микрофона
Перетащить нашу основную папку в окошко открытой программы. То же можно сделать через меню «Файл» выбор папки, в которой находятся наши картинки.После этого надо дождаться, пока программа все изображения прочтёт (это будет видно по линейке кадров).
Понажимать кнопочки на клавиатуре вправо-влево, а также исползовать другие инструменты навигации — посмотреть, как оживает мультик. Если какой-то кадр покажется лишним — дойдя до него нажмите сочетание клавишей Control+Del. Кадр исчезнет с линейки (но в папке останется — не волнуйтесь!)
Репетиция. Включить внешнюю музыку и/или попроизносить текст голосами персонажей, потренироваться нажимать кнопочки под эти звуки.При готовой озвучке
Загрузить готовую озвучку, пользуясь меню «Режим/Загрузить готовую озвучку».Внимание — формат готовой озвучки только «.wav» или «.mp3» другие форматы можно приводить к этим с помощью бесплатной программы Audacity (рекомендуем!). Или любым известным вам конвертором.
Нажать экранную кнопку «Запись» (или нажать клавишу ПРОБЕЛ на клавиатуре).
Под музыку и/или под своё голосовое сопровождение нажимать клавиши со стрелками ВПРАВО-ВЛЕВО на клавиатуре, или другие клавиши навигации.При готовой озвучке
Голосовое сопровождение во время записи использовать не удастся. Зато можно записать голоса заранее, а потом использовать в виде «Готовой озвучки». Рекомендуем для этого бесплатную программу Audacity.
Завершить запись нажатием на ту же экранную кнопку, что и при включении записи (или снова на клавишу ПРОБЕЛ).
Сохранить результат, если он вас устраивает. Меню «Файл/Сохранить как…». При сохранении всегда записывать в ту самую папку, которую обрабатывает МультиПульт. Как правило, именно она и будет Вам предложена, но, на всякий случай, будьте внимательны. Если файл сохранится в другой папке — он не будет работать.
Теперь можно посмотреть, что получилось — нажав на клавишу просмотра. После сохранения можно закрывать программу или начинать работу с новым материалом. В любой момент можно вновь посмотреть (и даже продолжить) запись, выбрав в меню: Файл/Открыть …
Экспортировать результат в видео-файл формата AVI. ВНИМАНИЕ! При работе с программой очень полезно предварительно установить в систему программу сжатия видео (кодек), например вот отсюда: http://sourceforge.net/projects/x264vfw/files/latest/download?source=files.При экспорте в AVI надо выбрать программу сжатия (кодек) x264vfw. Если это первый вызов этого кодека, то надо его настроить: нажать кнопку «Настройки» и поставить галочку Zero Latency — остальные параметры можно оставить как есть. В дальнейшем галочка будет уже стоять и можно будет ничего не трогать.
CrazyTalk
Приложение Crazy Talk
Crazy Talk предназначен для создания 3-D персонажей с функцией речи, которые используются в дальнейшем как на веб-страницах, так и в фильмах и мультфильмах.
Обычное создание говорящего персонажа от начала и до конца занимает приличное количество времени, да и к тому же, требует определенных знаний о работе с трёхмерным моделированием.
Данная программа создана с целью существенно сократить затрачиваемое время до считанных минут. Объединяя утилиты и технологии анимации лица, приложение позволяет легко «оживить» изображение.
Чтобы начать работать с приложением, необходимо загрузить выбранную фотографию в мультипликатор и отредактировать ее с помощью представленных настроек и эффектов.
В программе присутствует функция обрезки лица, выбора угла наклона головы, регулирования контрольных точек лица.
Как только основная работа завершена, персонажу можно добавить разнообразные звуковые скрипты, например, смех, икота, крик, а так же движения, к примеру, моргание, вращение глаз, дыхание.
Если кажется, что за объектом «пусто», есть возможность добавить фон, где может быть изображено что угодно, будь то закат или обычный фон выбранного цвета.
Кроме выбора существующих движений, фонов и звуков можно создать и добавить собственные.
Плюсы:
- удобный интерфейс;
- возможность наделения персонажа «жизнью», добавив ему голос, движение, декорации;
- создание персонажа из собственных файлов.
Минусы:
англоязычное приложение.
Скачать
Autodesk Maya
ссылка на скачивание пробной версии программы: скачать с официального сайта
Программное обеспечение Autodesk Maya является профессиональным инструментом для работы с трехмерными изображениями и анимацией. Программа используется для работы в профессиональных студиях. Можно сказать, что возможности этой программы не ограничены.
Сразу стоит заметить, что Autodesk Maya не подойдет для начинающих, которые хотят создать обычный двухмерный мультфильм, так как имеет довольно сложный интерфейс и требует опыта работы с подобными программами.
Данное программное обеспечение имеет самый большой набор инструментов, и поэтому дает большие возможности в создании мультфильмов и различных анимационных роликов.
Autodesk Maya имеет самый высокий рейтинг по сравнению с подобными программами.
Используя это программное обеспечение, вы получаете возможность создания высококачественной анимации с применением различных текстур. Возможность создания реалистичных объемных моделей и просчета поведения материалов, динамику мягких и твердых тел.
Также в Autodesk Maya можно создавать персонажей с реалистичной анимацией и движениями.
Такое большое количество инструментов и требование к некоторым знаниям не должно пугать начинающих, так как это компенсируется таким же большим количеством обучающего материала.
Инструменты и функции:
- Инструменты работы со звуком.
- Функции подробной работы с текстурами.
- Функция 3D визуализации.
- Флеш анимация.
- Инструменты создания сюжета.
- Инструменты работы с физикой в мультиках.
- Возможность сохранения созданной анимации или мультика в HD качестве.
- Готовый набор объектов и анимации.
- Уникальная коллекция текстур и персонажей.
- Большой набор библиотек.
- Высококачественная визуализация объектов и анимации.
Плюсы:
- большое количество функций.
- реализация полного производственного цикла при создании мультфильма.
- высокая детализация
- различные движки визуализации
- большое количество обучающего материала.
- возможность русификации.
Оглавление
- Как создать анимацию Рика и Морти?
- Как создать анимацию с псевдо-3D поворотом?
- Создание анимации зависшего робота.
- Как создать анимацию чайного пакетика?
- Как создать анимацию рыцаря?
- Как создать анимацию вылетающего ноутбука?
- Как создать анимацию с кроликом на облаке?
- Как создать анимацию пингвина?
- Как создать анимацию погодного переключателя?
- Как создать анимацию с персонажами Gravity Falls?
- Как создать космическую анимацию в Adobe After Effects?
- Как создать анимацию собаки?
- Разбираем домашнее задание.
- Как создать анимацию детского цветочного горшка?
- Как создать анимацию с морфингом?
- Как создать анимацию с маяком?
- Как создать анимацию рыбы?
- Как создать анимацию на тему регби?
- Как создать анимацию кота-повара?
- Как создать анимацию из мультфильма «По ту сторону изгороди»?
- Как создать анимацию с бургером и японскими палочками?
- Как создать анимацию испуганного рулона?
- Как создать анимацию свечек?
- Как создать анимацию псевдо-3D midi-клавиатуры в After Effects?
- Как создать анимацию космонавта?
- Как создать анимацию саксофониста?
- Как создать анимацию с мышью и холодильником?
- Как создать анимацию с медузами?
- Как анимировать самолетик?
- Как анимировать тачку?
- Как создать анимацию с изометрией?
- Как создать анимацию бесстыжего кота?
- Как создать анимацию с НЛО?
01.
Как создать анимацию бесстыжего кота?
По традиции – начинаем с основ, а именно, с рабочих инструментов, создания нового проекта. Автор расскажет, что такое навигация, поделиться различными фишками, которые помогут вам продумать рабочий процесс и оптимизировать его. Также в уроке небольшой обзор основных инструментов и информация о горячих клавишах
Активно используем ключи и таймлайн, работаем со слоями и движением, вносим правки, особое внимание уделяем движению персонажа и деталям
Одновременно с этим автор отвечает на вопросы слушателей вебинара, например, о том, почему для работы необходима именно англоязычная версия программы, а также насколько актуальна сама анимация, в том числе, в качестве профессиональной занятости.
33.
GIF из записи экрана
Licecap
Licecap — программа, которая может записывать экран в формате GIF. Для этого нужно:
1. Указать нужный размер экрана и нажать на кнопку Record.
Укажите размер экрана и нажмите на кнопку Record
2. Указать папку на компьютере, куда нужно сохранить видео, и нажать на кнопку «Сохранить».
Выберите папку, куда сохранится видео, и нажмите на кнопку «Сохранить»
3. Чтобы остановить запись, нужно нажать на кнопку Stop. После этого на экране ничего не произойдёт. Но в папке, выбранной в предыдущем шаге, появится запись экрана в формате GIF.
Остановите запись с помощью кнопки Stop
Плюсы:
- Простой и интуитивно понятный интерфейс.
- Бесплатная программа.
- Не требует подключения к интернету.
Минусы:
Нужна установка программы на компьютер.
ScreenToGif
ScreenToGif — программа со встроенным редактором для записи экрана, видео с веб-камеры или скетчборда. Записанное видео можно сохранять в формате GIF.
Чтобы создать гифку, нужно:
1. Выбрать, откуда нужно записать видео — с экрана, веб-камеры или доски. В качестве примера видео создано из записи экрана.
Выберите, какое видео вам нужно создать — с экрана, веб-камеры или доски
2. Указать нужный размер экрана и нажать на кнопку «Запись».
Нажмите на кнопку «Запись», чтобы начать скринкастинг
3. Нажать на кнопку «Стоп», чтобы остановить запись видео.
Нажмите на кнопку «Стоп», чтобы остановить запись видео
4. После завершения записи автоматически откроется видеоредактор. В нём, например, видео можно повернуть и обрезать, добавить надпись, рамку, тень, фигуру.
С помощью редактора вы можете отредактировать записанное видео
5. Чтобы сохранить видео в GIF-формате, нужно в разделе «Файл» нажать кнопку «Сохранить как».
Сохраните видео в формате GIF с помощью кнопки «Сохранить как»
6. В открывшемся меню выбрать папку, куда гифка сохранится, и нажать на кнопку «Сохранить». Она сохранится на компьютер.
Чтобы сохранить гифку, выберите папку, куда нужно сохранить файл, и нажмите на значок «Сохранить»
Плюсы:
- Простой, интуитивно понятный интерфейс.
- Большие возможности для редактирования GIF. Например, можно вставить водяной знак, рисовать на записи экрана, добавить текст.
- Можно рисовать поверх записанного видео.
- Захватывает любую часть экрана не только в браузере, но и в любом другом месте экрана.
- Бесплатная программа.
- Не требуется подключения к интернету.
- Есть записи гифок с веб-камеры.
- С помощью встроенного инструмента «Белая доска» можно создавать собственные рисунки и записывать их в GIF.
Минусы:
Как подготовить изображение для анимации
GIF является не очень хорошо оптимизированным форматом, файлы такого формата могут весить очень много. Вот почему нам необходимо обрезать наше изображение, чтобы оставить только важные элементы, в нашем случае это глаза. Откройте изображение в Photoshop, при помощи инструмента Crop Tool (C) (Рамка) вырежьте ту часть изображения, которую хотите анимировать. Затем нажмите Enter.
Мы хотим анимировать глаза, поэтому нам нужно отделить их от остальной части изображения. В Photoshop имеется много способов выбрать какой-нибудь элемент, но я покажу вам самый быстрый.
Перейдите в меню Select > Color Range (Выделение – Цветовой диапазон). Выберите вторую пипетку со знаком «+» и кликайте по оттенкам глаз на изображении, пока не увидите, что они окрасились в белый цвет в предварительном просмотре.
Мы выбрали все жёлтые тона, но некоторые из них выделились и в сером меху животного. Чтобы исключить их, поиграйте с ползунком Fuzziness (Разброс), пока вокруг глаз области не станут чёрными
Очень важно сохранить все области, кроме глаз, полностью чёрными
После того, как вы нажмёте OK, будет создано выделение. Оно получилось не совсем идеальным. Перейдите в меню Select > Refine Edge (Выделение – Уточнить край) и используйте эти настройки, чтобы сделать выделение более точным. Поставьте галочку возле опции Smart Radius («Умный» радиус) и поиграйте с параметрами Smooth (Сглаживание) и Feather (Растушевка), пока не достигните нужного результата. После этого нажмите OK.
Скопируйте выделенную область на новый слой Ctrl + J.
И последнее, что нам осталось сделать на данном этапе это уменьшить размер изображения. Для этого перейдите в Image > Image Size (Изображение — Размер изображения) и уменьшите размер своего изображения (до разумного).
Программы для создания анимации онлайн
Помимо стандартных бесплатных программ для создания анимации на русском языке, существуют онлайн-сервисы, не требующие загрузки софта на компьютер
Обратите внимание, что многие подобные площадки оставляют на изображении водяной знак или отметку со своим логотипом, которые невозможно удалить
GifPal
Это бесплатный сервис с большим набором полезных инструментов. Для работы с проектом вам понадобится только доступ к интернету и наличие фото, из которого будет составляться гифка. Функции и инструменты софта:
- регулировка яркости, контраста и насыщенности изображений;
- большой выбор эффектов и фильтров;
- возможность использовать до 20 слайдов.
Главный плюс — отсутствие водяного знака на готовой гифке.
UnFREEz
Очень простой и понятный сервис, который подойдет даже новичкам. Это приложение позволяет быстро создавать простые гиф-анимации без дополнительного набора свойств.
Video to GIF
Софт для быстрой разработки зацикленного видео (по аналогии с Boomerang) без звука. Дополнительные особенности — большое количество фильтров, простая навигация и возможность импортирования видео из личной галереи. Picasion. Этот сервис отличается возможностью работы на нескольких языках, включая русский. Вы можете импортировать изображения из своей галереи и создавать уникальные анимированные гифки с помощью расширенного функционала сервиса. Из минусов можно выделить большое количество рекламы, которое мешает спокойной работе с сервисом.
Makeagif
Современный сервис с приятным интерфейсом и простым функционалом. Делать гиф очень просто: загрузите изображения и видео из галереи или воспользуйтесь импортом контента из социальных сетей. Простая гиф-картинка будет готова через несколько минут.
Программы для анимации онлайн — это отличное решение для тех, кто не хочет перегружать память компьютера и редко пользуется утилитами для созданию GIF.
Как создать анимацию с псевдо-3D поворотом?
В уроке много внимания уделяется подготовительному этапу. Автор создал на основе референса собственную анимацию с псевдо-эффектом, которую затем поэтапно разбирает в уроке. Вы поймете, почему важен подготовительный этап и как он протекает, как превратить набросок в полноценный объект и многое другое.
Кроме того, в процессе вы будете использовать новые инструменты – линейки, пропорциональную сетку и лупу. С их помощью вы научитесь определять центр листа. Автор также расскажет о том, что такое шаг анимации, как подсчитать количество кадров в секунду, как посмотреть параметры другого файла в программе.
Благодаря уроку вы узнаете о новом подходе к анимации, сможете создавать оригинальные гифки, в том числе, для коммерческих проектов.
03.
Toon Boom Harmony
ссылка на скачивание пробной версии программы: скачать с официального сайта (для скачивания необходима регистрация на сайте)
Это программное обеспечение было выпущено канадской компанией Toon Boom, которая занимается производством и поддержкой программ для создания анимации. Продукцией этой компании пользуются такие студии как: Walt Disney Animation Studios, Warner Bros. Animation, China Central Television и многие другие популярные студии.
Toon Boom Harmony – является самым мощным и передовым продуктом компании. Программа обладает большим количеством инструментов и функций, которые облегчают и ускоряют работу над мультфильмами и созданием анимации.
Данная утилита несомненно является лидером среди анимационного программного обеспечения. Достаточно сказать, что с помощью данного программного обеспечения были созданы такие шедевры как «Русалочка» и «Король лев».
Программа имеет функции для работы с 3D анимацией, но все-таки она больше подходит для создания качественных и профессиональных мультиков в двухмерном формате.
Стоит заметить очень полезную и нужную функцию True Pencil, которая позволяет оживить изображение, задать точки и полностью его анимировать.
Toon Boom Harmony имеет множество функций, которые позволяют одновременно работать над одним проектом сразу нескольким художникам и аниматорам находящимся в разных местах. В программе реализованы все наборы профессиональных приложений, которые дают возможность работать по сети.
Из-за такого большого набора инструментов и мощного функционала программа является довольно требовательной к аппаратной части компьютера, а именно к производительности видеоадаптера. Поэтому если вы решитесь углубиться в эту сферу и работать с программой Toon Boom Harmony, тогда стоит задуматься о покупке либо апгрейде вашего компьютера под эти цели.
Инструменты и функции:
- Инструменты работы со звуком.
- Настройка анимации и синхронизации речи со звуковыми дорожками.
- Возможность захвата картинки с подключенных камер.
- Возможность отслеживать перемещение объектов на заданных точках.
- Инструменты преобразования 2D элементов в 3D.
- Наличие уже готовых алгоритмов мультипликации.
- Готовый набор объектов и анимации.
- Уникальная коллекция текстур и персонажей.
- Технология True Pencil.
- Возможность сохранения созданной анимации или мультика в HD качестве.
- Высокая степень интеграции со всеми приложениями, выпущенными компанией Toon Boom.
- Костная анимация.
- Имеется поддержка роликов Flash и расширенная модификация Toon Boom Studio.
- Обилие встраиваемых спецэффектов.
- Функция, обеспечивающая совместную работу над одним проектом нескольким пользователям одновременно.
- Функции создания сюжетной линии.
Плюсы:
- поддержка нескольких методов создания анимации
- отличный функционал.
- Огромный набор дополнительных приложений.
- Возможность работы по сети.
- Наличие документации, обучающих видео и форумов по работе с программой.
- Возможность русификации.
Минусы:
- требовательность к ресурсам компьютера.
- сложный интерфейс для новичков.
- нет бесплатной версии.
- плохая реализация создания трёхмерных мультиков и анимации.
Плавность анимации, Easy Ease
Поработаем над плавностью анимации. Выделите все ключевые кадры и нажмите F9 для того, чтобы мы могли корректировать график Easy Ease.
Ключевые кадры перестали быть ромбиками и превратились в значки похожие на песочные часы. Это значит что мы их перевели в режим Easy Ease.
Но перед тем как редактировать графики, продублируйте еще несколько кадров. Эти кадры добавляют микроанимацию на выходе. С ней бургер-иконка смотрится более живо и гармонично. Перейдите на слой Null1 скопируйте ключевой кадр, который находится на десятом кадре второй секунды, и вставьте его на 20-й кадр второй секунды. Значение свойства Rotation укажите 190°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation –45°. Вот так:
Перейдите на слой Null1, скопируйте ключевой кадр, который находится на десятом кадре третьей секунды, и вставьте его на 20-й кадр третьей секунды. Значение свойства Rotation укажите 0°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation 0°. Вот так:
Выделите три ключевых кадра, как показано ниже, и нажмите на иконку графика Easy Ease, он также указан на скрине.
Теперь настройте кривую, как показано ниже, пользуясь желтыми манипуляторами точек.
Пример настройки графика:
Протестируем.
То же самое проделайте для нижнего прямоугольника.
График нижнего прямоугольника.