8 лучших инструментов для легкого создания анимированных фотографий

На компьютере

Хотя сделать гифку из видео позволяет большинство современных программ для работы с клипами, наилучшего результата можно достичь, используя специальное приложение — QGifer. Распространяется оно совершенно бесплатно; главный минус программы — лёгкое устаревание.

Чтобы создать гифку из видео с помощью QGifer, пользователь должен:

Скачать (ссылка — sourceforge.net), установить и запустить приложение. С целью облегчения работы — открыть меню View.

И выбрать в подменю Language русский язык.

В разделе «Меню» найти пункт «Открыть видео».

На вкладке «Предпросмотр» панели «Инструменты» установить количество кадров в секунду — рекомендуется оставить значение по умолчанию.

Определить масштаб воспроизведения.

И задать способ зацикливания видео — лучше всего остановиться на варианте «Полностью» или «Выбранный участок».

На вкладке «Границы» — указать, должна ли программа добавить чёрные поля вокруг картинки и какой именно толщины.

На вкладке «Фильтры» — включить отображение вносимых изменений при предварительном просмотре.

А затем — настроить «теплоту» видео.

Его насыщенность.

И яркость.

Чтобы вернуть значения по умолчанию, достаточно воспользоваться кнопкой «Сброс».

Кроме того, здесь пользователь может установить степень размытия — результат мгновенно отобразится в поле предпросмотра.

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

Если требуется, сделать это можно покадрово — на вкладке «Выходной файл».

Здесь же юзер легко установит размер кадра гиф-анимации (рекомендуется отметить галочкой чекбокс «Сохранять пропорции»).

И задать битность рисунка — чем она выше, тем лучше будет качество на выходе, но и больше размер GIF.

С помощью меню «Редактировать», выбрав опцию «Вставить объект».

Юзер сможет добавить к создаваемой гифке любую картинку — например, свой логотип.

Опция «Вставить текст» позволяет.

Добавить к гифке любую надпись.

Настроить её можно так же, как было описано в предыдущем разделе.

Почти всё. Пользователю остаётся нажать на кнопку «Извлечь GIF».

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

Если в окошке с результатом присутствуют лишние детали (например, ранее добавленные изображения), их можно убрать, сняв галочку «Объединить объекты» на вкладке «Фильтры» и удалив каждый элемент по отдельности.

В заключение пользователю остаётся выбрать пропуск кадров — это поможет оптимизировать гифку для показа в Интернете.

Рекомендуется оставлять в гиф-анимации от каждого второго до каждого пятнадцатого кадра. Вот и всё — теперь нужно нажать на кнопку «Сохранить».

И определить каталог выгрузки гифки.

Результат представлен на рисунке ниже; как можно видеть, полученная GIF качественно отображается и лишена главного недостатка предыдущей — стороннего логотипа.

Создаём простые анимации

Анимация первая

Давайте сделаем блок, который будет реагировать на клик. Для этого сначала определим div в окошке HTML.

Что такое div? Это тег, который группирует другие элементы HTML, объединяет несколько объектов — например, блок новостей. Сейчас у нас это будет просто квадрат. Назовём мы его box, а определим вот так:

Это всё, что нам сейчас нужно от окошка HTML, и мы можем перейти к следующему — CSS. В нём мы опишем, как же будет выглядеть наш div. Пусть это будет красный (red) квадрат со сторонами по 300 пикселей; для этого мы должны задать ширину (width) и высоту (height) такого размера.

Если вам больше нравятся голубые прямоугольники, то просто увеличьте ширину (или высоту) и измените цвет фона (background) на blue.

Теперь мы перейдём в столбик JS и анимируем наш div.

Сначала мы отметим для JavaScript, с каким именно блоком будем работать, а потом — при каком действии будет происходить анимация и какая:

