Timeline Advanced Mode Overview - Google Web Designer

Здравствуйте.

Меня зовут Натали. Я специалист

по Google Web Designer.

В этом видео я расскажу,

как создать анимацию

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

По умолчанию временная шкала
расположена в нижней части

рабочей области.
Это один из ее двух режимов,

второй – быстрый режим.

Большинство файлов
открывается в быстром режиме.

Чтобы переключиться,
нужно нажать эту кнопку

в правом верхнем углу.

Вот быстрый режим, а вот расширенный.

Быстрому режиму посвящено отдельное видео,

в этом я расскажу о расширенном.

Он более сложный, но предоставляет больше

возможностей.

Для примера я взяла
это небольшое анимированное объявление

с двумя сменяющимися изображениями,
двумя текстовыми блоками,

которые появляются
и исчезают, и логотипом в конце.

В этом видео
я расскажу, как создать его

в Google Web Designer.

Начнем со сменяющегося изображения.

Перетаскиваю его в рабочую область

и располагаю так,

как оно должно
появиться в начале анимации.

Вот так.

Позже оно сдвинется вот так.

Как видите,
на временной шкале появилась дорожка.

Это слой временной шкалы –

интерфейс, с помощью которого
настраивается анимация

для этого объекта.

Чтобы создать анимацию,

нужно определить ключевые кадры –

точки, в которых элемент
будет обладать определенными свойствами, –

и настроить время и способ перехода

между значениями этих свойств.

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

В начале оно
показывается в течение секунды.

Размещаю ключевой кадр
на одной секунде –

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

Затем добавляю
ещё один через полсекунды.

В этом кадре

перемещаю изображение в нужное

положение.

Это изображение тоже
отображается в течение секунды

и ещё через полсекунды

исчезает из поля зрения.

Теперь можно просмотреть анимацию,

перемещая ползунок
по временной шкале,

или нажать кнопку воспроизведения слева,

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

Выглядит неплохо.

Идем дальше.

В готовом объявлении
видно, что изображение

плавно появляется в начале,

а потом сменяется другим.

Настроим это появление.

Выделяю все ключевые
кадры с помощью рамки

и сдвигаю, чтобы добавить место

для появления в начале, и вставляю

ключевой кадр на нулевой отметке.

В этом кадре задаю
для непрозрачности элемента

значение 0.

Во всех остальных кадрах элемент
должен быть полностью непрозрачным.

Теперь добавляю текст.

В образце два текстовых блока,

которые сменяют друг друга
со сменой изображения.

Создам первый блок.

Он должен появиться,

отображаться в течение этого времени,

а затем исчезнуть
со сменой изображения.

В начале элемент не отображается,

поэтому устанавливаю
для него нулевую непрозрачность.

Затем создаю ключевой кадр
на отметке в полсекунды

со 100%-ной непрозрачностью.

На полутора секундах
непрозрачность все ещё 100%,

а на кадре второй секунды
она снова становится нулевой.

Можно вставить кадр,

как я делала раньше,

а можно скопировать его.

Удерживая клавишу Alt,
можно скопировать кадр

и перетащить его
в нужное место.

Это поможет сэкономить
время при создании анимации.

Добавляю последний кадр,
в котором текстовое поле полностью

исчезает.

Посмотрим, что получилось.

Отлично.

Второй текстовый блок идентичный первому,

только с другим текстом,

и появляется он
после того, как первый исчезает.

Поэтому я сэкономлю время,

скопировав этот слой
вместе с анимацией.

Нажимаю на нем
правой кнопкой мыши

и выбираю "Дублировать слой".

Дальше с помощью рамки

выделяю все кадры и перемещаю их

в нужное место.

Сопоставляю кадры,
на которых исчезает первый текст

и появляется второй,

чтобы они не пересекались.

Когда ключевые кадры
находятся так близко,

можно использовать этот ползунок,
чтобы увеличить разрешение

временной шкалы.

Теперь изменю текст.

Текстовые блоки находятся

один над другим.

Если я нажму здесь, то могу случайно

изменить верхний.

Заблокирую его,

чтобы случайно не активировать.

Изменяю нижний.

Анимация почти готова.

Теперь разберем,

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

Сейчас между каждой
парой кадров отображается Linear.

Это значение функции CSS "Динамика",

с помощью которой
рассчитываются промежуточные значения

между каждой парой кадров.

Linear означает, что значения
меняются с постоянной скоростью.

Здесь есть и другие варианты.

Если нажать правой кнопкой мыши,

отобразятся все
стандартные функции динамики

согласно спецификации CSS.

Для этого перехода,

где изображение движется
от одной части к другой,

лучше подойдет другой вариант динамики –

Ease-in-out, в котором движение
сначала немного ускоряется,

а затем замедляется.

Так он выглядит

более естественно.

Ограничиваю область
предварительного просмотра

только этим переходом,
перетаскивая эти желтые маркеры.

Зацикливаю просмотр

и запускаю его только для этой области,

чтобы выполнить отладку.

Отлично смотрится.

Кроме того, можно не использовать

стандартные варианты динамики,

а создать собственный.

Если нажать правой кнопкой мыши
и выбрать "Параметры динамики",

можно настроить кривую Безье

по своему усмотрению, сохранить ее
как пользовательскую заготовку

и нажать "ОК", чтобы применить.

Вот и все, что я хотела рассказать.

У нас есть и другие руководства,

в которых более подробно рассматривается

работа с анимацией.

Спасибо за внимание.