Созданную на временной шкале анимацию можно корректировать: зацикливать ее, изменять анимированные элементы, ключевые кадры и диапазоны.
Содержание:
Изменение анимированного элемента
Когда вы изменяете свойства анимированного элемента, в точке, на которой расположен ползунок, создается ключевой кадр. Чтобы изменить существующий ключевой кадр, переместите ползунок в соответствующую точку на временной шкале. Приложение автоматически откорректирует предыдущую и последующую анимации, чтобы они начинались или завершались с новыми свойствами.
Если отредактировать свойства первого ключевого кадра, изменятся базовые свойства элемента. Они передаются следующим ключевым кадрам, если для этих кадров не заданы другие значения.
Если выбрать несколько ключевых кадров и отредактировать свойства элементов, изменения будут применены ко всем выбранным кадрам.
Чтобы элемент появлялся только в определенных кадрах на временной шкале, а все остальное время был скрыт, задайте для него видимый диапазон.
Изменение динамики анимации
Чтобы изменить динамику анимации, нажмите правой кнопкой мыши на диапазон и выберите нужный вариант или Параметры динамики, чтобы задать настраиваемую динамику.
Зацикливание анимации
- На временной шкале нажмите кнопку Задать повтор анимации
на слое анимации, который хотите повторять.
- Во всплывающем меню выберите значение:
- Бесконечно – анимация будет повторяться бесконечно;
- ___ раз(а) – анимация будет повторяться указанное количество раз;
- Нет – анимация не будет повторяться.
Нельзя задать повтор анимации для слоя с видимым диапазоном.
При повторе анимации для слоя она изменяется в опубликованном документе.
Если повторять только воспроизведение анимации, эффект будет виден лишь при предварительном просмотре в рабочей области.
Изменение ключевых кадров и диапазонов на временной шкале
Выбор ключевых кадров и диапазонов
Ключевые кадры и диапазоны можно выбрать несколькими способами.
- Нажмите на ключевой кадр или диапазон, чтобы выбрать его. Если выбрать два смежных ключевых кадра, будет выбран диапазон между ними. Аналогично, если выбрать диапазон, автоматически будут выбраны все окружающие ключевые кадры.
- Чтобы выбрать несколько смежных ключевых кадров или диапазонов, нажимайте на них, удерживая клавишу Shift.
- Чтобы выбрать несколько несмежных ключевых кадров или диапазонов, нажимайте на них, удерживая клавишу Ctrl (для Windows) или ⌘ (для macOS).
- Нажмите и перетащите прямоугольную рамку, чтобы выбрать все ключевые кадры в ней. Диапазоны выбираются, только если рамка захватывает оба их ключевых кадра.
- Нажмите и перетащите рамку, удерживая клавишу Ctrl (для Windows) или ⌘ (для macOS), чтобы уточнить выбор ключевых кадров. Невыбранные ключевые кадры в прямоугольной области будут выбраны, и наоборот. Выбор диапазонов меняется, только если рамка захватывает оба их ключевых кадра.
-
Дважды нажмите на слой на временной шкале, чтобы выделить все его ключевые кадры, диапазоны и маркеры видимых диапазонов.
Перемещение ключевых кадров и диапазонов
Выбранные ключевые кадры или диапазоны можно перемещать по временной шкале, перетаскивая на новое место. Время анимации изменяется соответствующим образом.
Масштабирование анимации
Можно изменить продолжительность анимации, сохраняя пропорциональное соотношение интервалов между ключевыми кадрами. Для этого выполните следующие действия:
- Выберите ключевые кадры или диапазоны, которые нужно масштабировать. Они могут находиться в разных слоях.
- Перетащите один из выбранных ключевых кадров влево или вправо, удерживая клавишу Shift. Продолжительность анимации будет увеличиваться или уменьшаться в зависимости от того, в какую сторону вы передвигаете указатель (к центру анимации или от него). Все выбранные ключевые кадры будут перемещаться на пропорциональное расстояние, кроме последнего, который останется неподвижным.
- Если на временной шкале включена привязка, то она применяется только к перетаскиваемым ключевым кадрам.
- Ключевой кадр не может находиться ближе чем в 0,1 мс от другого ключевого кадра или перекрывать его.
- Невыбранные ключевые кадры не перемещаются, но могут ограничивать движение выбранных кадров.
Масштабирование ключевых кадров на временной шкале
Копирование ключевых кадров
Ключевые кадры можно копировать в другое время того же слоя, в другой слой и даже на другую страницу временной шкалы документа. Вставленный ключевой кадр сохранит все свойства, кроме динамики анимации и пути перемещения.
Копировать и вставлять ключевые кадры можно любым из указанных ниже способов.
-
Выберите ключевой кадр для копирования, нажмите Ctrl + C (для Windows) или ⌘ + C (для macOS), а затем нажмите на новую точку на временной шкале и выберите необходимые слои. Нажмите Ctrl + V (для Windows) или ⌘ + V (для macOS), чтобы вставить ключевой кадр.
-
Выберите ключевой кадр для копирования и нажмите на нем правой кнопкой мыши. В контекстном меню выберите Копировать ключевой кадр, а затем нажмите правой кнопкой мыши на слой в новой точке на временной шкале и в контекстном меню выберите Вставить ключевой кадр.
-
Нажмите на необходимый ключевой кадр, удерживая клавишу Alt (для Windows и Linux) или Option (для macOS), и перетащите его, чтобы дублировать в выбранной точке. С помощью этого способа нельзя скопировать вложенную анимацию и вставить ее на другую страницу, временную шкалу или в другой документ.
Если копировать ключевые кадры на слой без них, в точке 0s автоматически добавляется новый ключевой кадр, если только вы не вставляете ключевой кадр в этой точке.
Если копировать ключевой кадр на существующий, анимированные свойства вставленного ключевого кадра перезапишут свойства исходного.
Удаление ключевых кадров
Чтобы удалить ключевой кадр, нажмите на него правой кнопкой мыши (для Windows) или, удерживая Control, левой кнопкой мыши (для macOS) и в контекстном меню выберите Удалить.
Изменение правил ключевых кадров на панели CSS
Если вам знакомы правила CSS для ключевых кадров (начинаются с ключевого слова @keyframes), вы можете использовать панель CSS, чтобы редактировать стили анимации в Режиме просмотра макета. Изменения на панели будут автоматически отображаться на временной шкале и в рабочей области.
Что можно делать с правилами ключевых кадров
- Выбирать анимированные элементы, чтобы просматривать их правила ключевых кадров на панели CSS.
- Добавлять ключевые кадры между существующими, нажав Вставить ключевой кадр.
- Изменять процентные значения для ключевых кадров.
- Добавлять, редактировать и удалять анимированные свойства ключевого кадра.
- Включать и отключать свойство для всей анимации, поставив или сняв флажок возле его названия.
- Удалять отдельные ключевые кадры, очистив их процентное значение или анимированные свойства.
- Удалять все анимированные свойства CSS для элемента, выбрав правило ключевых кадров и нажав кнопку Удалить выбранные правила
в нижней части панели.
Изменение правил ключевых кадров на панели CSS
Ограничения
- Нельзя изменять динамику.
- Нельзя добавлять ключевой кадр после последнего. Это можно сделать на временной шкале.
Подробнее об использовании панели CSS…