Приветствую. В данной статье мы научимся анимировать наши кнопки, ведь анимация в играх является неотьемлемой составляющей, даже для элементов интерфейса. Изучим подробно данную тему на примере обыкновенной кнопки.
Для начала создадим нашу кнопку через окно Hierarchy. Если хотите, можете добавить картинку к кнопке, или текст, в данном случае это не важно.
Настройка кнопки
Теперь перейдём к настройке нашей кнопки. Выберем нашу кнопку через окно Hierarchy, или через игровую сцену, как Вам удобно. И в открывшемся окне Inspector обратим своё внимание на компонент Button:
- (1) - В поле Transition меняем значение с Color Tint на Animation.
- (2) - Далее у нас есть 5 полей(триггеров), которые отвечают за обычное состояние кнопки, состояние кнопки при наведении курсора мыши, состояние кнопки после клика, и так далее. Вы можете для удобства изменить названия этих триггеров, но мы менять ничего не будем, и оставим так как есть.
- (3) - Жмём кнопку Auto Generate Animation для того, чтобы Unity автоматически сгенерировал для нас анимации под каждый триггер, и контроллер для них.
После чего откроется окно для сохранения Вашего сгенерированного аниматора(контроллера). В нём Вы вписываете любое название Вашего созданного аниматора, например, ButtonAnimator.controller, и жмём "Сохранить".
Далее Unity создаст контроллер анимаций(Animator), а так же 5 анимаций для каждого триггера, и вложит их внутр контроллера. В окне Inspector мы наблюдаем следующее:
А так же для нашей кнопки в окне Inspector создался и компонент Animator, для управления нашими анимациями. В поле Controller находится наш контроллер с анимациями.
Настройка кнопки завершена, теперь перейдём непосредственно к самой анимации кнопки.
Анимация кнопки
Самый распространённый пример анимации кнопок происходит от наведения курсора мыши на кнопку, поэтому в качестве примера мы будем расматривать именно его. Для этого откроем окно Animation, с помощью вкладки Window - Animation - Animation.
Далее выбираем в окне Inspector или на игровой сцене нашу кнопку, и в окне Animation выбираем название нашей анимации, которая отвечает за наведение курсора мыши на кнопку. В нашем случае это анимация Highlighted, вот её мы сейчас будем анимировать.
Теперь перейдём непосредственно к анимации. Для этого проделаем ряд шагов:
- (1) - нажмём на красный кружок, для начала записи нашей анимации.
- (2) - Жмём кнопку Add Property, для работы с нашими свойствами.
- (3) - Раскроем весь список свойств для анимации, нажав на серый треугольник, напротив Rect Transform.
- (4) - Мы будем при наведении курсора мыши изменять размер кнопки, поэтому жмём Size Delta - которая отвечает за размер кнопки. Но если Вы хотите анимировать что-то другое, то выберите то, что Вам больше хочется анимировать.
После всех этих манипуляций, слева мы увидим свойство нашей кнопки, в которой мы можем увеличить как ширину так и высоту кнопки. А с правой стороны автоматически были созданы начальные и конечные ключи, в которых занесены текущие значения широты и высоты вашей кнопки.
Если Вы сейчас переместите временную шкалу между начальными и конечными точками(ключами), а потом в левом меню измените значения ширины и высоты кнопки, то у вас автоматически проставятся на месте временной шкалы новые точки(ключи), тем самым, вы проанимируете свою кнопку, увеличив или уменьшив ширину/высоту.
В конце завершения работы над созданием анимации, обязательно завершите запись так же, как вы её и запускали, нажав на красный кружок.
На этом всё, Ваша анимация готова. Теперь сразу после того, как курсор мыши будет наведён на кнопку, будет срабатывать данная анимация. А если хотите чтобы необходимая анимация срабатывала сразу после загрузки сцены или при клике на кнопку, необходимо таким же способом создать анимацию для Normal или Pressed.
Важно: Ваша анимация работает в зацикленном режиме, то-есть воспроизводится всегда по кругу. Если Вы хотите, чтобы анимация воспроизвелась один раз, то необходимо в окне Project нажать на Вашу анимацию, и в окне Inspector в поле Loop Time убрать галочку.
На этом всё. Если остались вопросы, пишите в комментариях. А если всё понятно, то обязательно жду Ваших лайков :)
