Создание анимации в расширенном режиме

Расширенный режим временной шкалы

Чтобы анимировать элементы в расширенном режиме, необходимо указать точки начала и окончания анимации, добавив ключевые кадры на временную шкалу. Вы изменяете элементы в определенных ключевых кадрах, а Google Web Designer создает промежуточную анимацию.

Интервал между ключевыми кадрами (диапазон) определяет продолжительность анимации. Например, чтобы ускорить анимацию, нужно уменьшить расстояние между ключевыми кадрами. Динамика – это настройка ускорения анимации от начала до конца перехода.

Чтобы анимировать элемент в расширенном режиме:

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

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

Пример

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

1. Первый ключевой кадр определяет состояние элемента в начале анимации. В этом случае изображение не видно, так как его прозрачность установлена на 0.
2. На втором ключевом кадре значение прозрачности – 1 (100 %). Изображение исчезает в течение предыдущего 1-секундного диапазона.
3. На третьем ключевом кадре свойства элемента такие же, как и на предыдущем. В этот полусекундный период анимация не выполняется, и изображение остается неизменным.
4. На последнем ключевом кадре положение изображения меняется так, что в рабочей области видна только правая половина. В течение одной секунды изображение перемещается влево.

Чтобы посмотреть свойства ключевого кадра, нажмите на него правой кнопкой мыши и в контекстном меню выберите пункт Анимированные свойства.

Добавление ключевого кадра

Ключевые кадры можно добавлять несколькими способами. На временной шкале выберите слой с элементом, который нужно анимировать, и переместите ползунок в точку, где должен быть ключевой кадр. Вы можете выбрать несколько слоев, зажав клавишу Ctrl или ⌘. Затем выполните одно из следующих действий:

• Нажмите правой кнопкой мыши на временную шкалу и в контекстном меню выберите Вставить ключевой кадр.
• Нажмите клавишу F6.
• В меню "Правка" выберите Временная шкала > Добавить ключевой кадр.

Если вы изменяете свойства анимированного элемента, когда ползунок находится не на ключевом кадре, то Google Web Designer автоматически создает ключевой кадр в соответствующей точке.

Длина рабочей области временной шкалы

Чтобы добавить ключевой кадр после окончания временной шкалы, продлите ее рабочую область. Например, когда длина по умолчанию – 12 секунд, а ключевой кадр нужно добавить на 15-ой секунде. Для этого:

1. Нажмите на индикатор длины в верхней части временной шкалы.

   

2. Введите новое значение длины временной шкалы (в секундах). Минимальное значение – 12 секунд.
3. Нажмите клавишу Ввод.

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

Максимальная длина временной шкалы для видеообъявлений составляет 5 минут.

Масштаб временной шкалы

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

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