google web designer

Google Web Designer — трансформация фигуры

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

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

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

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

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

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

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

5. Попробуйте протестировать свою анимацию. Для этого нажимаем кнопку «Запустить», расположенную на временной шкале:
google-web-designer запустить анимацию
Как видно — созданными нами на первом слайде круг очень даже просто, и самое главное — автоматизированно — трансформируется в квадрат с закругленными углами, изображенный на втором слайде (на фрейме ниже видно, как это происходит. Подчеркну, что в примере трансформация зациклена на бесконечный повтор, но этот вопрос мы обсудим чуть позже :)):

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

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

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

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

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

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