Unity UI Panel Animation Tutorial

hello unity fans here's the next tutorial about opening a panel with an animation in the last part I showed you how to activate a panel on clicking a button and we also toggle the visibility but now we'll turn this panel into a kind of menu that has a sub panel that I will open with an animation so change the text to menu and then reduce the height of the main panel okay then I rename the panel to panel menu and as a new child game object I add another panel and this will be the panel that we are going to animate I reduced the height of this new panel bring it a bit downwards and then I anchor it to the top for the background-color I also use a darker tone with a bit of op acity and after that we can go ahead and select the animation window to create the animation for this panel be sure to have the panel selected and as animation file name I choose open menu all right so let's create the open menu animation I select this frame enable automatic keyframe insertion and then you just have to set the height of the panel and the keyframes are added automatically and the open animation is completed you can preview this now in the animation window move the slider to the left or the right and once you're happy with it disable the auto key frame insertion and the preview and in the animation folder you can see your open menu animation I disabled the looping for this and also an animator controller is created called panel I will rename this to menu animator what's really cool about this approach is that you can move around the base object in this case the panel menu as you like and the animation will be displayed in a position that is relative to this object so when you create animations like this with unity keep in mind that it's always a good idea to have a parent object okay so let's go ahead and set up the animator controller I open it and create a new empty state because I don't want to play the animation when the animator controller is created this empty state should be the default so I right-click and choose set as layer default state after that I create a new parameter of type bool and call it open then I create a transition from the empty state to the open menu and this transition will be executed only if the open parameter is set to true so use this open parameter as a condition okay then I duplicate this open menu and create a new transition from the open menu to this new one and I want this transition to be executed if the open parameter is set to false and asset has exit time to false as well so we don't have to wait that the open menu animation is finished I call this new state closed menu and I set the speed to minus one this means I just invert the open animation and this is how I create the closed animation of the menu the last transition goes back to the empty state and that's it for the animator controller okay the last thing that we have to do is to actually call this animation from a script and we are going to reuse the script that we added in the previous part in this part we toggle the activation state of a panel but now we are not going to open the main panel we want to animate the child panel so we just drag this panel into the panel slot then I open the script and we can remove the activation logic instead we get the animator controller as an animator component from the panel that we assigned then we check if this is not null to be sure that this component is assigned to the panel and then we use the get bool method of the animator controller to get the state of the open parameter and again I want to toggle it if it is open I want to close it and vice-versa so what I do is the set pool method with the open parameter and I invert the current state this can be done with the exclamation mark the not operator which is toggling this pool parameter and now start the game and check if it works I press the button and the animation starts and each time I press it the state is toggled so guys that's it I really hope you liked it and it was understandable for you on how to animate a UI panel with unity and if you want to support this channel then of course subscribe if you haven't already and consider being my page when this would really help this channel grow thanks for watching thanks for your support and I see you on JM

Channel: Jayanam

Views: 144,875

Keywords: Unity UI Panel, Unity Panel animation, Unity UI animation tutorial, Unity UI animation, Unity mecanim UI, Unity mecanim UI animation, Unity animator, Unity animator controller, Unity animation tutorial, Unity UI, Unity UI system, Unity 2018 UI, Unity Panel

Id: mz9xfDQ4FCk

Length: 5min 20sec (320 seconds)

Published: Sat Sep 29 2018