Как сделать зацикленную анимацию

Loop (луп) анимация в After Effects

В этом видеоуроке мы изучим loopIn и loopOut, луп свойства Path, loopIn и loopOut вместе, луп композиции через time-remap, луп фона, бесконечное движение фона.

Файл проекта вы можете скачать в группе ВК, в этом посте: https://vk.com/creativetuts?w=wall-72222266_237%2Fall
P.S. подписывайся на группу, там много интересного

Таймкоды (Timecodes):
00:00 — loopOut, cycle
04:51 — loopIn
06:05 — pingpong
08:24 — continue
09:45 — offset
10:58 — continue vs offset
12:24 — Второй аргумент экспрешена лупа (Second argument of loop expression)
14:51 — loopOutDuration, loopInDuration
15:44 — loopOut и loopIn вместе (loopOut & loopIn together)
20:29 — Луп свойства Path (Looping path)
22:42 — Луп композиции (Looping composition)
24:52 — Бесконечное движение фона (Loop Background)

Виды

loopOut(); — Цикл начинается после последнего ключевого кадра и заканчивается на конце слоя.

loopIn(); — Цикл начинается на начале слоя и заканчивается на последнем ключевом кадре.

Аргументы

1-ый аргумент — тип цикла.

2-ой аргумент — количество кадров которое будет использоваться для зацикленной анимации.

loopOutDuration и loopInDuration

Второй аргумент — это длительность которую нужно брать для цикла, в секундах.

Типы

Cycles — Луп по умолчанию. После последнего ключевого кадра, анимация начинается заново от первого ключевого кадра до последнего, и так до конца слоя.

Pingpong — Луп, в котором анимация идет от первого ключа до последнего, затем обратно от последнего до первого, а потом снова от первого до последнего.

Offset — Cоздаются циклы и каждый последующий цикл смещается на разницу значения свойства между вторым и первым ключевыми кадрами.

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

Зацикленный Path

LoopIn & loopOut вместе

Если мы хотим использовать пинг-понг:

Луп с одинаковым первым и последним состоянием

Используем луп типа Cycle, но только убеждаемся в том, чтобы первый и последнее состояние объекта были одинаковыми.

Луп композиции с Time-Remap

Используем луп типа Cycle, но только убеждаемся в том, чтобы первый и последний кадр пре-композа были одинаковыми.

Источник

Гайд по анимации UI для After Effects

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Как можно использовать анимацию?

Презентация концепта

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

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

Моушн-дизайн помогает быстрее реализовать ваш проект. Как? Во-первых, вы можете анимировать сайт или приложение, чтобы наглядно показать разработчикам, что именно они должны сделать. Вы можете анимировать все составляющие вашего проекта или только некоторые нестандартные переходы/раскрытия. Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.

Улучшите свое портфолио

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

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

Работа с исходником дизайна

Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.

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

3. Перейдите на панель плагинов, выберите AEUX и нажмите «Отправить в AE». В последней версии плагина исходный код из Sketch будет автоматически открываться в After Effects.

Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).

1. Убедитесь, что вы скачали шрифты, используемые в дизайне.

2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.

3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.

4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.

Подготовьте источник after effect

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

Как мы знаем, есть два типа людей: 1. Любят precompose и используют их все время; 2. Предпочитают не использовать precompose.

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

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

Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).

Организация цвета и наследование

Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.

Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.

Во время анимации меняйте цвет для всех слоев на каждом анимированном экране (как на левом изображении) или частей экрана с цветовым кодом (как на правом изображении). Например, у нас есть экран с заголовком, а затем идет 3 столбца с содержимым. Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.

Советы по анимации

Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.

Основные бесплатные плагины для упрощения вашей работы

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

Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!

BODYMOVIN и LOTTIE FILES

Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.

Смягчение

Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?

В движении пользовательского интерфейса вы все время будете анимировать 2 вещи: прокрутки и раскрытие.

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

Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.

— Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);

— Создайте ключевые кадры для начальной и конечной точек;

— Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.

— Отрегулируйте кривую, как на изображении.

— Вернитесь к временной шкале и при необходимости отрегулируйте время.

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

Раскрытия

Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.

Как оживить раскрытие?

— Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;

— Переместитесь на 20 кадров вперед и создайте ключевые кадры;

— Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;

— Создайте динамику, как показано на графике ниже.

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

Смещения

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

Что из себя представляет «Смещение»?

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

Анимация фотографий

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

Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.

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

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

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

Анимация текста

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

Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.

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

Анимация иллюстраций

Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.

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

Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.

Проверочная работа

Когда вы закончите создание анимаций, проверьте пару вещей:

1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.

2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).

3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.

Советы по публикации и рендерингу в социальных сетях

Если вы новичок в анимации, у нас есть для вас несколько советов.

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

