Об анимации форм

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

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

Также можно анимировать положение и цвет форм в рамках анимации формы.

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

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

Создание анимации формы

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

  1. В кадре 1 нарисуйте квадрат с помощью инструмента «Прямоугольник».
  2. Выберите кадр 30 в том же слое и добавьте пустой ключевой кадр, выбрав «Вставка» > «Временная шкала» > «Пустой ключевой кадр» или нажав F7.
  3. В кадре 30 нарисуйте в рабочей области круг с помощью инструмента «Овал».

    Теперь у вас есть ключевой кадр с квадратом в кадре 1 и ключевой кадр с кругом в кадре 30.

  4. Выберите на временной шкале один из кадров между двумя ключевыми кадрами в том же слое, в котором содержатся обе фигуры.
  5. Выберите «Вставка» > «Анимация формы».

    Animate интерполирует фигуры во всех кадрах между двумя ключевыми.

  6. Для просмотра анимации движения протащите точку воспроизведения через кадры во временной шкале или нажмите Enter.
  7. Чтобы анимировать не только фигуру, но и движение, переместите фигуру в кадре 30 в какое-нибудь положение в рабочей области, отличное от положения фигуры в кадре 1.

    Просмотрите анимацию, нажав Enter.

  8. Чтобы анимировать цвет фигуры, измените цвет фигуры в кадре 1, так чтобы цвета фигур в кадрах 1 и 30 отличались.
  9. Если нужно добавить замедление, выберите один из кадров между двумя ключевыми и введите значение замедления в соответствующее поле инспектора свойств.

    Чтобы добавить замедление в начале анимации, введите отрицательное значение. Чтобы добавить замедление в конце анимации, введите положительное значение.

Создание стандартных настроек замедления или пользовательского замедления

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

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

  1. Щелкните слой, содержащий анимацию формы, на временной шкале Animate.

  2. Чтобы открыть свойства анимации, выберите категорию Анимация на панели «Свойство».

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

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

  4. Чтобы применить пользовательское замедление, щелкните значок «Изменить» рядом с элементом Замедление

    Диалоговое окно Пользовательское замедление выводит диаграмму, в которой дается графическое представление о скорости движения во времени. На горизонтальной оси показаны кадры, а на вертикальной — процент изменений. Первый ключевой кадр представлен как 0%, а последний ключевой кадр — как 100%.

    Наклон кривой диаграммы показывает скорость изменений объекта. Если кривая горизонтальна (без наклона), то скорость равна нулю; если кривая вертикальна, то изменение происходит мгновенно.

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

При применении наборов настроек замедления к документу HTML5 Canvas можно создать оптимизированный выходной файл JS. При создании выходных данных технология HTML5 Canvas использует функции замедления анимации JS. 

Управление изменениями формы с помощью хинтов кривых

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

Хинты кривых содержат буквы (от a до z), которые определяют точки, соответствующие начальной и конечной фигуре. Можно использовать до 26 хинтов кривых.

В начальном ключевом кадре контрольные точки желтые, в конечном ключевом кадре они зеленые, а вне кривой они красные.

При создании tween-анимации формы для получения наилучших результатов следуйте следующим правилам.

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

  • Убедитесь в логичной расстановке контрольных точек. Например, если в треугольнике используется три контрольных точки, они должны быть расставлены в одинаковом порядке как для исходного треугольника, так и для промежуточного. Если порядок в первом кадре abc, то порядок acb во втором кадре невозможен.

  • Контрольные точки лучше всего размещать против часовой стрелки, начиная с левого верхнего угла фигуры.

Использование контрольных точек

  1. Выберите первый кадр в последовательности tween-анимации формы.
  2. Выберите «Модификация» > «Фигура» > «Добавить хинт кривых» Начальная контрольная точка выглядит как красная окружность с буквой a, расположенной на фигуре.
  3. Переместите контрольную точку в нужную точку.
  4. Выберите последний ключевой кадр в последовательности анимации. Конечная контрольная точка выглядит как зеленая окружность с буквой a, расположенной на фигуре.

  5. Переместите контрольную точку в положение на конечной фигуре, соответствующее первой помеченной точке.

  6. Воспроизведите анимацию снова, чтобы просмотреть, как контрольные точки изменяют анимацию формы. Чтобы настроить tween-анимацию, переместите контрольные точки.
  7. Чтобы добавить дополнительные контрольные точки, повторите этот процесс. Новые точки появляются со следующими буквами (b, c и т.д.).

Просмотр всех контрольных точек

  1. Выберите «Просмотр» > «Показать хинты кривых». Чтобы команда «Показать хинты кривых» была доступна, необходимо, чтобы слой и ключевой кадр, содержащий хинты кривых, были активны.

Удаление контрольной точки

  1. Перетащите контрольную точку с рабочей области.

Удаление всех контрольных точек

  1. Выберите «Модификация» > «Фигура» > «Удалить все хинты кривых».

Анимация обводки с переменной шириной

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

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

Инструмент «Переменная ширина»

Инструмент «Переменная ширина» позволяет обрабатывать единообразные сплошные обводки для создания изящных, фантазийных обводок. Дополнительные сведения об использовании инструмента «Переменная ширина» см. в разделе Обработка обводок и фигур с помощью инструмента «Переменная ширина».

Добавление анимации формы в обводки с переменной шириной

  1. В Animate CC нарисуйте линию с помощью инструмента «Линия».

    Линейная обводка, построенная с помощью инструмента «Линия», на рабочей области, параметр «Обводка» имеет значение 2 пикселя.

  2. Используйте инструмент «Переменная ширина» для добавления ширины в середине обводки (см. рис. ниже). Дополнительные сведения об использовании инструмента «Переменная ширина» см. в разделе Обработка обводок с помощью инструмента «Переменная ширина».

    Обводка с переменной шириной, созданная с помощью инструмента «Переменная ширина», параметр «Обводка» имеет значение 68,0 пикселей.

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

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

  4. Правой кнопкой щелкните любой кадр от 1 до 30 и выберите команду Создать анимацию формы.

Добавление анимации формы в профили переменной ширины

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

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

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

  1. В Animate CC нарисуйте линию в рабочей области с помощью инструмента «Линия».

    Линейная обводка, построенная с помощью инструмента «Линия», на рабочей области, параметр «Обводка» имеет значение 2 пикселя.

  2. В инспекторе свойств выберите и примените профиль ширины из раскрывающегося списка «Ширина».

    Обводка с переменной шириной, созданная с помощью инструмента «Переменная ширина», параметр «Обводка» имеет значение 68,0 пикселей.

  3. Выберите другой кадр на временной шкале, например кадр 30, и выберите нужный профиль ширины из раскрывающегося списка «Ширина» в инспекторе свойств.

  4. Чтобы добавить анимацию формы в выбранные профили ширины, щелкните правой кнопкой мыши любой кадр между 1 и 30 и выберите Создать анимацию формы.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет