Google Web Designer: временная шкала + простая анимация

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

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

Условно временную шкалу можно разделить на три зоны: настройки, слои, временные дорожки. Вверху расположены кнопки “Запустить” анимацию и “Повторять” анимацию. При этом зацикливание будет работать только в рамках временной шкалы для нашего удобства. Чтобы зациклить анимацию в готовом баннере, нужно использовать события. Об этом позже.

Временная шкала и анимация в Google Web Designer: https://support.google.com/webdesigner/answer/7529849

Желтым отмечена временная метка, на которой расположен ползунок. Правее длина временной шкалы в секундах. Минимальное значение – 12 секунд. Это вовсе не значит, что анимация должна длиться минимум 12 секунд. Просто особенность интерфейса.

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

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

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

На вкладке “События” находятся кнопки, которые позволяют добавить событие или ярлык на временную дорожку. Об этом чуть позже.

Основы анимации в Google Web Designer

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

Таким образом, наша задача заключается в том, чтобы определить ключевые кадры объекта согласно сценарию и расположить их на временной шкале. А промежуточную анимацию организует сам Google Web Designer.

Чтобы добавить ключевой кадр на дорожку, выделите слой, поместите ползунок в нужное место и нажмите сочетание клавиш “fn + f6” для Mac или правая клавиша мыши на дорожке, “Вставить ключевой кадр”.

Горячие клавиши для создания ключевых кадров

Как видите, на временной дорожке появился ключевой кадр. Также появился второй ключевой кадр на нулевой отметке. А между ними так называемый интервал со свойством динамики “Linear” по умолчанию.

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

Итак, у меня есть ключевой кадр в начале движения и ключевой кадр на отметке 3 секунды. Анимация между ключевыми кадрами происходит линейно. Давайте посмотрим, что у нас получилось.

Я запускаю режим превью и вижу, что с объектом ничего не происходит. И не удивительно, ведь его положение в начальном и конечном кадре не изменилось.

Тогда я выделяю конечный ключевой кадр, чтобы поработать с ним. И перетаскиваю объект в произвольном направлении.

Как видите, появился путь перемещения из одной точки в другую. Я запускаю превью еще раз и вижу, что на этот раз элемент движется из одного состояния (ключевой кадр на отметке ноль) в другое состояние (ключевой кадр на отметке 3 секунды) с линейной динамикой. Все, что я сделал – изменил положение объекта в ключевом кадре.

Окей. Анимация в 3 секунды это слишком долго. Я снова выделяю конечный ключевой кадр и перетаскиваю его по временной дорожке влево на отметку примерно 2 секунды. Интервал между кадрами сократился. Теперь объект движется быстрее.

Варианты динамики

Хорошо, рассмотрим варианты динамики. Правая кнопка мыши по интервалу. Как видите, кроме линейной, есть еще несколько типов динамики. Они просты для понимания, поэтому здесь останавливаться не будем.

Отдельного внимания заслуживает настраиваемая динамика. Для этого кликните “Параметры динамики”, выберите наиболее подходящий вариант и с помощью точек трансформации поправьте кривую на свой вкус. Кнопка “Сохранить как заготовку”, дайте название. Теперь вы можете использовать собственный тип динамики для анимации элементов.

Например, у меня есть заготовка, которую я назвал “Bumps”. Я настроил динамику так, чтобы в конце был небольшой отскок назад. Это прикольно выглядит при анимации текста и не только. Вот как выглядит ее кривая.

Настраиваемая динамика в GWD

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

Далее. Выделять кадры и интервалы между ними можно с помощью:

  • прямоугольного выделения,
  • клавиши Ctrl (или Command на Mac),
  • клавиши Shift.

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

Копировать, вставлять и удалять ключевые кадры можно с помощью контекстного меню. Ключевые кадры можно копировать между временными дорожками.

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

Как вы понимаете, для этого достаточно выделить ключевой кадр, пройти в “Свойства” — “Стиль” — “Прозрачность” и установить значение 0. Обратите внимание, что в первом ключевом кадре уровень прозрачности объекта – 1. Запускаем превью, готово. Все что я сделал – изменил положение и уровень прозрачности объекта.


Смотреть видео

Теперь вы умеете работать с временной шкалой и понимаете, в чем суть анимации Google Web Designer. Ставьте палец вверх, если было полезно, и поделитесь с друзьями! В следующем видео мы наконец-то сделаем первый баннер фиксированного размера! Поехали!

comments powered by HyperComments
(2 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова