[Урок 45] Hover анимация в кнопке

Привет, сайтоделы! Соскучились? Знаю, что соскучились. Я весь в проектах, скоро получите годный рассказ про весь цикл создания сайта (про это позже).

А пока, ловите годный урок анимации кнопки, при помощи пошаговой анимации.
Делается достаточно просто - применима почти везде. Изучайте на здоровье!

Добавляем два главных объекта

Во главе всего - правильные блоки.
Нам нужно добавить кнопку и подложку.

Чтобы добавить кнопку нажимаем крестик в верхнем левом углу и выбираем "add button". Подложку я сделал обычной фигурой и стилизовал её под кнопку (над дизайном подумайте сами, я не стал запариваться).

И так. Два объекта есть. Теперь нужно их расположить в первоначальное положение.

Заметьте, что кнопка находится НАД подложкой. Ну это и логично.

Добавляем анимацию.

Теперь осталось заанимировать кнопку.
Мы будем работать только с объектом-кнопкой.

Открываем пошаговую анимацию.

EVENT: on hover (анимация выполняется при наведении на объект)

Нажимаем "Add step"

Добавляем первый шаг. В нём просто смещаем кнопку, чтобы сравнять её с подложкой.

MOVE X/Y: перемещение кнопки по оси Х и Y

Ну и не забывайте про остальные параметры, которые вы можете выставить по желанию.

Duration - скорость анимации (в секундах)

Easing - ход анимации.
Ну, как то так. На связи был сайтодел, обучайтесь) Успехов!)