[Фича 10] Анимация фона при наведении на объект

Всем привет! Сегодня мы научимся делать интересную анимацию, где фон добавляется к объекту.

В качестве перехода фона мы будем использовать Scale. Погнали изучать, урок простой, но эффектный!)

Триггерная анимация

Совсем недавно мы разбирали триггерную анимацию.

Вот урок: https://teletype.in/@sitodeal/nHaDcErOs

Здесь она присутствует, поэтому нужно изучить урок (он выше_

Добавляем объект (человечка) и рядом добавляем фигуру, которая будет превращаться в фон.

Связываем эти объекты. Нажимаем на объект 1 и открываем step by step animation.

EVENT: on hover (действие происходит при наведении на элемент)

TRIGGER: shape (нажимаем добавить триггер и нажимаем на фигуру, которая будет перерастать в фон)

Переходим к настройкам пошаговой анимации фигуры

Устанавливаем такие-же настройки EVENT, только в качестве триггера выбираем первый объект (изображение)

Добавляем первый шаг

У фигуры добавляем первый шаг.

Делаем параметр SCALE на 2500%. Этим в первом шаге мы увеличим нашу фигуру (фон) на 2500 процентов. Это нам и нужно. Закрываем настройки.

Помещаем фигуру под изображение

Помещаем фигуру (будущий фон) ПОД изображение.

Выравниваем оба объекта по центру и сохраняем.
Публикуем и смотрим.

На этом мини-урок подходит к концу. Всем успехов!)