Easy ease after effects что это
aexpressions
Выражения и скрипты для After Effects
linear(), ease() и т.д.
linear(), ease(), easeIn(), easeOut() это функции, занимающиеся интерполяцией, или сглаживаением графиков функций по определенному правилу. Вы с ними уже знакомы, если хоть раз ставили ключевые кадры и назначали им сглаживание типа easeIn, easeOut, easy ease.
С помощью этих функций можно заставить объекты двигаться, и при этом не используя ключевые кадры.
Рассмотрим структуру на примере функции linear (она идентична для всех остальных).
Аргументы этой функции (аргументы это то что в скобках).
time — время
t1 — начальное время
t2 — конечное
val1 и val2 соответственно начальное и конечные значения.
Если время меньше t1, будет использоваться значение val1, если больше t2, то — val2.
Попробуем передвинуть шэйп за 2 секунды из точки A в точку В. Здесь я сделал Separate Dimensions и применил это к положению по оси ОХ.
пропишем в position
Магия.
Но вместо времени мы можем использовать любую другую величину.
Создадим второй шэйп, пропушем ему в положении следующее:
Теперь мы транслируем перемещения первого шэйпа с 500 до 1000 в перемещение второго с 1500 до 750. Попробуйте и поймете.
Немного философии
Если вас интересует моделирование реальных процессов, то стоит запомнить, что в реальности линейных зависимостей практически нет.
Ease делает из линейной зависимости нечто похожее на квадратичную. Просто поменяйте linear на easeOut и посмотрите как изменится движение объектов.
Теперь применим вышеупомянутые функции так, как раньше еще не делали.
Артем Третьяков попросил написать выражение для грузовиков, останавливающихся в случайных местах.
Используем seedRandom для управления случайными числами. Если написать seedRandom(число, true) то следующее за ним случайное число, вызванное в random(), всегда будет одинаковым. Попробуйте убрать true — и random будет генерить новое число каждый кадр.
Дублируем объекты, сдвигаем их по оси ОУ и любуемся магией.
Как видите, объекты останавливаются в случайных местах, хотя я задал слишком большой разброс.
Советую к внимательному изучению статью на motionscript.
Как разминка — попробуйте сделать так, чтобы объекты начинали и заканчивали двигаться в немножко разные моменты времени.
Если вы не поняли, почему работают случайные числа, рекомендую к прочтению цикл из трех статей по этой теме:
Принципы анимации: как сделать хороший скринкаст программного продукта
Жизнь – как вождение велосипеда. Чтобы сохранить равновесие, ты должен двигаться.
А.Эйнштейн
Преамбула: в Alconost мы делаем продающие видеоролики для программных продуктов, веб сайтов, онлайн сервисов, мобильных приложений. Ключевая роль в таких роликах отводится скринкастам — показу действий пользователя в программе/сервисе/на сайте. Скринкаст — это показ товара “лицом”. Если скринкаст сделан убого — у зрителя останется ощущение убогого продукта и задача “мотивировать попробовать продукт” будет провалена.
Мы задумались над тем, почему иногда скринкасты выглядят неестественно и негармонично и как сделать так, чтобы скринкасты всегда получались хорошо. Оказывается, существуют 12 принципов анимации Диснея и если следовать им — любое действие на экране будет выглядеть красивым и гармоничным. Мы чуть-чуть поработали над этими принципами: убрали то, что не относится к скринкастам, а остальное адаптировали под специфику видеороликов о программных продуктах. В итоге у нас получилась памятка-руководство для видеодизайнеров, которой мы и хотим поделиться.
Итак, если вы заказали видеоролик, и вам раз за разом присылают промежуточные версии с отстойными скринкастами — покажите вашим «видеоменам» вот этот ролик:
Видео предназначено для людей, близких к видеодизайну, поэтому если вам нужно более подробное описание каждого принципа — добро пожаловать под кат.
Итак, если необходимо сделать классный скринкаст, руководствуйтесь следующими принципами:
Чем крупнее — тем лучше
Мелкие неразборчивые детали — это вселенское зло, превращающее скринкасты в средство раздражения зрителя. Когда мозг не может разобрать мелкую деталь, он посылает сигнал о потенциальной опасности, что вызывает ощущение напряжения и дискомфорта. Поэтому старайтесь в ролике показывать окно программы или сайта максимально крупно.
Хинт: чтобы окно можно было показать крупно — сжимайте его, когда делаете скриншоты. Чем более сжато окно, тем крупнее можно приблизиться к нему камерой в видео.
Анимация элементов
Если скриншот появляется на экране сразу целиком — это может выглядеть скучно, если скриншот собирается по элементам — это выглядит интересно. Разделите окно программы или сайта на отдельные элементы, проанимируйте их появление — и классный скринкаст вам обеспечен.
Easy In — Easy Out
Постоянная равномерная скорость движения объектов — это зло.
Движение объекта должно начинаться с ускорения (Easy Out), которое постепенно уменьшается и к середине пути сходит на нет. Во второй половине пути объект должен двигаться с возрастающим замедлением. Завершается движение плавным медленным торможением (Easy In).
Easy Ease
Это принцип похож на предыдущий, только область первоначального ускорения объекта очень мала, а большую часть пути занимает медленное затухание движения, стремление к плавному торможению от одного ключевого кадра к другому (Ease).
Сжатие и растяжение
Если в процессе движения сжать объект по оси сонаправленной движению и растянуть по оси перпендикулярной движению — вам удастся сделать движение живым и динамичным. А если использовать преувеличенное сжатие и растяжение, можно добиться эффекта утрированности, комичности.
Эффект отскока (bounce)
Если закончить движение объекта небольшим, чуть заметным отскоком — это очень оживит видео. Как и в предыдущем принципе, если преувеличить отскок, можно добиться эффекта гиперболы, утрированности.
Кривые Безье
Траектории движения объектов должны представлять собой нелинейные кривые Безье. Линейные траектории безусловно тоже имеют право на жизнь, но они не дают ощущения динамики, выглядят “неживыми”, механическими и больше подходят для второстепенных объектов. Сочетание принципа Easy In-Easy Out с принципом использования кривых Безье гарантированно сделает скринкаст (да и видео в целом) естественным и гармоничным.
Motion Blur
Объект в движении должен быть размыт. Чем быстрее движение — тем более “смазанным” должен быть объект. Иначе мозг зрителя будет пытаться понять, почему видео выглядит неестественно. Скорее всего это ему не удастся, но впечатление от видео будет испорчено.
Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Как сделать анимацию для сайта в After Effects — на примере бургер-меню
Дизайнеру непросто решиться на освоение новой программы. Покажем, как сделать первый шаг в After Effects и получить результат.
В предыдущей статье мы рассмотрели возможности After Effects и убедились, что эта программа многогранна и идеально подходит для демонстрации анимации интерфейсов, а также создания микроанимаций иконок.
В этом уроке создадим анимацию иконки бургер-меню и узнаем основные принципы работы в After Effects.
Сначала познакомимся с рабочим пространством программы.
Adobe After Effects очень похож на Adobe Photoshop. Такая же работа со слоями, фильтрами, эффектами и так далее. Если вы работали в Photoshop, вам будет несложно освоить и After Effects.
Отличительная особенность After Effects — большое количество всевозможных плагинов, платных и бесплатных. Еще одна особенность — работа со скриптами. Если вы умеете программировать, пишете скрипты или плагины, вам не составит труда использовать всю мощь After Effects. Но даже если вы программист только в душе, не расстраивайтесь, можете воспользоваться готовыми скриптами.
А теперь давайте приступим к созданию анимированной иконки бургер-меню.
Создание проекта
Создайте новую композицию.
Укажите разрешение композиции, я поставил 1280х1280. Количество кадров установил 30. Продолжительность 10 секунд.
Создайте новый слой на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Solid. Solid — это тип слоя, залитый сплошным цветом.
Установите параметры, указанные на скриншоте, цвет можете выбрать любой или выбранный для урока — #3D5272.
Создание иконки
Основа готова. Перейдем непосредственно к иконке бургер-меню.
Создайте прямоугольник со скругленными углами — Rounded Rectangle Tool. Найти его можно на панели инструментов.
Примерно такого размера. Он сразу отобразится у вас на панели слоев.
Необходимо разместить этот элемент по центру. Перейдите на панель Align, как показано на скриншоте, и выберите горизонтальное и вертикальное выравнивание.
Чтобы скруглить края, раскройте свойства слоя в панели слоев Contents — Rectangle 1 — Rectangle Path 1 — Roundness и выставите значение 100.
Anchor Point
Anchor Point — это опорная точка объекта, поворот (Rotation) и масштабирование (Scale) выполняются вокруг этой точки. При создании шейпового слоя ( Shape Layers — фигурные слои, для анимации векторной графики) по умолчанию Anchor Point располагается в центре слоя и имеет нулевые координаты X, Y, но будьте внимательны и всегда проверяйте расположение Anchor Point. Если точка находится за пределами объекта, расположите ее по центру.
Для этого выделите слой с прямоугольником и нажмите на инструмент Anchor Point, затем мышкой передвиньте эту точку в центр прямоугольника, вот так:
Для чего все это нужно? Покажу на примере. Я разместил два прямоугольника на одной плоскости, у одного прямоугольника Anchor Point расположен по центру, у другого чуть ниже.
Теперь повернем прямоугольники на 360°.
Думаю, разница очевидна.
Вернемся к созданию нашей иконки. Перейдите в панель слоев, выделите прямоугольник и нажмите два раза на Ctrl+D, тем самым вы создадите две копии этого прямоугольника.
Сдвиньте прямоугольники таким образом, чтобы получилось бургер-меню. Как вариант, зажмите Shift и стрелками вверх и вниз сместите прямоугольники, как показано на скриншоте.
Свойства слоя — Position и Rotation
В панели слоев выделите верхний прямоугольник и выберите два свойства слоя: Position и Rotate. Эти свойства мы задействуем в анимации. Повернем и переместим необходимые элементы. Чтобы выбрать именно эти свойства, зажмите Shift, затем, не отпуская, нажмите P, потом R. Должно получиться так:
Создание анимации иконки
Вот мы и подошли к самому интересному — анимации. Перейдите на панель Timeline, это та, что справа от панели слоев. Переместите индикатор текущего времени на одну секунду, как показано на скриншоте. Теперь на панели слоев в свойствах Position и Rotation нажмите на иконку секундомера. На панели Timeline у вас появятся два ромбика — это ключевые кадры анимации.
На панели Timeline переместите индикатор, как показано на скриншоте. Теперь создайте ключевой кадр — нажмите на иконку ромбика слева от иконки секундомера свойства Rotation на панели слоев. Поставьте этому свойству значение 45°.
Кликните мышкой на свойстве Position верхнего прямоугольника и передвиньте его, как показано на скрине.
Подвигайте индикатор текущего времени между ключевыми кадрами, чтобы посмотреть на результат. Должно получиться так:
Для того, чтобы просмотреть результат анимации в процессе работы, можно нажать пробел или подвигать индикатор текущего времени на панели Timeline.
Если вам необходимо просмотреть результат конкретной части анимации в зацикленном виде, можно задействовать маркеры рабочей области для ограничения анимации.
Переместите маркеры рабочей области так, чтобы осталась нужная часть.
Далее повторите все действия с нижним прямоугольником. Единственное отличие — в свойстве Rotation вместо 45° нужно поставить –45°.
Активируйте свойства слоя нижнего прямоугольника — зажмите Shift, затем поочередно P и R для отображения свойств слоев Position и Rotation. На панели Timeline переместите индикатор на первую секунду. Кликните на иконки секундомеров, тем самым создав ключевые кадры для свойств слоев Position и Rotation.
Переместите индикатор и создайте новые ключевые кадры, как на скриншоте, для свойства Rotation задайте значение –45°. Находясь на свойстве Position, переместите прямоугольник к центру двух других прямоугольников.
Вот что должно получиться:
Теперь нам необходимо избавиться от среднего прямоугольника. Можно сделать анимацию прозрачности от 100% до 0%.
Выделите слой среднего прямоугольника и нажмите T, вы увидите свойство Opacity. Создайте ключевые кадры, для первого задайте значение прозрачности 100%, для второго 0%.
Сделаем так чтобы крестик превращался обратно в бургер. Чтобы это реализовать, используем Time-Reverse Keyframes — воспроизведение ключевых кадров в обратном направлении.
Выберите верхний прямоугольник и на панели Timeline выделите ключевые кадры свойств Position и Rotation, нажмите Ctrl + C. Затем переместите индикатор, как показано на скриншоте, и нажмите Ctrl + V. Тем самым вы скопировали ключевые кадры и свойства этого элемента. Но ключевые кадры еще раз продублируют анимацию от бургер-меню к элементу закрытия. Нам нужно ровно наоборот, чтобы элемент закрытия превращался обратно в бургер-меню.
Для этого, не снимая выделения со скопированных ключевых кадров, нажмите правой кнопкой мыши, в контекстном меню выберите Keyframe Assistant — Time-Reverse Keyframes. Наши ключевые кадры развернулись в нужном направлении от элемента закрытия к бургер-меню.
Повторите те же действия для оставшихся двух прямоугольников.
Что у вас должно получиться:
Очень неплохо, и если бы мы не были крутыми UI- и моушн-дизайнерами, то мы бы сказали: круто, в продакшн. Но мы так не скажем, потому что умеем замечать детали и знаем, как сделать еще лучше.
Улучшение анимации, добавление микроанимации
Так что же тут не так? Давайте подумаем. Все верно — прямолинейно, избито, неинтересно. Попробуем поработать с этим и сделать хорошо. На самом деле допиливать и дорабатывать анимацию можно до бесконечности, все зависит от ваших знаний, умений и желаний.
Я выберу три приема которые помогут улучшить анимацию: добавлю разворот на 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°.
Плавность анимации, Easy Ease
Поработаем над плавностью анимации. Выделите все ключевые кадры и нажмите F9 для того, чтобы мы могли корректировать график Easy Ease.
Ключевые кадры перестали быть ромбиками и превратились в значки похожие на песочные часы. Это значит что мы их перевели в режим Easy Ease.
Но перед тем как редактировать графики, продублируйте еще несколько кадров. Эти кадры добавляют микроанимацию на выходе. С ней бургер-иконка смотрится более живо и гармонично. Перейдите на слой Null1 скопируйте ключевой кадр, который находится на десятом кадре второй секунды, и вставьте его на 20-й кадр второй секунды. Значение свойства Rotation укажите 190°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation –45°. Вот так:
Перейдите на слой Null1, скопируйте ключевой кадр, который находится на десятом кадре третьей секунды, и вставьте его на 20-й кадр третьей секунды. Значение свойства Rotation укажите 0°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation 0°. Вот так:
Выделите три ключевых кадра, как показано ниже, и нажмите на иконку графика Easy Ease, он также указан на скрине.
Теперь настройте кривую, как показано ниже, пользуясь желтыми манипуляторами точек.
Пример настройки графика:
То же самое проделайте для нижнего прямоугольника.
График нижнего прямоугольника.
Результат
Давайте посмотрим, что получилось в итоге.
В следующем уроке сделаем небольшую анимацию прелоадера с применением несложных скриптов.
Знание анимации — большой плюс для дизайнера. На курсах Skillbox рассказывают, как анимировать интерфейсы, создавать микровзаимодействия, делать пользовательский опыт «плавным». Вы освоите новые редакторы и приемы, углубите знания во многих областях, повысите свою ценность как специалист.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.