1. $(».box») ищет элемент с классом box;
2. .on (‘click’, определяет, когда произойдёт анимация (в нашем случае — при клике);
3. function () описывает саму анимацию — мы напишем эту функцию в фигурных скобках.

Важный момент: мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его как this.

Мы использовали функцию hide (спрятать), и теперь наш квадрат исчезнет, если на него кликнуть.

Есть ещё пара похожих функций: это slideUp () и fadeOut (). Во всех случаях наш объект исчезнет. В чём же разница?

Если мы используем slideUp, то наш квадрат как бы отъедет вверх, а если fadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.

Чтобы регулировать время анимации, напишите его в скобках за функцией, вот так:

ПОМНИТЕ!

Время в JavaScript указывается в миллисекундах, так что 3000 — это на самом деле всего три секунды.

Анимация вторая

Теперь мы воспользуемся функцией animate (), которая даёт больше простора для творчества. В ней вы можете сами определить, как изменятся параметры вашего объекта.

Например, мы хотим, чтобы при клике наш квадрат расплывался в прямоугольник с шириной 500 пикселей, при этом становился бледнее (в нашем случае — 0,3 от изначальной яркости), и чтобы всё это длилось четыре секунды.

Для этого в фигурных скобках за функцией мы зададим ширину (width) 500px, а непрозрачность (opacity) —.3. За фигурными скобками напишем время анимации.

Вот и всё!

Улучшение анимации, добавление микроанимации

Так что же тут не так? Давайте подумаем. Все верно — прямолинейно, избито, неинтересно. Попробуем поработать с этим и сделать хорошо. На самом деле допиливать и дорабатывать анимацию можно до бесконечности, все зависит от ваших знаний, умений и желаний.

Я выберу три приема которые помогут улучшить анимацию: добавлю разворот на 180°, микроанимацию и Easy Ease. «Сглаживание анимации» (Easy Ease) — это одна из тех особенностей, за которую так любят After Effects.

Для того, чтобы развернуть все прямоугольники на 180° в процессе анимации, не обойтись без Null Object. Это слой без видимых свойств, но он умеет все, что умеют обычные слои. В нашем примере мы используем его, чтобы связать с иконкой и назначить свойство вращения на 180°. Создать новый слой с Null Object можно так:

Или так:

Привяжите все наши прямоугольники к слою Null Object. Сделать это можно двумя способами:

1. Кликните курсором мыши на значке спирали в столбце Parent панели слоев и, удерживая, перетащите на слой Null Object. Так нужно сделать с каждым слоем, который мы хотим привязать.

2. Выбрать в выпадающем списке столбца Parent панели слоев — Null Object.

Выделите слой Null Object, в моем случае слой называется Null1. Выберите свойство Rotation этого слоя. Установите ключевые кадры, как показано на скрине, со значением 0° первого кадра и значением 180° второго кадра.

Продублируйте эти кадры и выберите Time-Reverse Keyframes, как показано на скриншоте.

Посмотрим, что получилось:

Теперь продублируйте ключевой кадр свойства Rotation верхнего прямоугольника, как показано на скрине.

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

Укажите значение Rotation 53°.

Способ №1. Создание анимации в PowerPoint: основные возможности

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

Создание проекта

Для начала нам потребуется создать новый проект или открыть существующий. После этого в разделе «Вставка» встройте новые элементы. Для нашего примера в проект были добавлены заголовок через инструмент «Надпись» и векторное изображение через пункт «Рисунки». Так мы сможем наглядно показать, как сделать анимацию текста и картинки в презентации.

Подготовка элементов для анимации

Как анимировать элемент

Готовые шаблоны находятся во вкладке «Анимация». Чтобы применить шаблон, выделите объект и кликните по кнопке «Добавить анимацию». Все варианты поделены на 4 категории:

• Вход. Изменяет то, как предмет появляется в кадре.
• Выделение. Применяется к объекту, который уже находится на странице.
• Выход. Эффекты «удаления» элемента из кадра.
• Пути перемещения. Аналогично выделению, но при этом объект движется по строго определенной траектории.

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

Настройка анимации

В данном случае на заголовок наложилось 2 эффекта: выцветание (вход) и появление (выход). Они обозначены возле измененного объекта цифрами 1 и 2 соответственно. Также мы применим быстрое появление к изображению, чтобы сделать анимированную картинку в PowerPoint и заставить самолет пролетать через весь кадр.

Измените настройки

Кликайте по цифрам, чтобы вызвать настройки. Они находятся в верхней панели инструментов:

• Параметры эффектов. Устанавливает траекторию движения. Количество настроек зависит от типа движения.
• Область анимации. Переопределяет, к какому объекту применен шаблон.
• Триггер. Определяет, по какому действию будет запущено действие. По умолчанию появляется автоматически, можно присвоить запуск по щелчку.
• Запуск. Здесь дополнительно устанавливаются параметры старта по щелчку. Можно установить запуск всех объектов сразу или по очереди.
• Длительность. Продолжительность эффекта влияет на скорость: чем выше показатель, тем медленнее движется объект.
• Задержка. Определяет, после какого отрезка времени после начала запускается движение объекта.
• Изменить порядок. Этот параметр назначает последовательность запуска объектов. По умолчанию первым идет тот, которому в первую очередь был присвоен эффект.

После настроек самолет начнет движение через экран

Регулируя свойства «Параметры эффектов», обратите внимание, что в случае с картинкой движение начинается от того места, где находится изображение. То есть в данном случае, когда самолетик находится у левого края, он оттуда и стартует

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

Сохраните презентацию

Фактически, на этом создание анимации в PowerPoint заканчивается. Остается сохранить слайд-шоу в подходящем формате. Для этого нажмите «Файл» и кликните «Сохранить как». В итоге мы получили такой результат:

Пример готового анимированного слайда

Следует отметить, что управление в PowerPoint не очень интуитивное и почти полностью исключает пользовательские сценарии. Элементы нельзя настроить так, чтобы он начинали движение в нужное время. Также огорчает, что путь перемещения нельзя установить самому, а также вручную указать желаемое время окончания и скорость.

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

Сторонние программы

Существует много видео-редакторов, которые позволяют сделать мультфильм из фигурок. Будь-то:

• Movavi Video Edition,
• Moho
• Toon Boom Harmony.

Суть заключается в том, чтобы поочередно зафиксировать положение объектов, а потом объединить их в один видеоряд с добавлением эффектов и переходов. Весь процесс подготовки кадров можно превратить в игру, которая будет интересна ребенку. Он будет играть с любимыми игрушками, а родители будут фотографировать различные моменты. А потом из хаотичного набора картинок можно создать небольшой фильм.

Однако существуют и более профессиональные программы, которые позволяют создавать правдоподобные модели и сложную анимацию. Одной из них является Autodesk Maya. Подобные приложения требуют от пользователя серьезных навыков работы в 3д пространстве, а также художественные задатки, для создания реалистичных объектов.

Как сделать анимацию в PowerPoint 2013/2016?

Последние версии PowerPoint анимируют практически любой объект. Это дает широкий простор для творчества. Но для начала необходимо овладеть базовыми навыками.

Добавление эффекта анимации

Анимирование любого неподвижного объекта, в том числе и текста, предполагает 4 шага.

1. Выделите объект, который желаете анимировать (вокруг него должны обозначиться маркеры изменения размера).
2. На вкладке «Анимация» кликните «Добавить анимацию».
3. Выберите желаемый эффект.
4. Определите параметры эффекта.

Выбирая эффекты, помните, что некоторые из них доступны исключительно как анимация текста в PowerPoint. Это касается таких эффектов, как «Кнут», «Волна», «Падение» и ряда других.

Чтобы добавить к уже существующей анимации дополнительный эффект потребуется выполнить 3 последовательные действия.

1. Нажмите «Добавить анимацию».
2. Отметьте нужный эффект.
3. Кликните пункт «С предыдущим» в разделе «Область анимации».

Совет! Убедитесь, что в настойках слайд-шоу не стоит отметка «Без анимации». Если она установлена анимация не будет воспроизводиться во время показа слайд-шоу, а лишь при предварительном просмотре. А значит, все старания пойдут насмарку.

Запуск эффектов

PowerPoint предлагает 3 варианта запуска эффектов:

• «по щелчку» (эффект включается после щелчка по слайду);
• «с предыдущим» (запуск происходит в одно время с предыдущим эффектом);
• «после предыдущего» (эффект воспроизводиться по завершению предшествующей анимации, при этом нет необходимости что-либо щелкать).

Если всех эффектов анимации достаточно, то от варианта «по щелчку» лучше отказаться. Его использование требует больше времени, что повышает риск распыления внимания докладчика.

Рассмотрим, как сделать анимацию картинки в PowerPoint, используя один из вышеуказанных вариантов запуска.

1. Выделите эффект, который будете редактировать.
2. Во вкладке «Анимация» кликните «Начало».
3. Выберите требуемый показатель.

Определение порядка показа эффектов

Определить порядок, в котором будет проходить показ эффектов, поможет следующая инструкция.

1. Нажмите «Анимация» > «Область анимации».
2. Выделите эффект, который не стоит на своем месте в порядке анимации.
3. В пункте «Изменить порядок анимации» выберите «Переместить вперед» или «Переместить назад».

Вышеупомянутыми командами можно пользовать несколько раз подряд.

Скорость показа эффектов

В данном случае понадобиться параметр «Длительность». Пользоваться им очень просто.

1. Выделите эффект, который будет редактироваться.
2. В поле «Длительность» введите требуемое число с помощью клавиатуры.

Минимальная длительность показа составляет 0.01 с, а максимальная – 59 с.

Стоит упомянуть и о параметре «Задержка», определяющем отрезок времени перед включением конкретного эффекта. Данный отрезок времени стартует после завершения предыдущего эффекта или после дополнительного клика.

Как удалить анимацию в PowerPoint?

Когда объекту присваивается эффект анимации, возле него возникает маленькая числовая отметка. Она подтверждает наличие эффекта и обозначает его позицию в порядке анимации на конкретном слайде. Данное обозначение можно использовать для удаления анимации. Каким образом?

1. Выберите цифру возле ненужной анимации.
2. Нажмите «DELETE».

Переводим видео в GIF в программе на ПК

Лучше всего использовать софт для компьютеров. Он позволит не только переформатировать, но и обработать контент, применить эффекты и изменить параметры экспорта. Также программы не зависят от интернет-соединения и не имеют ограничений по объему загружаемых файлов.

ВидеоМАСТЕР

Приложение для конвертации и обработки видеороликов. ВидеоМАСТЕР поддерживает более 500 медиаформатов, предлагает готовые профили экспорта и позволяет сжимать клипы. Перед конвертированием можно применить эффекты к визуальному ряду, обрезать лишние фрагменты, выполнить автокоррекцию уровней и изменить скорость воспроизведения.

Чтобы оформить GIF, запустите конвертер и выполните следующие действия:

1. Загрузите медиа. Нажмите на кнопку «Добавить» и выберите тип импорта. Вы можете указать медиафайл с жесткого диска, записать ролик с веб-камеры или скачать его из интернета.
2. Обработайте видеоклип. Перед переформатированием можно применить эффекты. Для этого воспользуйтесь соответствующей кнопкой. Вы можете использовать предложенные фильтры, поместить текстовый слой и логотип, провести ручные улучшения и повернуть картинку. Обрабатывать аудио в клипе с музыкой не требуется, так как при переконвертации звук будет отключен.
3. Конвертируйте видеофайл. На верхней панели найдите иконку «GIF». Вы можете обрезать видеоряд — для этого перетащите черные ползунки в новое место. Кликните «Далее» и установите размер изображения. Потом укажите желаемую частоту кадров, скорость и количество повторов. Тапните «Создать».

️ Плюсы:

• встроенные эффекты;
• удаление лишних отрывков;
• изменение FPS и скорости воспроизведения;
• поддержка популярных форматов;
• стабилизация и поворот видеодорожки;
• интерфейс на русском языке;
• работа на слабых устройствах.

Минусы:

Настройка ключевых кадров

Инструмент анимирования Movavi позволяет тонко настраивать процесс, управляя им. Например, можно настроить ключевые кадры. Для чего они нужны, мы уже выяснили. Теперь перейдем к отладке. Чтобы запустить режим корректировки, следует выполнить двойной клик по точке. Далее допускается перемещать анимированную вставку так, чтобы она заняла требуемое положение. Кроме того, доступны действия:

Изменение размера. Для этого тянут за углы рамки, выполняя растяжку объекта.

• Поворот. Нужно потянуть за верхнюю точку рамки объекта (устанавливают угол поворота на панели инструментов).
• Задание степени прозрачности. Так будет активирован эффект постепенного возникновения вставки (затем так же плавно исчезнет).
• Скорость. Параметр устанавливает темп процесса анимации. Меняется в зависимости от расстояния между точками. Чем меньше, тем быстрее движение объекта.

Наибольший угол поворота за один кадр не может превышать параметра в 180 градусов. Это нужно помнить, управляя данным режимом.

Создать gif онлайн быстрее, чем оффлайн.

Когда человек задается вопросом «как создать gif анимацию», то он, как правило, находит в Интернете множество вариантов программ, которые надо скачивать на компьютер, устанавливать, разбираться в них и так далее. В результате, через пару часов он все-таки получает не только нужную анимацию, но и головную боль, красные глаза и плохое настроение.

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

Какие инструменты нам понадобятся

Для работы нам понадобится библиотека jQuery (откуда её взять — расскажем чуть ниже).

Она используется на большинстве сайтов, потому что у неё много плюсов:

• дружелюбный интерфейс;
• она решает не только проблему анимаций, но и множество других;
• работает на всех браузерах;
• к ней много расширений и плагинов;
• большое комьюнити (если у вас будут вопросы, то вы быстро найдёте на них ответы).

Сегодня мы будем работать в онлайн-редакторе CodePen. Для этого не придётся ничего устанавливать, достаточно перейти по ссылке CodePen и нажать на кнопку Start Coding. Если у вас уже есть любимый редактор, вы можете использовать его.

У вас откроется рабочее пространство с тремя колонками: HTML, CSS и JS (JavaScript):

Теперь нажмём шестерёнку возле JS — на экране появится окошко с настройками. Через строку поиска найдём там jQuery:

Anchor Point

Anchor Point — это опорная точка объекта, поворот (Rotation) и масштабирование (Scale) выполняются вокруг этой точки. При создании шейпового слоя (Shape Layers — фигурные слои, для анимации векторной графики) по умолчанию Anchor Point располагается в центре слоя и имеет нулевые координаты X, Y, но будьте внимательны и всегда проверяйте расположение Anchor Point. Если точка находится за пределами объекта, расположите ее по центру.

Для этого выделите слой с прямоугольником и нажмите на инструмент Anchor Point, затем мышкой передвиньте эту точку в центр прямоугольника, вот так:

Для чего все это нужно? Покажу на примере. Я разместил два прямоугольника на одной плоскости, у одного прямоугольника Anchor Point расположен по центру, у другого чуть ниже.

Теперь повернем прямоугольники на 360°.

Думаю, разница очевидна.

Вернемся к созданию нашей иконки. Перейдите в панель слоев, выделите прямоугольник и нажмите два раза на Ctrl+D, тем самым вы создадите две копии этого прямоугольника.

Сдвиньте прямоугольники таким образом, чтобы получилось бургер-меню. Как вариант, зажмите Shift и стрелками вверх и вниз сместите прямоугольники, как показано на скриншоте.

Программы для анимации на компьютере

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

Easy Gif Animator

При помощи этого приложения можно создавать анимированные баннеры, гифки и видео. Есть возможность создать анимацию с нуля, нарисовать все самостоятельно. Или использовать видео в качестве картинки. Интерфейс программы напоминает популярную Paint.

При кажущейся простоте интерфейса есть уже встроенная библиотека спецэффектов, движений. Есть возможность добавить музыку и текст. Кроме этого можно изменить интервал между кадрами, регулируя длину конечного видео.

Готовый ролик можно сохранить на компьютер в различных форматах.

Pivot Stickfigure Animator

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

Отличный вариант попробовать свои силы начинающим в анимации. Программа не сильно нагружает систему.

Pencil 2D

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

Можно создавать анимацию, добавляя видео с камеры, звук, комбинируя различные изображения. Для создания ролика достаточно определить ключевые моменты в анимации.

Есть возможность настроить интерфейс программы индивидуально. Подобрать длительность кадров, звук, слои изображений.  Так как анимация покадровая, то редактировать нужно каждый слайд.

Гораздо удобней использовать для работы графический планшет со специальным пером для рисования. Это дает возможность качественней прорисовывать все персонажи. Готовый проект можно сохранить в разных форматах на своем компьютере.

Blender

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

Все необходимые плагины уже встроены в программу. Кроме этого все материалы можно сохранять в один файл без дополнительной обработки. Сама программа занимает мало места на компьютере.

Почему работает анимация на ютуб

Возможно, вы думаете: “Но подождите. Я знаком с десятком руководителей. Это серьезные люди. Они не станут смотреть анимационные видео. Но правда в том, что ютуб анимация работает.

Подумайте о том, какой тип видео вы бы предпочли посмотреть:

1. Очередная говорящая голова, которая может быть нанятым актёром, а не представителем компании.
2. Или веселый мультипликационный ролик, который воплощает в жизнь с запоминающейся музыкой и симпатичным персонажем.

Причина, по которой видео анимация так сильна, выходит за рамки вкуса. По мнению молекулярного биолога Джона Медины, зрение является самым важным из всех органов чувств, поскольку запоминание информации резко увеличивается, когда идея изображена визуально.

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

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

Некоторые знаки выглядят непривычно, как этот:

Но пять из шести человек увидев знак велосипеда, врезающегося в скалу, поймут, что впереди опасность.

Поскольку люди понимают иллюстрации без голоса и субтитров, то картинки можно использовать для выражения идей.

Режимы анимации

В Figma есть набор стандартных переходов, которые в прототипе помогают плавно менять один экран на другой. Всего их девять, но пользоваться вы будете, скорее всего, только пятью из них:

1. Instant — анимации нет вообще, экраны сменяют друг друга моментально.

2. Linear — линейная, вся анимация протекает с одной скоростью:

Изображение: Skillbox Media

3. Ease-in — анимация медленно начинается, к концу ускоряется:

Изображение: Skillbox Media

4. Ease-out — анимация начинается быстро, к концу замедляется:

Изображение: Skillbox Media

5. Ease-in-out — старт и конец анимации замедлены:

Изображение: Skillbox Media

Подготовка к переносу макета

Макеты я разрабатываю в редакторе Figma и переносить их буду вручную, чтобы вы могли закрепить навык работы с инструментами After Effects.

Если у вас уже есть наработанный скилл по инструментарию, можете воспользоваться прекрасным конвертером, который перенесёт ваш макет из Figma в After Effects автоматически, и сразу перейти к .

Фотографии я переношу «один в один» либо использую оригинал большего разрешения, чем в макете, чтобы фото можно было уменьшить уже в After Effects. При переносе не использую никакой другой софт, кроме Figma и After Effects. Текст набираю в самом After Effects — никаких JPG-экспортов, иначе к тексту нельзя будет применить эффекты.

Перед тем как вы начнёте формировать композицию в After Effects, подставьте фоном изображение макета: так будет удобнее выравнивать элементы.

Для этого выделите Frame в Figma и экспортируйте его в формат JPG или PNG. Для подложки это не принципиально, JPG весит немного меньше, поэтому я использую его.

Экспортируем файл в формат JPG

Теперь импортируйте этот файл в After Effects.

Импорт картинки в After Effects

Создайте новую папку, чтобы в дальнейшем было удобнее подцеплять нужные файлы. Создать папку можно двумя способами: нажать на иконку папки в нижней части панели проекта либо нажать правой кнопкой мыши в контекстном меню.

Создаём новую папку

Папку назовите Bg и перенесите в неё файл interface-bg.jpg. Чуть позже сюда будет добавлен ещё один файл второго экрана.

Теперь порядок файлов на панели проекта должен быть таким:

Панель проекта

Далее перенесите файл подложки interface-bg.jpg на панель Timeline, установите его выше слоя заливки и зафиксируйте по клику на иконку замочка, чтобы случайно не сдвинуть.

Фиксируем подложку

Должно получиться вот так:

Файл подложки выше слоя заливки

Типы анимации

Сразу стоит рассмотреть все имеющиеся категории эффектов, с которыми предстоит работать. Они разделяются по области использования и характеру осуществляемого действия. Суммарно все они делятся на 4 основные категории.

Вход

Группа действий, проигрывающая появление элемента одним из способов. Наиболее распространенные виды анимации в презентациях, служащие для улучшения старта каждого нового слайда. Обозначаются зеленым цветом.

Выход

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

Выделение

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

Обозначаются желтым цветом.

Пути перемещения

Дополнительные действия, служащие для изменения местоположения элементов слайда в пространстве. Как правило, данный способ анимирования используется крайне редко и для дополнительной визуализации особенно важных моментов в сочетании с другими эффектами.

Теперь уже можно приступать к рассмотрению процедуры установки анимации.