Советы по социальным сетям

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

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

Выводы

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

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

— Попробуйте оживить иллюстрации и значки — это сделает вашу анимацию привлекательней.

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

— Держите все в чистоте! Вы будете благодарны себе за это несколько позже.

Анимация требует концентрации. Так что не торопитесь и сосредоточьтесь на качестве, а не количестве.

Источник

5 простых выражений для After Effects

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

После этого мы зажимаем клавишу Alt и кликаем ещё раз по значку с секундомером. Появится текстовая область для выражения. В ней мы пишем loopOut().

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

2) Ок, правое крыло мы анимировали. Теперь займемся левым. Не будем повторятся, и левое крыло анимируем немного другим способом. Все Вы, наверно, ещё со школьной скамьи помните замечательную математическую функцию синус. Так давайте воспльзуемся ею и здесь. Делаем Alt+клик по значку с секундомером слева от параметра Rotation Y левого крыла. В появившемся окне пишем Math.sin(time).

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

В итоге получим: 80*Math.sin(time*15). Можно, конечно, немного увеличить частоту, но это уже на Ваше усмотрение.

Движение ожидаемо смотрится линейно и неправдоподобно. Если мы хотим сохранить направление движения, но при этом добавить немного органичности, то нам не обойтись без wiggle. Итак, делаем Alt+клик на значке с секундомером слева от параметра Position и в текстовой области вбиваем wiggle(3,400). Смотрим и видим, что полёт бабочки стал более реалистичным. Что же означает написанное выражение wiggle(3,400). А означает оно то, что три раза в секунду с амплитудой в 400 пикселей в любом направлении будут происходить случайные колебания. Самое интересное это то, что wiggle можно применить практически к любому параметру в AE.

берём pickwip и тянем его до параметра Slider нуль-объекта.

Вот такое выражение мы получим в итоге:

Теперь Вы можете с легкостью анимировать значение параметра Slider и таким же образом будет менятся амплитуда.

Если нам нужно ускорить анимацию, допустим в пять раз, то мы пишем time*5.

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

Комментарии: 28

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

Вопрос снят.Нужно было оттянуть вниз окошко внутри окна wiggler. Спасибо за ваш труд.Полезные уроки можно найти на вашем сайте.Успехов!

Добрый день.Решил анимировать свечу с помощью wiggler в After effects, но сама функция не активна.Нет кнопки применить.Установил 2 разные сборки но результат тот же.Можете подсказать где искать причину?Спасибо

Добрый день, спасибо большое за урок. Возник вопрос. Можно ли одновременно для одного параметра (например Position) сделать два выражения? Например, loopOut + wiggle.

Хм. Спасибо, попробую. Пока реализовал с помощью null-объекта

Очень доволен уроком. Я давно искал хоть что-то полезное в АЕ по выражениям. К сожалению, такого как сейчас не было (тружусь с АЕ с 2005 года) и единственная дельная и хорошая книга была по АЕ «Официальный уч. курс по АЕ 5.0». Больше не встречал.
Короче спасибо.

как связать значение слайдер со значением в градусах?

Добрый день!
экспрешн loopOut(‘pingpong’) не хочет работать с маской (анимация Mask Path). Как быть в этом случае?

Очень люблю этот сайт, за лаконичные советы по C4D и AE

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

Спасибо за информацию.

Да! То что нужно! Спасибо!

По-моему, это гениально.
Спасибо!

Можно создать новую переменную, и внести в неё значение параметра Position XY только по оси X. Например: S=PositionXY[0]; Далее можете делать с этой переменной все, что захотите. Аналогичную переменную нужно будет создать и для значения параметра Position XY по оси Y.

Побольше бы статей на эту тему. Огромное спасибо автору. Долгое время использую AE но некоторые выражения для меня новы.

спасибо! нужная статья

Здорово! то что нужно. Спасибо.

супер! всё просто и легко.и сайт легкий

а что делать если при попытке вбить ключевое выражение (Alt-Position) под просмотровым окном появляется красная полоска (как если бы был включен Caps Lock) с надписью:
refresh disabled (finish editing text to refresh view) и ничего не работает?
8) 8) 8)
Вообще это сообщение появляется до тех пор пока мы не активировали выражение. А что значит «ничего не работает»?

а что делать если при попытке вбить ключевое выражение (Alt-Position) под просмотровым окном появляется красная полоска (как если бы был включен Caps Lock) с надписью:
refresh disabled (finish editing text to refresh view) и ничего не работает?
8) 8) 8)

Спасибо! Реально доходчиво, ощутимо полезно!

Спасибо! Очень доходчиво! 😉

Артем, молодцы, отличный сайт, уроки. рад, что нашел вас!

Источник