Как сделать пнг анимацию в after effects
Lottie — отличный способ экспортировать анимации из After Effects в JSON, сохраняя хорошее качество. В этой статье мы разберёмся, как приступить к работе с этим инструментом и на чём стоит заострить особое внимание.
В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки iOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.
LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.
Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере.
Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.
Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.
Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.
Создание анимации для интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.
Вот список предложений, которыми делятся создатели Lottie:
- Файлы JSON должны быть как можно более компактными для мобильных продуктов.
- Используйте свои навыки After Effect, чтобы избежать лишних ключевых кадров, например путем родительских функций вместо добавления ключевого кадра на каждом слое.
- Избегайте использования ключевых кадров пути, поскольку они создают очень большой документ из преобразования всей вершины из пути.
- Лучше всего избегать покачивания, автоматической трассировки и аналогичных методов, которые создают большое количество ключевых кадров. Создание такого большого файла может сделать файл JSON очень большим и негативно повлиять на производительность.
- Преобразуйте любой слой Illustrator, EPS, SVG или PDF для формирования слоёв в After Effects, в противном случае это приведёт к ошибке.
- Экспорт в 1X при экспорте файла каждый пиксель на иллюстрации будет переведён в точки для iOS и DPS для Android; вот набор метрик устройств в DPS, которые Google собрала вместе.
- Lottie пока не поддерживает выражения или эффекты.
- Режимы наложения, а конкретно «Умножение», «Экран» или «Добавить» пока не поддерживаются, а также не отображаются с помощью Luma.
- Стили слоёв (тень, наложение, обводка…) пока не поддерживаются; нули могут быть использованы, но для их работы необходимо включить видимость и изменить непрозрачность до 0%.
Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: «Создать» → «Создать фигуру из векторных слоёв».
Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.
Нам нужно удалить AI-файлы и работать только с векторными слоями.
Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).
После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным.
Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.
После того, как у меня появилась анимация, я захотел открыть расширение Lottie.
Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
Начнем с основ. Изначально вы должны понимать, для чего делать анимацию именно в этой программе, а не в Вегасе или не в Премьере. Дело в том, что в After Effects есть функция, позволяющая настраивать плавный ход анимации, благодаря которому картинка готового результата двигается намного плавнее и естественнее, чем в случае с другими программами.
Итак, для того, чтобы сделать анимацию в After Effetcs, нужно открыть программу и загрузить туда картинку, с которой вы будете работать. Делаем это.
После того, как вы закинули картинку на таймлайн, нужно будет зайти в настройки проекта и поставить показатель частоты кадров на 60 fps.
Внизу, на нижнем левом рабочем столе, находим пункт положение, на котором ставим галочку, чтобы создать ключевой кадр.
После этого, на таймлайне, перемещаемся немного вперед и изменяем местоположение нашей картинки. Должно получиться что-то вроде этого:
Когда вы создадите несколько ключевых точек, нужно будет выделить все ключи, которые вы оставите на таймлайне, после чего нужно будет зайти в настройки графики анимации.
Для этого нужно растягивать, либо наоборот, сужать графики, чтобы сделать анимацию более быстрой, либо более медленной.
Далее ставим галочку на Motion Blur, после чего наблюдаем движение нашей анимации. Собственно, в нижней табличке, в левом углу, вы можете также анимировать и масштаб картинки. Точно также ставите ключи, после чего изменяете размер картинки.
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 35
Тарас мне нравится,как ты комментируешь,с таким воодушевлением! Сразу видно,что тебе действительно самому нравится. Спасибо за урок.
Все очень круто! Вышел по ссылке,но не нашел Вашего портфолио.Подскажите,где можно,сейчас, ознакомиться с Вашим портфолио? Спасибо.
Тоже хотел бы отметить манеру повествования Тараса
участливо и с любовью, это прям круто.
Здравствуйте. У меня установлен Adobe After Effects CS4. После скачивания проекта какого либо урока АЕ выдает ошибку, просит версию 13.8.1.Неужели нет уроков для моей версии?
Это очень старая версия, авторы рекомендуют к установке только последние версии программ, т.к. используют их сами.
Почему у меня не отображаются все стили слоя?
Не совсем уверен, но причина может крыться в русификации AE. Мы всегда настоятельно рекомендуем использовать только англоязычную версию.
Объясните пожалуйста почему работаете в композиции 12к/сек.?
Здравствуйте, у меня BG в AF не накладывается, ведут себя как 2 разных слоя((( Что делать. Помогите))
Попробуйте изменить режим наложения
Почему при рисовании Pen Tool образуется (или скрывается )зона между точками Pen Tool?
Очень крутой урок! И этот и предыдущий,делал все с огромным удовольствием) Благодарю)
Привет. Хотелось бы узнать можно ли получить силуэт человека при монтаже, и как снимать видео, чтобы не было зерна в кадре. Спасибо заранее
Спасибо. Ждём уроков.
Спасибо за интересный урок
Благодарю Вас! Интересно. Я в начале пути.
Спасибо большое за урок! Автор очень доступно и позитивно рассказывает!
Спасибо за урок. А как теперь эту анимацию внедрить в видео?Спасибо
Благодарю. Вы супер.
Cпасибо огромное))) Уроки-супер.
Like. Миша Петрик прям)
Великолепные уроки. Покадровая анимация это 100% попадание в душу.
Супер урок! Побольше бы уроков по покадровой анимации
Потрясно, лайк за урок!) Спасибо)
Здравствуйте. У меня такая проблема, при выборе формата QuickTime не поменять кодек на PNG. Что мне следует сделать? Заранее спасибо!
Версия: AE CC 2015
Ваши уроки прекрасны , оч много полезной информации передано ёмко и ловко , всё как нельзя лучше содержательно и понятно . (впечатление от них как от уроков Эндрю Крамера впервые увиденного) Большое спасибо вам! Вы можете предподоткрыть глаза на After Effects !!
Чтоб привлечь внимание к постам, картинкам в социальных сетях, администраторы групп используют динамичные изображения — как создать анимированное изображение .
Даже самая простая анимация в After Effects может удивить пользователей. Дизайнеры активно его используют, чтоб создавать подобные вещи. Это одна из самых популярных программ, в которой легко разобраться.
Рассмотрим процесс создания анимированного изображения для сайта в подробностях и по шагам:
- создание проекта: как создать анимированное изображение
- создание иконки
- аnchor Point
- свойства слоя — Position и Rotation
- создание анимации иконки
- улучшение анимации, добавление микроанимации
- плавность анимации, Easy Ease
- ключевые кадры анимации в adobe after effects
- выражения
- ресурсы в интернете, посвященные анимации
- редактор диаграмм
- ресурсы в интернете, посвященные редактору диаграмм
- указание свойств для отображения в редакторе диаграмм
- параметры диаграммы в редакторе диаграмм
- панорамирование и увеличение масштаба в редакторе диаграмм
- автоматическое масштабирование по высоте и подгонка
- результат работы
создание проекта: как создать анимированное изображение
Анимация — изменение картинки за определенное время. Это происходит из-за смены слоев. В результате можно получить динамичную картинку, которая активно двигается.
Все уроки по анимации в adobe after effects начинаются в того, что надо создать проект. Для этого нужно перейти по вкладке «Композиция» и создать новый проект. После того как файл назвали, его необходимо сохранить.
В начале создания можно указать:
- разрешение анимации;
- длительность;
- количество кадров.
Для простых анимаций достаточно 10 секунд и 30 кадров. Не стоит начинать с большего количества, иначе можно будет запутаться в слоях. Лучше постепенно увеличивать сложность, чтоб понять все тонкости.
После этого приступают непосредственно к работе. Сначала нужно создать новый слой. Это основа будущей анимации, на которую накладывают все другие элементы. Это делается с помощью кнопки Solid. Появится цветной фон. Это полотно, которое является основой для работы. Тон и интенсивность можно менять по своему желанию.
вернуться к оглавлению ↑
создание иконки
Следующее, что необходимо сделать: создать иконку. Есть прямоугольник с округлыми краями. Он находится в панели инструментов. Можно изменить форму или размеры фигуры.
Именно с ней будет происходить основная работа. Это макет изображения, на который будут накладываться все слои. Можно создать рисунок с нуля, либо же загрузить уже готовую иконку. Для этого нужно ее импортировать в Adobe или открыть с помощью вкладки «Файл». После загрузки она автоматически появится на панели Timeline.
вернуться к оглавлению ↑
аnchor Point
Точка, вокруг которой происходит все движение, называется Anchor Point. Автоматически она находится в самом центре будущей анимации. Тем, кто только начинает разбираться в том, как сделать анимацию в After Effects, стоит проверять ее положение. Иногда ее можно случайно сдвинуть в процессе работы. Тогда съедет весь рисунок. Чтоб изображение было по центру, надо всегда проверять контрольную точку.
Чтоб изменить положение нужно открыть Anchor Point и передвинуть ее в нужное положение. Это один из самых важных моментов, ведь от положения точки зависит исходный результат.
вернуться к оглавлению ↑
свойства слоя — Position и Rotation
Адоб позволяет самостоятельно выбирать и создавать свои. Можно выбирать их насыщенность, цветовую гамму и размещение. Функцию Position используют для изменения расположения объекта. Rotation — градус его вращение.
Именно эти два инструмента отвечают за положение и разворот всего изображения. Они позволяют устанавливать точку вращения, масштаб, поворот. Используя слои разной прозрачности, можно создать эффектную анимацию.
вернуться к оглавлению ↑
создание анимации иконки
Большую часть работы выполняют в панели Timeline. Там есть все необходимые инструменты, которые нужны для создания анимации. Важно следить за тем, чтоб во время изменения был включен секундомер. Это важный элемент, по которому происходят все изменения.
Поворот и особенности движения тоже играют свою роль. Поэтому нужно следить за показателями Rotation и Position. Чтоб облегчить работу, нужно изначально задать верные масштабы картинки. Тогда программа автоматически подтянет все слои.
Все элементы, которые добавляют, отображаются в Timeline. Там можно менять его свойства и добавлять в работу.
вернуться к оглавлению ↑
улучшение анимации, добавление микроанимации
Применяя все инструменты и функции Адоб, можно создать красивую, детализированную анимацию. Важно уделить внимание всем частям. Чтоб добавить микроанимацию нужно:
- добавить еще один слой;
- изображение привязать к нему;
- задать нужные параметры разворота на определенном участке;
- добавить нужное количество кадров;
- нажать Time Reserve Timeframes.
Последний пункт необходим, чтоб после цикла движений изображение вернулось в точку входа. Используя значение Null Object для первого слоя, можно повернуть любое изображение в начальную позицию.
вернуться к оглавлению ↑
плавность анимации, Easy Ease
Easy Ease — инструмент, который делает анимацию плавной, убирает все резкие движения. Прежде чем это сделать, необходимо скопировать кадры. После этого:
- на слой Null 1 перенести кадр со второй секунды десятого кадра;
- его же вставить на вторую секунду двадцатого кадра;
- включить Rotation на 190 градусов;
- в нижнем прямоугольнике продублировать все так же, как для Null 1, только с Rotation 45 градусов;
- изображение с третьей секунды десятого кадра перенести на Null 1;
- добавить двадцатый кадр с третьей секунды, указав Rotation 0;
- на нижнем прямоугольнике нужно все повторить.
Когда все сделано, выделяют ключевые кадры и выбирают инструмент Easy Ease. Если все желтые точки совпадают, анимация сглаживается и становится плавной. В случае если есть несовпадения, нужно проверить правильно ли скопированы и перенесены кадры.
по теме Фотошоп :
Как сделать прозрачный фон картинки в Photoshop (фотошоп)
Как нанести градиент на фото с помощью adobe photoshop
Фотошоп онлайн редактор, функции фотошоп — монтаж, рисование…
вернуться к оглавлению ↑
ключевые кадры анимации в adobe after effects
Ключевые кадры нужны, чтоб задать параметры, которые будут меняться. Это может быть:
- движения;
- эффекты;
- аудиосопровождение;
- текст;
- другие объекты.
Для создания анимации нужно минимум два кадра: начало и конец. Чтоб знать, как анимировать в after effects нужно включить секундомер. При изменениях параметра данные будут сохраняться. Если же таймер выключен, результат не сохранится.
Вставить кадр можно через «Вставку». Нужно выбрать временную шкалу и добавить ключевой кадр. Чтоб элемент занял свое место, стоит заранее указать нужную точку.
Если секундомер включен, программа автоматически добавляет или изменяет кадр. Чтоб добавить элемент нужно выбрать «Перо» и перенести его в нужную точку.
вернуться к оглавлению ↑
выражения
Для выражения используется язык Java. Фрагмент кода подключают к изображению, что помогает уменьшить количество слоев. С их помощью можно автоматизировать движение фрагмента анимации, связать разные свойства, создавать сложные анимации в несколько слоев.
Эту опцию чаще всего используют для:
- беспрерывного вращения;
- зацикливания точек входа и выхода;
- разнообразных покачиваний.
Чтоб создать adobe after effects анимация с выражением, нужно открыть редактор и кликнуть на область, которую нужно изменить. Затем нужно открыть таймлайн и выбрать секундомер рядом с функцией «Положение». Софт предложит стандартные варианты выражений. О том, что данный параметр включен, сигнализирует синий символ «равно». Рядом с ним есть кружок с треугольником внутри. Нажав на него, можно открыть редактор, чтоб ввести текст собственного выражения.
Выражение один из самых простых методов заставить двигаться часть рисунка. Это может быть нога спортсмена, или подмигивающий глаз на лице.
вернуться к оглавлению ↑
ресурсы в интернете, посвященные анимации
Детально узнать информацию об анимировании изображений можно в руководстве пользователей от Адоб. Там есть все основные термины и функции, которые используют в работе. Также есть уроки от Джефа Сэнгстер о том, как работать в программе.
Новичкам однозначно стоит изучить книги Афтер Эффект Классрум. В них есть много полезной информации, которая поможет понять все нюансы создания динамических картинок.
вернуться к оглавлению ↑
редактор диаграмм
Что увидеть свойства анимации в виде двумерного графика, нужно зайти в редактор диаграмм. Горизонтально в нем отображено время изменения объектов.
Есть два варианта диаграммы:
- значения (указаны все элементы);
- скорости (скорость их изменений).
Каждое свойство отображается в виде кривой. Работать можно только с одним значением, а просматривать сразу несколько. При работе с элементом при включенной кнопке «Привязать», он перетаскивается к тому же временному значению, ключевому кадру, точке входа и выхода. Линия становится оранжевой, когда к ней привязывают кадр.
В нижней части редактора есть кнопка «Разделить координаты». Нажав на нее, можно изменить элементы независимо друг от друга. Для этого используют разделение графика по разным осям.
по теме создания сайтов :
Как настроить текстовый редактор Notepad++ нелишне изучить программку — текстовый редактор Notepad++ ! её возможности нынче и рассмотрим: подстроим первичные, но необходимые рычаги управления редактором, а также, что очень важно, научимся работать с Нотепад как с FTP — откроем ftp клиент соединение…
вернуться к оглавлению ↑
ресурсы в интернете, посвященные редактору диаграмм
Существует огромное количество роликов и статей, которые помогут изучить данную опцию. Новичкам стоит опираться на официальное руководство от Адоб, которое есть на сайте.
Энтони Боланте выпустил статью, которая поможет изучить все особенности изменений диаграмм. Детальные советы и иллюстрации существенно облегчат понимание этого процесса.
вернуться к оглавлению ↑
указание свойств для отображения в редакторе диаграмм
Чтоб указать свойства при покадровой анимации картинки в After Effects нужно:
- выбрать пункт «Показать свойства»;
- указать необходимую команду.
Можно просмотреть все свойства или же выбрать только анимированные. Также можно просмотреть те элементы, для которых была выбрана диаграмма.
вернуться к оглавлению ↑
параметры диаграммы в редакторе диаграмм
В разделе «Тип и параметры диаграммы» есть несколько функций. С помощью автовыбора редактор автоматически подберет наиболее подходящий тип. Там же можно менять свойства значения и скорости.
Помимо этого, можно просмотреть точки входа и выхода анимации, которая есть в данной диаграмме. Они отображены в виде скобок. Плюс, можно разрешить изменение ключевых кадров между кадрами.
В параметрах диаграммы видно, присвоены ли звуковые волны слоям. Эталонная диаграмма показывает, насколько элемент соответствует норме. Она серого цвета и доступна только для просмотра.
вернуться к оглавлению ↑
панорамирование и увеличение масштаба в редакторе диаграмм
Чтоб растянуть изображение по горизонтали или вертикали нужно использовать инструмент «Рука». Одновременно с другими его можно включить через длительное нажатие на пробел или среднюю кнопку мыши.
В зависимости от типа панорамирования стоит использовать:
- колесико мышки для вертикального;
- нажать SHIFT при прокрутке мышки для горизонтального.
Чтоб изменить масштаб нужно открыть функцию «Масштаб». Чтоб уменьшить размер нужно нажать ALT, при запуске инструмента. Это уменьшит размер по вертикали. Чтоб сделать это горизонтально, используют CTRL.
Для изменения размеров по горизонтали можно попробовать перетащить инструмент «Масштаб». Движение влево уменьшит, вправо — увеличит. Чтоб сделать то же самое во вертикали, инструмент нужно двигать вверх (для увеличения) или вниз (для уменьшения). При этом кнопка ALT должна быть зажатой постоянно.
Прежде, чем изменять масштабы анимации для Adobe After Effects нужно знать, что при автоматической настройке параметров по высоте, менять вертикаль нельзя.
вернуться к оглавлению ↑
автоматическое масштабирование по высоте и подгонка
Есть несколько видов автоматического масштабирования:
- по высоте;
- выбранной области;
- всего изображения.
В первом случае программа самостоятельно выставить вертикаль, исходя данных по диаграмме. Горизонтальные размеры нужно настраивать вручную. Чтоб автоматически изменить данные выбранной обрасти, нужно указать размеры. Эта функция поможет новичкам, как анимировать картинку в Adobe After Effects animation под заданные размеры.
При автоматическом масштабировании, редактор выставляет данные значения и времени исходя из информации, которая есть в предыдущих диафрагмах. Это позволяет сэкономить время на построение параметров проекта.
вернуться к оглавлению ↑
результат работы
Изучение того, как создать анимацию в Adobe After Effects занимает не сильно много времени. Это один из самых легких и простых вариантов оживить изображение.
Телеграм канал подпишись. Для вас самое важное и полезное по теме IT технологий и новостей мира!
Создание… продвижение сайтов: студия ATs media запросто с WordPress
все статьи: COMPLITRA
я - сайт COMPLITRA RU. Буду делиться для вас, надеюсь, полезной информацией. всегда рад сотрудничеству с авторами.
мой сайт
Анимация — важная составляющая любого проекта, которая при правильном использовании может произвести хорошее впечатление, придать вашему дизайну изюминку и привлечь как можно больше внимания.
Вот гайд по созданию анимаций с советами и замечаниями, которые улучшат вид вашего дизайна.
Часто мы используем анимации, чтобы произвести хорошее первое впечатление. Моушн-дизайн оживляет наш пользовательский интерфейс и показывает, как все функции будут работать без вмешательства со стороны программиста. Вот один из концептов, в котором мы применили анимацию для демонстрации наших идей клиенту.
Оживление иллюстраций
Иногда можно использовать простые анимации для оживления иллюстраций, на это не уйдет много времени, но приведёт к положительным результатам. Анимированные иллюстрации, даже самые маленькие, действительно отыгрывают большую роль, не стоит ими пренебрегать.
Упрощение реализации
Моушн-дизайн помогает быстрее реализовать ваш проект. Как?
Во-первых, вы можете анимировать сайт или приложение, чтобы наглядно показать разработчикам, что именно они должны сделать. Вы можете анимировать все составляющие вашего проекта или только некоторые нестандартные переходы/раскрытия.
Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.
Улучшите свое портфолио
Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.
Если вы занимаетесь моушн-дизайном, вы можете создавать множество классных анимаций: поиграйте с эффектом параллакса, включите 3D-анимацию в пользовательский интерфейс, поиграйте с эффектами искажения на фотографиях, анимируйте иллюстрации и т.д.
Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.
Импорт из Sketch
Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.
- Организуйте все в группы и дайте правильные названия всем слоям
2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).
Импорт из Figma
Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).
1. Убедитесь, что вы скачали шрифты, используемые в дизайне.
2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.
3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.
4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.
Precompose подразумевает под собой новую композицию с анимацией, которую вы решили по какой-то причине сделать отдельно. Чаще всего это делается, чтобы отделить одну логически законченную работу от других.
Как мы знаем, есть два типа людей:
- Любят precompose и используют их все время;
- Предпочитают не использовать precompose.
Мы используем их только для организации неанимированных или лишь слегка анимированных частей дизайна: верхнего и нижнего колонтитула, карточек и панелей инструментов.
Зачем? Вы часто теряете гибкость в процессе анимации. Например, если вам нужно анимировать прокрутку и у вас есть анимация для частей экрана — вы будете терять много времени, перемещаясь туда-сюда в композициях.
Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).
Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.
Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.
Во время анимации меняйте цвет для всех слоев на каждом анимированном экране (как на левом изображении) или частей экрана с цветовым кодом (как на правом изображении). Например, у нас есть экран с заголовком, а затем идет 3 столбца с содержимым.
Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.
Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.
Motion Tools
Мы не можем представить себе даже день анимации без этого плагина. Он помогает оптимизировать рабочий процесс и сэкономить много времени.Все инструкции о том, как его использовать, вы найдете в этом видео.
Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!
Bodymovin и Lottie Files
Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.
Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?
В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.
Для их анимации используются стандартные свойства: положение, непрозрачность, масштаб и поворот.
Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.
- Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
- Создайте ключевые кадры для начальной и конечной точек;
- Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
- Отрегулируйте кривую, как на изображении.
- Вернитесь к временной шкале и при необходимости отрегулируйте время.
Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.
Как оживить раскрытие?
- Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
- Переместитесь на 20 кадров вперед и создайте ключевые кадры;
- Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
- Создайте динамику, как показано на графике ниже.
Просмотрите анимацию и вы заметите, что теперь все движения выглядят более плавными.
Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.
Что из себя представляет «Смещение»?
Это означает, что анимация не одновременна. Например, анимация каждого следующего слоя начнётся на 2 кадра позже, чем анимация предыдущего слоя.
- Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
- Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!
Когда вы освоили базовую анимацию, пришло время проявить больше творчества.
Раскрытие фото
Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.
Например, здесь вы можете наблюдать добавленную масштабную анимацию и отображаемую маску. Такое действие легко реализовать и выглядеть это будет гораздо лучше, нежели стандартное раскрытие.
Фотоэффекты
Помимо раскрытия, вы можете добавить эффекты искажения фотографий, которые будут отображаться при наведении курсора или же видны постоянно.
Создание искажений — довольно комплексный, а иногда и достаточно сложный процесс, но вы можете использовать уже готовые пресеты, которые есть в свободном доступе, в Интернете. Вот несколько отличных вариантов того, как фотоэффекты могут быть применены на ваших сайтах.
В большинстве случаев мы используем простые анимации для текста, но иногда вам может понадобиться добавить некоторые интересные детали к базовой анимации.
Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.
Посмотрите, как такой вид анимации может помочь в создании впечатляющего видео.
Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.
Всегда стоит анимировать иллюстрации для сайтов/приложений. Это быстро, легко и просто реализовать, а профит от этих действий будет максимален.
Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.
Когда вы закончите создание анимаций, проверьте пару вещей:
1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.
2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).
3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.
Если вы новичок в анимации, у нас есть для вас несколько советов.
Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.
В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».
Иногда вам нужно оптимизировать видео, чтобы оно весило меньше. Для этого мы рекомендуем приложение HandBrake. Пользоваться им очень просто и интуитивно понятно. Здесь вы можете уменьшить размер файла видео, оптимизировать, изменить размер, битрейт или частоту кадров.
Советы по социальным сетям
Первое и самое главное — миниатюры. Самая распространённая ошибка — забывать о хороших миниатюрах. В результате у вас может быть пустой или непривлекательный эскиз, который испортит впечатление обо всей проделанной вами работе.
Второе, над чем нужно работать — зацикленная анимация. Это тот пункт, который делает анимацию красивее и плавнее.
Читайте также: