Наборы настроек движения для adobe animate
Сегодня мы расскажем, как в Playrix создаются анимации в Animate (Flash). Статья посвящена несложным трюкам, которые можно использовать как базу для эффектов посложнее. Для профессионалов она, возможно, и не будет откровением, но начинающие флешеры (или анимейтеры, если хотите) наверняка найдут для себя что-нибудь интересное. Эти приемы точно сэкономят вам уйму времени в сложных задачах.
Несколько слов о флеше и других программах. Вопросы, наверняка, возникнут, ведь Flash «хоронят» уже который год, а он до сих пор никуда не исчез.
1. Почему мы работаем в Animate, а не в Spine?
- Технология уже годами обкатана, изучена и прочно вписалась в рабочий процесс. Как программа для игровой 2D-анимации флеш жив и действительно хороших альтернатив пока нет.
- Для Spine нужен дополнительный этап работы – риг. Это неоправданно для объектов или персонажей, у которых одна-две анимации (например, декорации Fishdom или персонажи в диалогах Township).
- Производительность. Spine тут проигрывает даже с хорошим ригом, в котором нет ничего лишнего, минимум костей и простые меши.
- Нельзя что-нибудь дорисовать на ходу. Во флеше мы это делаем регулярно и такой подход отчасти напоминает классическую рисованную анимацию – можно «прорисовать» практически любую позу или нужный эффект тщательнее, ригом мы не ограничены.
- Spine ситуативен. Отлично подходит для персонажной анимации «2D строго вид сбоку» и всевозможных «оживших портретов» – которые и анимацией-то можно назвать с натяжкой. Кроме того, если нужно повернуть сложный объект больше, чем на 20-30 градусов, колдовать в Spine нужно еще сильнее, чем во флеше.
Как видите, Spine точно не «убийца флеша», но в ряде случаев мы все-таки используем и его.
- И вновь дело в производительности, по этому критерию флеш выигрывает. 3D используется ситуативно, где без него никак не обойтись – рыбки в Fishdom, главные персонажи в Homescapes и Gardenscapes, например.
- Лишние этапы работы – нужно создать модель, текстуры, риг.
3. Как флеш-анимации попадают в игру, что поддерживается, а что нет?
- Используем свою программу-растеризатор, которая превращает swf в два файла: текстурный атлас и swl, в котором записаны все смещения объектов. Это аналог GAF.
- Поддерживается: иерархия вложенностей, инстанс-неймы.
- Не поддерживаются: маски, фильтры, tint/brightness и режимы наложения.
На первый взгляд может показаться, что во флеше невозможно сделать что-то действительно интересное. Но это не так! Сейчас объясним.
Начнем с самого простого: поворот кубика в изометрии. Очевидное наблюдение: каждая сторона куба – это квадрат. Если представить, что мы смотрим на куб сверху, то кроме верхней квадратной стороны мы ничего не увидим. Поворачивать его в таком ракурсе довольно просто. Но если куб нарисован по-другому, ситуация усложняется: стороны выглядят как ромбы и трансформировать их для создания иллюзии вращения куба – довольно сложная задача.
Однако используя вложенную анимацию во флеше мы можем работать с недеформированными сторонами во вложенности. А впоследствии трансформировать клип со вложенной анимацией до нужного вида. Конечно, тут необходима графика сторон куба во фронтальном виде или предварительно растянутые до близкого к квадратному состоянию стороны.
Итак, возьмем клип с квадратной стороной куба и поместим его во вложенность (назовем его «основной клип»). Преобразовать основной клип в изометрический тайл можно, если повернуть его на 45 градусов. Затем нужно сжать в два раза по вертикали то, что получилось (после поворота – сгруппировать, уменьшить по высоте на 50%, разгруппировать). Теперь у нас есть верхняя грань куба (рис.1).
Повернем его содержимое. Внутри у него всё еще квадрат и поворачиваться он будет как квадрат, ведь все искажения внешние.
Нижняя грань повторяет движение верхней. Создайте ее копию.
Полдела сделано, вращаются верхняя и нижняя грани. Движение их углов полностью определяет положение боковых граней. Предстоит немного механической работы, чтобы аккуратно подогнать боковые стороны (рис.2). Удобнее будет использовать режим graphic для верхних граней, чтобы их поворот отображался на основном таймлайне.
Затем можно сделать коробку деревянной и добавить «освещение»: полупрозрачные затемняющие клипы для боковых граней и посветлее – для верхней (рис.3). Теперь у есть готовый ящик:
Таким нехитрым способом можно сделать вращение и для других правильных многогранников – октаэдров, додекаэдров и т.д. С неправильными работать сложнее, но тоже возможно.
А сейчас мы откроем наш изометрический куб. На глаз открывать «крышку» долго и можно легко ошибиться – тогда движение может получиться дерганным.
Посмотрим на коробку сбоку – открытие створок предельно простое. Повернем их во вложенности (рис.1). Створки – это желтые отрезки. Рекомендуем для них использовать круг как подложку. Так удобнее и нагляднее будет трансформировать основной клип. Без круга, только с отрезками можно запутаться.
Затем расположим в изометрии клипы, которые содержат поворот створок во вложении, и поставим им режим graphic. Поворот желтых отрезков будем использовать как ориентир.
Пять минут механической работы, чтобы вместо палочек были настоящие створки – и готово (рис.2.2). Для второй пары створок можно использовать отзеркаленную копию первой.
Где это можно применять помимо очевидного открытия разных створок и ворот? Там, где нужно отследить перемещение объекта по круговым траекториям, особенно в сложных ракурсах.
В этом примере мы покажем, как подходы, описанные в предыдущих пунктах, можно применять для более сложных объектов. Анимировать будем маленькую машинку, которая ездит между дорожных конусов.
Очевидно, первое, что нужно сделать – представить сложный объект как набор простых, игнорируя вторичные элементы на этом этапе. (рис.1)
Подробно расписывать этапы работы над поворотом мы не будем, принцип тот же, что и в первых двух примерах – поворот неискаженного элемента машины во вложенности и последующая внешняя трансформация клипа (либо создание вспомогательных клипов, по которым проще отслеживать трансформацию сегментов машины). Во вспомогательных клипах можно сделать различные пометки, которые помогут отследить положение второстепенных элементов (Рис.2).
Поворот – одна из составляющих более сложного движения. Изначальная задумка – машина объезжает препятствия на дороге, двигаясь «змейкой». Можно попытаться двигать её по guide-кривой, но в этом случае сложно подобрать ease для твина (либо движение по кривой будет линейным, если анимировать без ease вообще).
Можно пойти другим путем и разложить сложное движение на составляющие (рис.3, слева направо с самого нижнего уровня вложенности):
- Поворот машины на месте
- Цикл движения из стороны в сторону
- Движение машины по прямой
При одновременном воспроизведении это создаст эффект «змейки». Разделение подобных движений на составляющие позволяет вносить правки на любом уровне, а также подбирать наиболее подходящую рассинхронизацию одного движения относительно другого.
Прежде чем что-то делать, поищите способ, который позволит как можно быстрее набросать «картину» в целом – и обязательно им воспользуйтесь. От наброска гораздо проще двигаться дальше. Для флага мы выбрали такой вариант:
- Анимируем вспомогательный символ (зацикленное движение вверх-вниз и в стороны) (Рис.1)
- Создаем несколько его копий и устанавливаем равномерную рассинхронизацию. Несколько клипов слева стоит сжать по горизонтали, чтобы уменьшить амплитуду колебаний. Можно поэкспериментировать с движением сегментов на каждом из уровней вложенности. Логика движения сохранится, но смотреться будет по-разному.
- Когда «набросок» выглядит хорошо, можно продолжить работу. Используем положение вспомогательных символов как место стыка прямоугольных сегментов флага (Рис.2).
Где можно применять такой подход? В зацикленных плавных эффектах – огне, волнах и т.д. Структура везде будет разная, сохранится только общий принцип рассинхронизации клипов.
По сюжету краб выбегает из-за шара, затем останавливается перед ним и стучит клешней. Затем снова убегает за шар – таким образом совершив полный оборот. Анимация непростая, «запчастей» у краба несколько десятков, поэтому для такой задачи просто необходима хорошая организация структуры.
На основном таймлайне всего несколько символов (рис.1). Во вложенность помещены все действия краба помимо перемещения. Он поворачивается, удивляется, стучит по стеклу и т.д. – все это стоя на месте (рис.2). Туловище краба также содержит поворот во вложенности, это удобно.
Запутаться при таком количестве лапок проще простого, поэтому мы использовали вспомогательные клипы. На них циклично меняется состояние для каждой из «ног»: находится на поверхности (большой кружок) или поднята вверх (маленький). Вся эта структура затем поворачивается вместе с крабом (Рис.3).
У этого крабика множество разных анимаций, структура вложенности у них отличается. Но логика в целом одна и та же – комплексные движения распределены по уровням вложенности, на основном таймлайне происходят главные движение символов головы и клешней. А все моргания и улыбки, изгибы и движения клешней сделаны вложенными анимациями.
Тот же подход мы используем при создании анимаций персонажей Gardenscapes и Homescapes. Все элементы туловища и головы находятся во вложенности, на основном таймлайне анимируется только основной клип целиком. Во вложенности удобнее делать эмоции и повороты, без перемещения множества сегментов на основном таймлайне.
Напоследок небольшой бонус. Еще парочка маленьких хитростей и скрипты:
Сбивается точка трансформации клипа и в результате анимация дергается. Как это починить:
а) Двойной клик на белый кружок вернет его в точку регистрации.
б) Можно выставить нужное положение точки трансформации, затем пройтись по всем ключевым кадрам с этим клипом, нажимая Ctrl+Y (это не только однократный Redo, но и повтор последнего действия).
Клип неудобно трансформировать при его текущей рамке трансформации. Особенно если он уже очень сильно деформирован
Клип можно сгруппировать (Ctrl+G). Группа даст новую рамку трансформации. После этого от группы нужно избавиться с помощью Break apart (Ctrl+B).
Работа с растровыми изображениями
Если вы работаете с множеством сегментов, бывает сложно выделить какой-нибудь клип на нижних слоях. Флеш реагирует на клик по прозрачной области растровой картинки – и выделяется не то, что нужно. Можно превратить растр в растровую заливку с помощью Break apart и стереть прозрачные участки, но это долго. У нас есть несколько скриптов для избавления от прозрачных областей – вы можете найти их по ссылке.
Sorcery_MaskBitmap.jsfl – создает векторную маску по форме картинки
Sorcery_CutBitmap.jsfl – обрезает прозрачную область
Sorcery_CutBitmapPrecise.jsfl – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.
Сжатие/растяжение таймлайна.
Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.
Наборами настроек движения называют предварительно настроенные анимации движения, которые можно применять к объекту в рабочей области. Необходимо просто выбрать объект и нажать кнопку «Применить» на панели «Наборы настроек движения».
Можно создавать и сохранять собственные пользовательские наборы настроек. Это могут быть элементы существующих наборов настроек движения, а также произвольные анимации движения, созданные пользователями.
Панель «Наборы настроек движения» также позволяет импортировать и экспортировать наборы настроек. Можно обмениваться наборами настроек со своими коллегами или воспользоваться наборами настроек, предоставленными членами сообщества дизайнеров Animate.
Наборы настроек позволяют сэкономить время работы во время создания и совершенствования проектов, особенно если часто используются похожие виды анимации.
Наборы настроек движения могут содержать только анимацию движения. Классическую анимацию нельзя сохранить в качестве набора настроек движения.
В следующих видеоруководствах показаны принципы использования наборов настроек движения. В некоторых видеоматериалах может быть показано рабочее пространство CS3 или CS4, но они также относятся к CS5.
Просмотр наборов настроек движения
Все наборы настроек движения Animate предоставляют возможность просмотра, реализуемую с помощью панели «Наборы настроек движения». Просмотр позволяет понять, как будет выглядеть анимация после применения ее к объекту в документе. При создании или импорте пользовательских наборов настроек можно добавлять собственные файлы для просмотра.
- Откройте панель «Наборы настроек движения».
- Выберите из списка набор настроек движения.
Файл воспроизводится в области просмотра в верхней части панели.
- Чтобы остановить воспроизведение, щелкните, установив курсор за пределами панели «Наборы настроек движения».
Применение наборов настроек движения
Выбрав анимируемый объект (экземпляр символа или текстовое поле) в рабочей области, можно нажать кнопку «Применить», чтобы применить набор настроек. К каждому объекту можно применить только один набор настроек. Если к объекту применить последовательно два набора настроек, то второй набор настроек заменит первый.
После применения набора настроек к объекту в рабочей области анимация движения, созданная на временной шкале, утрачивает связь с панелью «Наборы настроек движения». Если удалить или переименовать набор настроек на панели «Наборы настроек движения», это не повлияет на анимации движения, созданные ранее с помощью этого набора настроек. Если вы сохраните новый набор настроек, заменив один из существующих наборов настроек на панели, это не повлияет на анимации, уже созданные с помощью исходного набора настроек.
Каждый набор настроек движения содержит определенное число кадров. После применения набора настроек в диапазоне анимации движения, созданном на временной шкале, будет заключено именно это количество кадров. Если к целевому объекту уже применена анимация движения другой продолжительности, диапазон анимации движения изменяется в соответствии с длиной набора настроек движения. Длину диапазона анимации можно отрегулировать на временной шкале после применения набора настроек.
Наборы настроек движения, содержащие трехмерное движение, могут применяться только к экземплярам фрагмента ролика. Свойства трехмерной анимации не применяются к символам графики или кнопок, а также к классическим текстовым полям. Двухмерные или трехмерные наборы настроек движения могут быть применены к любому двухмерному или трехмерному фрагменту ролика.
Применение наборов настроек движения, которые анимируют положение фрагмента ролика по оси Z, приведет к тому, что он также изменит свое положение по осям Х и Y. Это вызвано тем, что движение по оси Z идет вдоль невидимых линий перспективы, которые исходят из точки исправления 3D-перспективы (заданной в инспекторе свойств экземпляра трехмерного символа) до границ рабочей области.
Чтобы применить набор настроек движения, выполните следующие действия.
- Выберите анимируемый объект в рабочей области. Если попытаться применить набор настроек движения к неанимируемому объекту, появится диалоговое окно, разрешающее преобразовать этот объект в символ.
- Выберите набор настроек на панели «Наборы настроек движения».
- Нажмите на панели кнопку «Применить» или выберите из меню панели пункт «Применить в текущем местоположении».
Движение применяется, начиная с текущего положения фрагмента ролика в рабочей области. Если с набором настроек связан траектория движения, он появляется в рабочей области.
Чтобы применить набор настроек таким образом, чтобы движение заканчивалось на текущем положении объекта в рабочей области, удерживая клавишу «Shift», нажмите кнопку «Применить» или выберите из меню панели пункт «Завершить в текущем местоположении».
Также набор предварительных настроек движения можно применить к нескольким выбранным кадрам в разных слоях, если каждый выбранный кадр содержит только один объект с поддержкой анимации движения.
Сохранение анимации движения в виде пользовательского набора настроек движения
Создав собственную анимацию движения или внеся изменения в анимацию движения, к которой применялся набор настроек с панели «Наборы настроек движения», можно сохранить эту пользовательскую анимацию движения в виде нового набора настроек движения. Новый набор настроек появится в папке Custom Presets на панели «Наборы настроек движения».
Чтобы сохранить пользовательскую анимацию движения как набор настроек, выполните следующие действия.
Редактор движения в Animate помогает создавать сложные анимации движения практически без усилий. Редактор движения обеспечивает компактное представление всех свойств, примененных к выбранному диапазону анимации движения, в виде двухмерных графиков. Можно по желанию изменить каждый из этих графиков, а также соответствующие анимированные свойства в индивидуальном порядке. Благодаря точному управлению и высокому уровню детализации можно сделать анимацию более реалистичной с помощью редактора движения.
Редактор движения призван упростить создание анимации движения. Редактор движения позволяет управлять и манипулировать свойствами анимации движения. После создания анимации движения можно использовать Редактор движения для тонкой доработки. Редактор движения упрощает целенаправленное редактирование анимации движения, тем что позволяет выбирать и изменять одно конкретное свойство.
Зачем нужен редактор движения?
Редактор движения призван упростить создание анимации движения. Таким образом, редактор движения обеспечивает детализированное управление анимацией движения и ее свойства. Следующие преимущества можно получить только с помощью редактора движения:
- Простота доступа и редактирования всех свойств, примененных к анимации движения на одной панели.
- Добавление разных стандартных настроек замедления или пользовательского замедления. Редактор движения позволяет добавлять различные наборы настроек, добавлять несколько наборов настроек или создавать пользовательское замедление. Добавление замедления в свойство анимации позволяет без усилий смоделировать реалистичное поведение объектов.
- Результирующая кривая. Можно применять замедления к отдельным свойствам и просматривать эффекты, достигаемые посредством замедлений на отдельных графиках свойств с помощью результирующей кривой. Результирующая кривая является представлением фактической анимации движения.
- Узловые и контрольные точки. Можно изолировать и редактировать основные секции анимации движения, используя узловые и контрольные точки.
- Уточнение анимации. Редактор движения — это единственный способ создать некоторые виды анимации, например анимацию движения по криволинейному контуру на основе отдельного свойства путем настройки кривой свойства.
(A) Свойства, примененные к анимации движения (B) Кнопка «Добавить узловую точку» (C) Переключатель «Подгонка к виду» (D) Кнопка «Удалить свойство» (E) «Добавить замедление» (F) Переключатель «Изменить масштаб по вертикали»
В этой статье предполагается, что вы уже создали анимацию движения и используете редактор движения для доработки анимации.
Для открытия редактора движения выполните указанные ниже действия.
- На временной шкале выберите диапазон анимации движения, который требуется доработать, и дважды щелкните диапазон анимации движения. Также можно щелкнуть правой кнопкой диапазон анимации и выбрать Уточнить анимацию , чтобы вызвать редактор движения.
Редактор движения представляет свойства анимации движения с использованием двухмерных графиков, которые называются кривыми свойств. Эти графики строятся по сетке в редакторе движения. Для каждого свойства строится отдельная кривая, причем время представлено горизонтальной осью (слева направо), а изменение значения свойства — вертикальной осью.
Манипулировать анимацией движения можно путем редактирования кривых свойств в редакторе движения. Для этого в редакторе движения предусмотрены возможности редактирования кривых свойств, которые обеспечивают точное управление анимацией движения. Можно манипулировать кривой свойства путем добавления ключевых кадров или узловых точек. Это позволяет корректировать основные части кривой свойства, где должны отображаться переходы в анимации движения такого свойства.
Обратите внимание, что редактор движения позволяет изменять только такие свойства, которые можно корректировать во время диапазона анимации движения. Например, свойству «Качество» фильтра «Градиентная фаска» может быть присвоено только одно значение в пределах диапазона анимации движения, поэтому его нельзя изменять в редакторе движения.
(A) Кривые свойств, наложенные друг на друга. (B) Кривая в фокусе для выбранного в данный момент свойства.
Узловые точки
Узловые точки позволяют лучше управлять кривыми свойств, позволяя явным образом изменять основные части кривой. Можно точно контролировать форму большинства кривых в редакторе движения, добавляя ключевые кадры свойств или узловые точки.
Узловые точки отображаются на сетке в виде квадратов. С помощью редактора движения можно управлять поведением анимации движения, добавляя узловые точки на кривую свойства или изменяя их расположение. При добавлении узловой точки образуется уголок, где кривая проходит через углы. Однако можно сгладить любой сегмент кривой свойств, используя элементы управления Безье для контрольных точек.
Контрольные точки
Контрольные точки позволяют сглаживать или изменять кривую свойств по обеим сторонам от узловой точки. Контрольные точки можно изменять с помощью стандартных элементов управления Безье.
Редактирование кривых свойств
Чтобы изменить свойства анимации движения, выполните следующие действия.
- В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или просто дважды щелкните выбранный диапазон анимации движения).
- Прокрутите вниз и выберите свойство, которое требуется изменить. Чтобы инвертировать выделение, щелкните его правой кнопкой мыши и выберите пункт «Инвертировать выделение».
- Когда в области просмотра находится кривая выбранного свойства, можно выполнить одно из следующих действий.
- Добавьте узловую точку, нажав кнопку и щелкнув на кривой свойства кадр, в котором нужно добавить узловую точку. Или дважды щелкните кривую, чтобы добавить узловую точку.
- Выберите и переместите существующую узловую точку в нужный кадр на сетке (в любом направлении). Предел перемещения по вертикали определяется диапазоном значений свойства.
- Удалите узловую точку, выделив ее и нажав клавиши Ctrl + Click (Cmd + щелчок на компьютере MAC).
Редактирование кривых свойств с помощью контрольных точек
Для редактирования кривых свойств с помощью контрольных точек выполните следующие действия.
- В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или дважды щелкните выбранный диапазон анимации движения).
- Прокрутите вниз и выберите свойство, которое требуется изменить. Чтобы инвертировать выделение, щелкните его правой кнопкой мыши и выберите пункт «Инвертировать выделение».
- Когда в области просмотра находится кривая выбранного свойства, можно выполнить одно из следующих действий.
- Добавьте узловую точку, нажав кнопку и щелкнув в сетке кадр, в котором нужно добавить узловую точку.Или дважды щелкните кривую, чтобы добавить узловую точку.
Копирование кривых свойств
В редакторе движения можно копировать кривые свойств от одного свойства к другому.
Чтобы копировать кривую свойства, выполните следующие действия.
- В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или дважды щелкните выбранный диапазон анимации движения).
- Выберите свойство, кривую которого требуется копировать, затем щелкните его правой кнопкой > выберите Копировать ИЛИ нажмите клавиши Ctrl + C (Cmd + C на компьютере MAC).
- Чтобы поместить кривую в нужный диапазон с абсолютными значениями, выберите свойство, в которое требуется вставить скопированную кривую, затем щелкните его правой кнопкой мыши > выберите Вставить или нажмите клавиши Ctrl + V (Cmd + V на компьютере Mac).
- Чтобы поместить кривую в диапазон целевой кривой, выберите свойство, в которое требуется вставить скопированную кривую, затем щелкните его правой кнопкой мыши > выберите «Вставить с учетом текущего диапазона» .
Обращение кривой свойства
Чтобы обратить кривую свойства, выполните следующие действия.
- В редакторе движения выберите свойство.
- Щелкните его правой кнопкой мыши > выберите В обратном направлении , чтобы обратить кривую свойств.
Замедление позволяет управлять скоростью анимации движения, чтобы получить реалистичное движение с красивыми эффектами. Применение замедления к анимации движения позволяет управлять начальным и конечным сегментами анимации, чтобы изобразить более естественное движение объекта. Например, замедление часто используется для добавления реалистичного ускорения и замедления в крайних сегментах контура движения объекта. Вкратце, Animate корректирует скорость изменения значения свойства в зависимости от примененного к нему замедления.
Замедление может быть простым и сложным. Animate содержит широкий спектр наборов настроек замедлений, которые можно применить для получения простых или сложных эффектов. Для замедления также можно задать интенсивность, чтобы улучшить визуальный эффект анимации движения. В редакторе движений можно также создавать собственные пользовательские кривые замедления.
Поскольку кривые замедления в редакторе движения могут быть сложными, их можно использовать для создания сложных движений в рабочей области без необходимости создавать сложные траектории движения. Также можно использовать кривые замедления для создания сложных анимаций движения по любым другим свойствам в дополнение к пространственным свойствам, таким как точка X и Z.
Пользовательские настройки замедления
В редакторе движения можно создавать собственное замедление с помощью кривой «Пользовательское замедление». Затем такое замедление можно применить к любому свойству в выбранной анимации движения.
График пользовательского замедления представляет величину движения на протяжении времени. Кадры представлены на горизонтальной оси, а процент изменения анимации движения представлен на вертикальной оси. Первое значение анимации находится на уровне 0 %, а для последнего кадра можно задать значение от 0 до 100 %. Скорость изменения экземпляра анимации движения выражается наклоном кривой. Если на графике создается горизонтальная линия (без наклона), то скорость равна нулю. Если на графике создается вертикальная линия, то скорость изменения мгновенна.
Применение кривой замедления к кривой свойства
Чтобы добавить замедление в свойство анимации, выполните следующие действия.
- В редакторе движения выберите свойство, к которому требуется применить замедление, и нажмите кнопку Добавить замедление , чтобы вызвать панель «Замедление».
- На панели «Замедление» можно выполнить следующие действия:
- Примените стандартное замедление, выбрав набор настроек на левой панели. Укажите интенсивность замедления, задав значение в поле «Замедление».
- Создайте собственное замедление, выбрав вариант «Пользовательское замедление» на левой панели и изменив кривую замедления. Дополнительные сведения см. в разделе Создание и применение пользовательских кривых замедления.
Создание и применение пользовательских кривых замедления
Чтобы создать и применить пользовательское замедление к свойству анимации движения, выполните следующие действия.
- В редакторе движения выберите свойство, к которому требуется применить пользовательское замедление, и нажмите кнопку «Добавить замедление», чтобы вызвать панель «Замедление».
- На панели «Замедление» можно изменить пользовательскую кривую замедления по умолчанию, выполнив следующие действия.
- Щелкните кривую, удерживая клавишу Alt, чтобы добавить на нее узловые точки. Затем можно перемещать эти точки в любое место на сетке.
- Активируйте контрольные точки (щелкните узловую точку, удерживая клавишу Alt), чтобы сгладить сегменты по обеим сторонам от узловой точки.
Копирование кривых замедления
Чтобы копировать кривую замедления, выполните следующие действия.
- На панели «Замедление» выберите кривую замедления, которую требуется копировать, и нажмите клавиши Ctrl + C (Cmd + C на компьютере MAC).
- Выберите свойство, в которое требуется вставить скопированную кривую замедления, затем нажмите клавиши Ctrl + V (Cmd + V на компьютере MAC).
Применение замедления к нескольким свойствам
Теперь можно применять предварительно установленное или пользовательское замедление к группам свойств. Редактор движения упорядочивает свойства иерархически по группам свойств и подсвойствам. Можно применить замедление на любом уровне, то есть к отдельным свойствам или группам свойств в рамках этой иерархии.
Обратите внимание, что после применения замедления к группе свойств можно также редактировать подсвойства по отдельности. Это также означает, что можно применить к подсвойству замедление, отличное от примененного к группе.
Чтобы применить замедление к нескольким свойствам, выполните следующие действия.
- В редакторе движений выделите группу свойств и нажмите кнопку «Добавить замедление» для отображения панели «Замедление».
- На панели «Замедление» выберите набор настроек замедления или создайте пользовательское замедление. Щелкните любое место за пределами панели «Замедление», чтобы применить выбранное замедление к группе свойств.
Когда к кривой свойства применяется кривая замедления, отображается визуальное наложение, которое называется результирующей кривой. Результирующая кривая является точным представлением эффекта замедления, примененного к кривой свойства. Она позволяет судить о конечном виде анимации движения объекта. Результирующая кривая помогает понять, как будет выглядеть эффект в рабочей области при тестировании анимации.
(A) Результирующая кривая для стандартного замедления «колебание-в», примененного к свойству «Расположение X».
В редакторе движений можно управлять тем, какие кривые свойств отображаются для редактирования, а также размером экрана, выделяемым для каждого такой кривой. Кривые свойств, отображающиеся с большим размером, проще редактировать.
- В новом редакторе движения отображаются только те свойства, которые применены к анимации движения.
- Можно использовать переключатель «Подгонка к виду» ( ), чтобы подогнать область редактора движения по ширине временной шкалы.
- Можно настроить размер области редактора движения и выбрать меньше ( ) или больше ( ) отображаемых кадров с помощью элементов управления для изменения масштаба временной шкалы. Также можно использовать ползунок для настройки вида редактора движения.
- В редакторе движения также предусмотрен переключатель для изменения масштаба по вертикали. Функцию изменения масштаба по вертикали также можно использовать для отображения подходящего диапазона значений свойств в редакторе движения. Увеличение масштаба также позволяет вносить более точные и целенаправленные изменения в кривую свойства.
- По умолчанию свойства отображаются в развернутом виде на левой панели редактора движения. Однако детализированный список можно свернуть, щелкнув имя свойства.
Двойной щелчок кривой свойства для добавления узловой точки.
Alt+перетаскивание узловой точки для активации контрольных точек.
Alt+перетаскивание для изменения выбранной контрольной точки (одностороннее редактирование).
Alt-щелчок узловой точки для деактивации контрольных точек (угловых точек).
Shift+перетаскивание для линейного перемещения узловой точки.
Command/Control+щелчок для удаления узловой точки.
Клавиши со стрелками вверх и вниз для перемещения выбранной узловой точки по вертикали.
Command/Control+C/V для копирования и вставки выбранной кривой.
Command/Control+R для обращения выбранной кривой.
Command/Control+прокручивание для увеличения или уменьшения масштаба.
Замедлением называется постепенное замедление или ускорение в ходе анимации, которое делает ее более реалистичной или естественной. Используйте замедление, чтобы применить специальное движение, которое выполняет задачи анимации, такие как «случайное» движение или подскоки мяча. Можно применять замедление, чтобы придать более естественный вид увеличению или снижению скорости за счет постепенной коррекции скорости изменений с помощью плавной кривой замедления. Можно добавлять замедление, чтобы придать случайный характер одному из свойств, например x и y, для достижения случайного дрожащего движения.
В Animate предусмотрено два способа применения замедления к анимации движения.
- Можно указать значение замедления для каждой анимации движения с помощью ползунка «Замедление» в инспекторе свойств движения.
- С помощью редактора движения можно применить набор настроек или пользовательское замедление к одному или нескольким свойствам.
Применение замедления к анимации движения с помощью инспектора свойств движения:
- Прокрутите раздел «Замедление» и измените количество отскоков на 5.
Замедления в редакторе движения
После применения любого замедления к графическому свойству, снимается выделение любого текста в категории «Значение». Уравнение замедления управляет выделенным текстом (анимируемыми значениями), имеются ограничения в отношении доступных значений. Вместо этого редактируйте непрерывную кривую на графике, используя точки управления и другие инструменты редактирования кривой Безье. Также можно отключить замедление и использовать элементы управления с выделенным текстом, затем повторно включить замедление и оценить полученные изменения.
В редакторе движения можно создавать собственное замедление с помощью кривой «Пользовательское замедление». Пользовательское замедление также можно применить к любому свойству экземпляра с анимацией.
График пользовательского замедления представляет величину движения на протяжении времени. На горизонтальной оси показаны кадры, а на вертикальной — процент изменений анимации. Первое значение анимации находится на уровне 0 %, а для последнего кадра можно задать значение от 0 до 100 %. Наклон кривой показывает скорость изменения экземпляра анимации движения. Если на графике создается горизонтальная линия (без наклона), то скорость равна нулю. Если на графике создается вертикальная линия, то скорость изменения мгновенна.
- Создайте анимацию движения.
- Выберите диапазон анимации на временной шкале и откройте редактор движения.
- Прокрутите до категории «Замедления», нажмите кнопку «Добавить», затем выберите «Пользовательское» в меню.
Затем можно отредактировать пользовательское замедление с помощью стандартных элементов управления кривой Безье, которые имеются на других графиках свойств в редакторе движения. Используйте эту функцию, чтобы создать пользовательскую кривую, с помощью которой можно применять замедление между ключевыми кадрами.
Чтобы применить пользовательское замедление к свойству, выберите имя замедления в меню «Замедление». График свойства обновляется пунктирной кривой, которая показывает фактические анимированные значения после применения замедления.
Используйте любой из следующих методов для повторного использования пользовательского замедления в других экземплярах анимации или даже в других документов.
Наборы настроек движения — это предварительно настроенные анимации движения, которые можно применять к объекту в рабочей области. Можно создавать и сохранять собственные пользовательские наборы настроек. Можно использовать существующие наборы настроек движения, а также произвольные анимации движения, созданные пользователями.
Наборы настроек позволяют сэкономить время работы во время создания и разработки проектов, особенно если часто используются похожие виды анимации.
Панель «Наборы настроек движения» также позволяет импортировать и экспортировать наборы настроек. Можно обмениваться наборами настроек со своими коллегами или воспользоваться наборами настроек, предоставленными членами сообщества дизайнеров Animate.
Наборы настроек движения могут содержать только анимацию движения. Классическую анимацию нельзя сохранить в качестве набора настроек движения.
См. также
Применение набора настроек движения
Чтобы применить набор настроек движения, выполните следующие действия.
- Выберите анимируемый объект в рабочей области. Если попытаться применить набор настроек движения к неанимируемому объекту, в Animate предоставляются параметры для преобразования этого объекта в символ.
- Выберите набор настроек на панели «Наборы настроек движения».
- Нажмите на панели кнопку «Применить» или выберите из меню панели пункт «Применить в текущем местоположении».
Движение применяется, начиная с текущего положения фрагмента ролика в рабочей области. Если с набором настроек связан траектория движения, он появляется в рабочей области.
Чтобы применить набор настроек, удерживая клавишу «Shift», нажмите кнопку «Применить» или выберите из меню панели пункт «Завершить в текущем местоположении».
Также набор предварительных настроек движения можно применить к нескольким выбранным кадрам в разных слоях, если каждый выбранный кадр содержит только один объект с поддержкой анимации движения.
Просмотр наборов настроек движения
Все наборы настроек движения Animate предоставляют возможность просмотра, реализуемую с помощью панели «Наборы настроек движения». Просмотр позволяет понять, как будет выглядеть анимация после применения ее к объекту в документе. Добавляйте собственные файлы для просмотра при создании или импорте пользовательских наборов настроек.
- Откройте панель «Наборы настроек движения».
- Выберите из списка набор настроек движения.
Файл воспроизводится в области просмотра в верхней части панели.
- Чтобы остановить воспроизведение, щелкните, установив курсор за пределами панели «Наборы настроек движения».
Выбрав анимируемый объект (экземпляр символа или текстовое поле) в рабочей области, можно нажать кнопку «Применить», чтобы применить набор настроек. К каждому объекту можно применить только один набор настроек. Если к объекту применить последовательно два набора настроек, то второй набор настроек заменит первый.
После применения набора настроек к объекту в рабочей области анимация движения, созданная на временной шкале, утрачивает связь с панелью «Наборы настроек движения». Если удалить или переименовать набор настроек на панели «Наборы настроек движения», это не повлияет на анимации движения, созданные ранее с помощью этого набора настроек. Если вы сохраните новый набор настроек, заменив один из существующих наборов настроек, это не повлияет на анимации, уже созданные с помощью исходного набора настроек.
Каждый набор настроек движения содержит определенное число кадров. После применения набора настроек в диапазоне анимации движения, созданном на временной шкале, будет заключено именно это количество кадров. Если к целевому объекту уже применена анимация движения другой продолжительности, диапазон анимации движения изменяется в соответствии с длиной набора настроек движения. Длину диапазона анимации можно отрегулировать на временной шкале после применения набора настроек.
Наборы настроек движения, содержащие трехмерное движение, могут применяться только к экземплярам фрагмента ролика. Свойства трехмерной анимации не применяются к символам графики или кнопок, а также к классическим текстовым полям. Двухмерные или трехмерные наборы настроек движения могут быть применены к любому двухмерному или трехмерному фрагменту ролика.
Сохранение анимации движения в виде пользовательского набора настроек движения
Созданную или измененную анимацию движения можно сохранить в виде нового набора настроек движения. Новый набор настроек появится в папке «Пользовательские наборы настроек движения» на панели «Наборы настроек движения».
Чтобы сохранить пользовательскую анимацию движения как набор настроек, выполните следующие действия.
Читайте также: