Master UI ANIMATIONS! - Unity UI tutorial

okay so this is my example scene i can open this dialog box close it and even enable options menu but there is something wrong here there are no animations after this episode you should be able to liven up this interface with nice transitions using just a few lines of code if you'd like to create animations without coding check out my other video where i teach you how to use unt animations tools let's go so in this video we'll be using larping basically we have some kind of object with start parameters and we declare the end position size or transparency of it based on that our script will calculate the differences and animate them in the set time we can write scripts like that by ourselves but it's much better idea to use one of the free libraries in the unity asset store in this episode we'll be using a lean twin great and free tool created just for our needs if you have unity 2019 or older open asset store in the unity itself you can find it in the window menu and then asset store search for lean twin and then click add to my assets and import to your project if you're using 2012 or newer everything has been moved to the package manager go to window package manager and then from this drop down select my assets and search for lean twin same here just click download and then import to your project ok so now let's look at the prepared scene here i have a few action buttons and other components like character settings box and even dialog box that will open on the full screen currently clicking any of those buttons doesn't do anything so let's fix that i'll start by working on this character the idea is that after clicking this button our character will start jumping jumping is of course just changing the y position of this character image so let's try to create an animation that will do that click on the character game object then add a component and create a script called character jump open it first we need to create a new method that will be triggered on button click instead of start and update methods type void start jumping open brackets inside of it let's use our lean twin asset for the first time we'll start by typing transform which of course corresponds to the transform of this object dot lean move local and passing a new position as the vector 2 and the time of the animation so because our character has a pivot point in the middle center the x 0 and y 0 point is the center of the screen luckily i've only changed the x value by moving it to the right so the current position is x 270 and y zero to move it up in the animation all we need to do is to specify a new position with the higher y so here in the arguments type new vector 2 and pass in a new x value so the same 217 and new y value so let's say 40. then specify animation duration let's say one second okay that should be it for now let's save it go back to unity and hook up our button click on the start jumping button object and here in the on click event dragging from the hierarchy our character and select character jump start jumping great now let's try it out press play and click on the button it works but it doesn't look good not to mention that our character is currently levitating the first thing we'll fix is the animation curve so currently animation has the constant speed throughout the entire animation but there are a few handy ease curves that can help us check out this cool web demo i have linked in the description this blue box by default moves with the linear movement the same as our character but if we would change that to ease out you can see that animation slows down at the end which is way more pleasant to watch i'll select that ease out quart that for me resembles the jumping gravity okay now after we selected our curve let's add it to the script simply at the end of this line add dot set ease and type the one we've selected so out quartz great now when we go back to unity and test our game you can see that character jumps and slows down a bit at the end the last step will be to lube the animation so in the script simply add set loop pinpoint now our character will constantly reverse and repeat the animation which gives the effect of jumping okay let's move to the next one so here i have a very basic settings object by default it's constantly visible but we don't want that it should nicely appear when clicking the show settings button and of course close after pressing the close button as you can see here i've already created a script called settings window with two methods that are already connected to the corresponding buttons this time i'd like to have a size in animation which basically will transform from 0 to 1 scale in all axes in the open method let's type transform.lean scale and pass in vector2.1 which has x and y values set to the 1 and of course length of the animation this time let's make it 0.8 second of course if we'll try to play that animation nothing will happen because by default this object already has size of 1 but we can easily fix that by changing that to 0 in the start method simply type transform dot local scale equals vector2.0 oh and finally in the close method let's type transform.lean scale and pass in vector2.0 as the final scale and one as the time i will also add said is in back to show you different kinds of curves okay that's it it's finally time to test it out in unity you can clearly see both animation on opening the settings screen and the closing animation of course you can repeat that multiple times okay last but not least the dialog box animation so here i have this full screen object which has black background to dim the screen and the dialog box itself with a simple button to close it my idea is to have a background slowly fading in and this middle box flying in from the bottom as before i've already created a dialog box script which contains the methods on enable and close dialog the reason why we don't have an open dialog method is that i want this animation to start immediately after making this game object visible let's start by defining two objects that will be animated the first one will be a box itself so type public transform box the second one will be a black background but the problem is that using the basic transform component you're not able to change the transparency to do that we need to go back to unity and for the black background object we need to add a new component called canvas group it allows us to change the transparency of this image using that one value okay so back to our script type public canvas group background okay time for the on enable animation for the background we can simply type background dot lien alpha and passing the final value so that would be 1 and the time 0.5 remember that we need to reset it to the zero first so above that type background that alpha equals zero okay now let's work on the box animation we want to basically move it from the bottom of the screen to the middle so type box dot lean move local y because we're only moving that in the y axis and in the final y point so that would be 0 and time also 0.5 seconds i'll also add set ease out expo to smooth out the animation and the new thing i'll also delay the animation by typing at the very end of this line dot delay equals 0.1 as before we need to reset its position before animating so before that type box dot local position equals new vector 2 with 0x and minus screen dot height which means it will start at the bottom below the visible area remember that you can get source files for all unity ui tutorials by supporting me on patreon link in the description okay let's also quickly fill up the close dialog method so type background dot lien alpha and passing 0 as an end value and 0.5 as a time and then box dot lean move local y and pass in minus screen that height as the end value and 0.5 as the time i will also add that set is in expo ok that should be all save the script go back to unity and let's hook up all the elements first connect the background object to the background field and the dialog box to the box field next methods close button is already connected to the close dialog method but here in the menu the open box button should be connected to the dialog box and instead of running any method we'll simply select game object set active and set it to true time to test everything out i will press play and try to click open dialog box whoa it it looks great now let's close it it also works but you can see i can't click anything now that's because the dialog group is still enabled and even though our background is completely transparent it still obstructs the view our solution the script will be to hide the whole dialog grouped object fortunately lean twin allows you to set what should happen after the animation is completed let's start by creating a simple method that will be triggered type void on complete open brackets and here we only need to type gameobject dot setactive and passing false then at the end of this line that animated our box let's add that set on complete and passing the name of our method so oncomplete ok that is the end of coding for today let's test everything out for the last time i click start jumping which triggers our character jump animation then let's show settings and close them and finally let's open a dialog box with this great animation and close it as you can see after close animation everything works just fine and we can even open the dialog box again so that's it be sure to check out other video about ui animations as always thanks a lot to my awesome patrons that support this channel be sure to check out my other videos about playfab and unity ui see you soon

