Create UI ANIMATIONS without ❌CODING❌! - Unity UI tutorial

recently i posted a video where i show you how to create a simple animation using scripting but unity has an amazing animation tool that will allow you to do all of that and more without writing a single line of code in this episode you will learn how to set up a simple looping animation create animation transitions animate multiple objects at once and trigger scripts using the animator let's go okay so to start off check out this demo scene i've prepared here i have a big red button an inventory system and finally an advanced example let's start with the first one so imagine this button is something really important in your game and you like to make sure that the player will notice it it already has red background and big text but i think adding the animation will help achieving our goal to start off at the very top select window animation animation that will open a window where you'll be able to set up object movement on this handy timeline click create in the assets add a new folder called animations and inside of it let's save our new animation with the name look at me so this is our timeline by default it's all empty but we will quickly change that in a second click on this small red record button when this option is active every changed object properly will be saved on the timeline so make sure that the time is set to the first frame and set the size value of our button to 1.5 in both axes notice that those three fields turned red which means that the animation window is looking at their change now let's move our playhead to 1 second on the timeline and change object size to 1 in both x and y the animator's job is to calculate the difference between those two values and to create a smooth animation now when you press the play button you'll be able to preview your animation without starting the game which is pretty handy as you can see by default your animation will loop and it looks a bit annoying when it jumps like that so let's add one more keyframe at the time of 2 seconds that will change the size value back to 1.5 in both axes now animation looks much better and in fact i have a great news it already works when you run your game a quick tip before moving to the next example if you like to add a wait time before the animation loop you can simply move your playhead somewhere further and add a new keyframe by pressing this button and selecting add key okay so let's move on to the second example here my idea is to have this simple 5 slot inventory slide in after clicking this bug icon so first we need to create the animation same way as before this time i will click on the whole inventory group in the animation window i will press create and maybe inside of a new folder called inventory i'll save it as the open animation so once again first make sure to press the record button and move our inventory slots behind the bug button as you can see that way all slots disappeared because i use the mask component more on that in the separate episode then move the playhead to half a second and move our slots to the opened position press play in the animation window and it looks about right but here we have a problem we don't want our animation to constantly loop but we'd like to have a few stages of it the solution is to create four separate animations first we have the open animation we've just created and then an idle opened animations that would basically have the ui opened and operational then if the user clicks a close button we'd like to have a close animation followed by a closed idle state but how to do all of that and how to link your animations you may have noticed that while creating a new animation there was a new component added to our game object called animator to understand what it does you need to imagine that the animator is the director of this object animator groups all animations we spoke about a second before and work out which one should be triggered at which moment also that's the component we'll be communicating with if we want to make any changes in the animation process like opening or closing inventory sounds complicated look how quickly you can define all of that in unity first we'll create three remaining animations in the animation window click on a title of our animation and create new clip let's call it opened as i said before this will be basically an idle state but we still need to tell what should be happening so press the record button and reposition our slots at the 0x value make sure that this field is red if it's not you might want to type some fake value and then change it back to 0 so that animator will catch on then add new clip name it close press record reset starting point move to half a second and change x value so that the slots will be behind the bug item and finally let's create the last animation called closed press record and make sure that the first frame has negative x value with the ui hidden below the bag okay time to link everything remember my animated graphic i showed you a second before turns out the built-in tool inside of unity has the exactly same layout at the very top press window animation animator and here you can see all four animations we've just created now it's time to move them the same way i showed you on the graphic so that they will create this kind of circle then time to add transitions between animations but don't think these are transitions like in powerpoint that allow you to slide jump or do some kind of weird tricks but the transition is basically a jump between two different animation blocks that can be triggered after one animation is finished or if some kind of trigger happened in our case we'll have two transitions of the first kind for example open animation should transition to opened animation automatically let's do that quickly right click on the animation clip select make transition and click on the next clip select this white arrow and in the inspector on the right make sure that the hash exit time toggle is on which basically means that the transition will happen immediately after the first one also here in the settings set transition duration and exit time to 0 so that unity won't try to fade in between them let's repeat that quickly for the close to closed transition right click make transition select closed click on the white arrow and change the transition settings ok i can actually show you how it works in action i'll press play and as you can see at the bottom it first quickly do the open animation and then stays at the opened state great so now how to create animations that will run on a button press first we need to create a trigger on the left side of the animator select parameters tab click this small plus icon and select trigger name it close then let's create a new transition between the opened and the close animation and this time uncheck has exit time because we don't want to run it automatically change the duration also to 0 and here comes the most important part in the conditions area click plus and make sure that the closed trigger is set as the name suggests we just specified which trigger needs to be turned on to run this animation let's then quickly create closed to open transition uncheck has exit time change duration to 0 create a new trigger called open and here in the conditions click plus and select open trigger ok that's it for the animator setup let's run the game and click the small button next to the close trigger wow it it really works now press the button next to the open trigger and that also looks just fine remember that you can get souls files for all unity ui tutorials by supporting me on patreon link in the description of course in the game player won't be able to click on those animation triggers so i will show you a very simple way to set triggers using existing buttons on the scene when i click on this close inventory button here i have on click event let's drag in our inventory object which has the animator from the drop down select animator set trigger string and in the argument type the name of the trigger so in this case close remember it's case sensitive then do the same for our bug icon drag in animator select animator set trigger string and type open one last thing before i show the final product our animator starts on the open animation so to change that to the closed animation just right click on it and select set as a layer default state now when everything is set up we can start the game and look how our animation smoothly opens and closes the inventory ui the last example will be this screen which is heavily inspired by mobile games for example after each level in angry birds you see this screen which displays your score and star rating let's create a nice animation which will copy exactly that so here we have a dialog box with 3 stars score text and a button that sends a start trigger in the prepared animator we'll be working on the animation called show score my idea is to have three stars fade in and score text fly out from the bottom to animate the transparency of the ui object we can use a canvas group component select all three stars and in the inspector click add component search for canvas group and add it now click on the record button select the first star and change the alpha of it to zero then move the playhead to half a second and change alpha back to one as you can see that smoothly fades in our object i will now repeat the exactly same thing for the second star everything in the same time frame and finally the third star okay so right now all three animations are being played at once but we can start experimenting and have a bit of fun with them for example you can now easily change the time of each animation by just dragging keyframes in my opinion this effect looks pretty good if you would also move the start keyframes we just achieved the animation of each star being shown separately great but remember that each object can have multiple properties animated at once for example we might want to turn the stars orange after all of them appear so let's just move our playhead to 1 second then select all stars force animation to create a keyframe by setting image color to white and finally after moving playhead a bit on the timeline set a new orange color that creates a nice color change transition with just a few clicks okay finally let's work on the score text move the playhead to just about here click on the score text in hierarchy and move it to some kind of position below the dialog box again i'm using here a mask component that hides everything that leaves this yellow area and now move your playhead a bunch of frames further and reset the text position just like this notice that even though we've created our first frame here the animation window automatically created a start position keyframe that breaks our animation to fix that simply click on it and remove it if you watched my previous video or ever worked with some kind of animations you might remember that i showed you some ease curves in this tool you can also use them just right click on the small curves tab at the bottom and select the animation you like to work with in my case the score text sometimes the curve is not visible or it has some weird sculling in that case just press a on your keyboard to fix the view as you can see this is a simple ease in out curve that starts slow goes fast in the middle and also slows down at the end i've linked a website in the description that can give you some ideas of the possible curves in this example i'll try to recreate this ease out queend by clicking on this bottom point and dragging the handler up that immediately gives a great slow down effect for our text time for the last part triggering scripts using animation let's quickly move that playhead right here and do the size animation of the entire object while making sure that the record button is still on create a new keyframe that holds the scale of 1 then after a couple of frames change both scale axis to zero the final effect should look like this now let's imagine that we'd like our game object to be destroyed after the animation ends we don't have a simple action like destroy here in the animator window but we do have an option to run a script just click on the same game object that the animator is attached and create a new script i will call it destroy on close go ahead and open it here we just need to specify one method that will be accessible from the animation instead of the start and update methods type public void on close open brackets destroy and pass in game object which refers to this object great now let's save it and move to the animation we can move the playhead to the very end or at least the position you'd like your script to run out then click this small icon to add event finally here in the inspector from this really long list of methods we can select the one we've created it should be at the very end and now the grand finale let's test if everything works let's run our game our click me button is constantly drawing our attention as expected our inventory element nicely unfolds and hides the slots of our user and the last object with the stars nicely animates after the button press and removes itself from the scene after this 2 seconds animation so that's it thanks a lot to my awesome patrons that support this channel be sure to check out my other videos about unity ui see you soon [Music]

Channel: Coco Code

Views: 30,386

Keywords: unity, cococode, bionicl code, bionicl, unity3d, Maciej maj, tutorial, guide, coco code, Unity animation, Unity UI animation, Unity UI, Unity GUI, Animator, Unity Animator, Unity animator script, Animation, Unity animator, Unity events, Unity animating, no coding, without coding, for begginers, animate objects, animate text, animate ui text, animate ui button, ui button animation, ui text animation, design, design animation, setup animation, create great animation

Id: br9YzpiBeIw

Length: 17min 39sec (1059 seconds)

Published: Wed Mar 24 2021

Reddit Comments

[u/PhilippTheProgrammer]

The Unity animation system is a critical feature of the engine many beginners tend to overlook. It can do some really cool things without requiring to write any code.

But the actual mind-blown moment is when you realize that you can not just animate visuals, but that you can animate pretty much any property of any component. That means you can use animators to implement whole game mechanics.

[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.