How To Animate In UI TOOLKIT || Unity

in the last tutorial I showed you how to use UI toolkit and this time I will cover how to create button animations using pseudo classes how to create fading moving scaling and other animations using different style classes and lastly how to animate using D TW through code let's begin with animating the buttons using pseudo classes that Unity provides for us those pseudo classes Define States and when one of the elements enters the state it is going to change its style so we'll go to the UI build and I will copy the menu button style that we have created I will rename it and add the pseudo class to it we'll be using the hover pseudo class and now we can select the selector and change some stuff that we want to happen when we hover over the button so I will go to the transform Tab and I will increase the scale you can also change the color and so on I will create another menu button selector using the active pseudo class this one is going to trigger when we actually click the button so I will just change the color and when I hover over the play button you can see that it is getting bigger and when I click it it also changes its color but it doesn't work with the other buttons which is because we have already set some inline Styles in the UI Builder so I will just select the settings button and we can see it down in the transitions we have some transition that we don't need so I will just click the minus go to the quit button and do the same and now we can see that it works with all buttons and to make the movement a bit smoother We'll add some transitions select the menu Buton Buton H selector and we can go down to the transition animations give it some duration and now it is going to automatically transition between the menu button how State and the menu button State we can also select which properties we want to be affected by this transition but we want to keep all of them and you can also select different e Inc type if you want and you can do the same for the menu button active selector where I will make the duration really quick because when we click it we don't want it to take too long and now we can see the animations are looking a lot better now let's make animation for the settings so it is going to slide from top and is going to fade in we'll need to create two new selectors for the settings one for when we can see it and second one for when it is out of the screen so I will select the settings parent and create new selector from it using the extract inline styles to new class button now I will go to the transform Tab and I will just move the settings so that we can't see it and I will also go to the display Tab and I will turn the opacity to zero and create new selector from it and now when you try to remove the settings up selector which is the style when we can't see the settings you should see that it goes back down and when we add it back in it should go up now we'll just add some transition for it so I will select the settings parent go down to the Transitions and again you can give it some easing and some duration and now when you remove the settings up selector you can see that it is slowly fading and it is moving down and when we edit it should go back up so that looks pretty nice now we'll just need to do all of that through code we can delete these slides when we are setting the display style because we won't need that and what we'll do instead is that we will add the style class to the list so on the start I will just make sure that we can't see the settings so I will do settings parent do add class to list and to the parentheses we need to type the name of the class which in my case is settings up and you should type it without dot just like this so on start we won't be able to see it when we click the button to close the settings we also want to add the class to the list and when we click the settings button we want to remove it so this way we are just changing the styles of the settings and it is automatically going to transition between them so we can try clicking the settings button and we can see the settings comes from top and is slowly fading out and when we close it yep the same animation plays so we can see that it is really easy to anim made these buttons and other elements in your UI but what if you don't want to be creating hundreds of styles for your UI well the other way to do it is through code and we'll be using the do TW package and that just allows you to easily interpolate between values using different eing types you can download the dowi on the asset store and once you have it downloaded you will also need to go to tools the m and go to the utility panel where you will need to set it up after that we can open our script at using dg. wiing and we can use all of the tning functionality I will use it to animate the underline in the settings menu so I am just going to quickly edit so we have just this underline that will be moving from left to right back in the script I will make a variable for it so it will be visual element so we have a reference for it and I will go to the on settings button click function so when you open the settings we will start moving it first I will just Define float variables for the starting and the ending point of the animation so we have the starting position so I'm just taking the local bounds of the settings underline and accessing the width which I'm multiplying by 0.1 so this is just the starting position on the left and then we also have the ending position I'm also defining the current position and to make it move we'll be using the v.2 function this is taking quite a few parameters but before we create it I will just create variable for the TW so that we can later stop it you can see to the function we need to provide a ga s and value and the duration first the getter will be the start position so we are using the Lambda for that next into the setter we'll just Define that we want to set the position to the X which is the actual value that the wi returns us and then we can just provide it the end position and the duration so now we have cre created D but to actually use it we need to be setting the position of the underline element to do that we'll use the onupdate function so until the twin is running we can actually do something on update so we'll just change the position of the element so we'll just set the position to new Vector 3 the position is on the X and on y we can have just zero because this is local position we can try going to the settings and we can see the animation place just once so we'll need to add some looping to it so I just changing these functions and using the set Loops we can set as many Loops as we want minus one means infinite loops and we can select the loop type which in my case I selected yoyo so it'll go to right back to left to right left and so on and if you want you can also use the set e so that you can specify which is you want to use and to make sure that it wi no longer exists when we close the settings I will go to the on close settings button clicked and just kill the wi just like that so we can try opening the settings yep we can see the underline is constantly moving from left to right and like this you could animate as many visual elements as you want you can see that animating elements in your ux is really simple you can either do it through creating many styles or just code it using D twe I hope that this video was useful if you have any questions or suggestions let me know down in the comments don't forget to like subscribe and I will see you in next videos bye thanks for watching this video till the end if you are looking for a Unity C or bold tutor then I am here for you so feel free to send me a message to my Gmail and take a look at my website for more info I can help you with your personal projects or teach you anything about game development you would want to know you are welcome

Channel: Freedom Coding

Views: 1,624

Keywords: Unity, Unity2D, UnityEngine, GameDevelopement, IndieGameDev, PCGames, Coding, C#, Easy, Tutorial, Education, Unity3D, Programming, Bolt, UnityTurorials

Id: qm59GPmNtek

Length: 7min 58sec (478 seconds)

Published: Mon Feb 12 2024