Channel: Coco Code

Views: 45,631

Keywords: unity, cococode, bionicl code, bionicl, unity3d, Maciej maj, tutorial, guide, playfab, coco code, LeanTween, Unity Lerp, Lerping, Tweening, Unity animation, Unity UI animation, Unity UI, Unity GUI, Animator, Unity Animator, Unity animator script, Unity animation using script, Animate using scripting, Animation scripting, Scripting animation, Animation, Anim, LeanTween tutorial, LeanTween guide, Unity asset store, Unity assets

Id: YqMpVCPX2ls

Length: 14min 7sec (847 seconds)

Published: Thu Feb 25 2021

Reddit Comments

[u/AutoModerator]

This post appears to be a direct link to a video.

As a reminder, please note that posting footage of a game in a standalone thread to request feedback or show off your work is against the rules of /r/gamedev. That content would be more appropriate as a comment in the next Screenshot Saturday (or a more fitting weekly thread), where you'll have the opportunity to share 2-way feedback with others.

/r/gamedev puts an emphasis on knowledge sharing. If you want to make a standalone post about your game, make sure it's informative and geared specifically towards other developers.

Please check out the following resources for more information:

Weekly Threads 101: Making Good Use of /r/gamedev

Posting about your projects on /r/gamedev (Guide)

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.