How Animate UI BUTTONS in Unity (Easiest Way)

hello everyone in this video we will teach you how  to animate the buttons in easiest way don't forget   why forget Stay with Us to get Started create a background first to separate buttons layer from background  make a copy with ctrl D and add a ui button resize button as you wish for sprite create a 2d circle you have two choices to change the  sprite the first is to use pre-made   image the second is to select a sprite  from within unity let's try second way   for this drag the circle you  made to source image section now you will see the button is not like  a button it's oval and isn't beautiful   to change it do this in the image section  change the simple image type to sliced   it has a warning that says the image doesn't  have a border to set border for the image   click on image and change sprite mode to single  then bring up a sprite editor and click apply in sprite editor you can  specify borders for images place all borders in the center of circle  press apply and click on the button again drag circle toward image and if image  type wasn't sliced change it to a sliced   look at the button now you will  see cool curves in the corners   to manage these curves change  the number of pixel per... - -_- if you increase the number the curvature  of the corners will decrease and if you   decrease the number the curvature increases in  color section you can change the buttons color   for changing buttons text there is  a text object in the buttons child   that you can edit it with several options  sometimes you have pre-made image and want   to change its shape or something else inside  unity for this set border for the image like   you did before then drag it towards source  image here you can change the color as you want   now if you change oh [ __ ] here we  go again pixels per now if you change this fu@#$ number the button's  image will change very nicely it looks better   if you change your button text; i will ; let's  get to what we made this video for animating   a button for this click on the button and in the  button component change color tint to animation   for creating animation we have two ways the  first way is to create the animation manually   in the old way from animation window which we  do not do the second way is to click the auto   generate animation in the button component  and specify the place to save the animation   if you look at that animation you will see 5  animations or here to the names you see here   in the button components Normal is for when the  button is in its default state; Highlighted is   for when the pointer passes over the button; Pressed  is for when you hold or press the button Selected   is for when you release the button Disabled is  for when you uncheck the interactable checkbox   in the button component that we don't use it  in this video as you see in common state the   Normal animation plays when pointer passes over it  Highlighted plays on click Pressed animation plays   and after release selected plays after clicking  somewhere else normal animation will play again   now it got too easy only you need to record  any animations that you want from this list   for example when mouse passes over the button , the  button gets a little bigger for this Highlighted   animation must be recorded click on the button  and choose highlighted from this list if you   don't know anything about animation , animator and  basic animation in unity i suggest you to watch   above video press record and choose a frame like 20 and increase button's scale a little after play when your mouse passes  over the button or stay on it   button will get bigger but this  animation plays again and again   why? because the loopbox tick of animation is not  removed so uncheck loop time box of all animations now again if you play and pass over the  button with mouse the button gets   bigger and highlighted animation  plays now what if in addition to   what you did you want to play an  animation by clicking the button? for this record Pressed animation go to highlighted  animation and get a copy from last frame   and paste it at the first frame of pressed  animation why? because highlighted animation   will played first then pressed animation will  play then press record and continue what you   recorded in pressed animation in addition to  scaling you can give it various options for   example change the color of the text for this  select text and change the color as you see normal mode don't need any animations  and it is default state of the button   unless you want it have animation after play if  your mouse passes over the button highlighted   animation will play after click on it pressed  animation will play and when you release the   button selected animation will play if you click  somewhere else normal animation will play again   in order to better understand let's delete this  button and try another button like settings i want this button to have a opening  form so i add some images in it's child well , this is the overview of settings Normal  animation of this button should be just compact   when mouse passes over it  or on click this menu opens   so for first animation(Normal) pull up this menu  from below and make it's childs transparent click on the button and in the button  component change color Tint to animation   click the auto generate animation in the  button component and specify the place   to save the animation in highlighted  mode i want that this menu gets open   so i press record button and drag down  the menu and give color to it's childs now if your mouse passes over the  button you will see the menu opens but   it never stops cause it is in the  loop and loopbox never got checked after play you will see when your pointer  passes over the button and stay on it   menu opens now let's add some  Pressed animation to the button   like the highlighted animation so cut all  frames of highlighted and paste it in pressed now if you click on the button you will see  menu opens but it closes right after opening   why? cause after clicking  selected animation plays   so copy last frame and paste it  in the first frame of selected it's done now if you click on  the button its menu gets open   and you can click on it's child and if  you click somewhere else menu closes i hope this tutorial was useful for you  don't forget like and subscribe us thank you

Channel: BudGames

Views: 9,355

Keywords: UI Button Unity, UI Button Animation, dropdown menu, Unity Button, Unity Dropdown Menu

Id: afgt9EnHba0

Length: 7min 52sec (472 seconds)

Published: Tue Sep 06 2022