Привет, друзья!

Сегодня с помощью Google Web Designer мы научимся трансформировать одну простую геометрическую фигуру в другую, а потом — в третью. Например — круг в квадрат с закругленными углами, а потом — в квадрат.

Если вы не знаете, как создавать квадрат или круг в Google Web Designer — смотрите эту запись.

Давайте начнем:
1. Создаем баннер. Как в прошлом уроке — я беру за основу размер 300х600 пикселей с быстрым режимом анимации.

2. С помощью инструмента «Работа с тегами» создаем круг, и для наглядности заливаю его желтым цветом. Толщина границы — 10 пикселей, цвет — черный. Напомню, что корректировать заливку фигуры, а так же работать с другими параметрами можно с помощью панели «Свойства», расположенной справа:

3. На временной шкале с помощью клика по значку «+» добавляем еще один кадр к уже имеющемуся. Изначально все имело приблизительно такой вид:
после добавления кадра получаем вот такой:

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

На скрине выше — свойства отрисованных углов, благодаря которым создается круг. Если же мы хотим получить квадрат с закругленными углами — просто меняем параметр с отметки 80 на (например) 30. В итоге получаем нечто подобное:

причем сама фигура будет выглядеть как-то так:

5. Попробуйте протестировать свою анимацию. Для этого нажимаем кнопку «Запустить», расположенную на временной шкале:

Как видно — созданными нами на первом слайде круг очень даже просто, и самое главное — автоматизированно — трансформируется в квадрат с закругленными углами, изображенный на втором слайде (на фрейме ниже видно, как это происходит. Подчеркну, что в примере трансформация зациклена на бесконечный повтор, но этот вопрос мы обсудим чуть позже :)) (upd: демонстрашка по какой-то причине не работает в браузере Chrome, но великолепно работает в Opera):

Кстати! Если вас смущает скорость смены кадров (сейчас это 0,5 секунды) — с помощью изменения параметров ключевых кадров (это доступно в временной панели):

вы можете не только скорректировать время смены ключевых кадров, но и изменить стиль перехода:

6. Теперь попробуем трансформировать квадрат с закругленными углами в простой квадрат. Для интереса эксперимента так же сменим цвет заливки фигуры с желтой на зеленую. Для этого аналогично с пунктом 3 добавляем ключевой кадр на временной шкале:

в котором указываем параметры нашей фигуры (в нашем случае это параметры скругления углов, а так же цвет заливки — для этого, напоминаю, используем панель «Свойства», расположенную справа). Корректируем скругление до нуля, и заливаем фигуру зеленым цветом:

После этого запускаем нашу анимацию, и наслаждаемся: круг желтого цвета становится квадратом с закругленными углами, а после трансформируется в квадрат зеленого цвета.

И специально для вас — видеоурок 🙂

Спасибо за внимание!
Делайте репост на свою страницу, и в случае возникновения вопросов — не стесняйтесь их задавать!