Want to learn how to create advanced UI animations? 👉 Check out my newest course, Master Unity UI ➡ bit.ly/cc-unity-ui-32 It’s packed with everything you need to create awesome UI ✨🎨
Easiest animation tutorial I've watched so far. What's great is that it doesn't only apply to UI elements but also gameobject in your scene. Thank you very much!
Using animation like this in your UI will have a big performance impact because even when in idle each frame the animator updates components animated fields which causes a canvas redraw (its even worse when using LayoutGroups) A fix would be to disable the animator (using an StateMachineBehaviour for example) when in idle to re-enable it when you want to animate
@@andreas1416 It totally depends of how complex your UI is, btw I work on mobile so maybe on pc this is not a problem at all. I would say do what's quicker for you then profile and if it has no noticeable impact go next
It is important to note that the performance impact of the Animator can vary depending on the complexity of the animations, the number of animated objects, and the hardware on which the game is running. In many cases, the performance impact may not be significant enough to justify disabling the Animator completely. If you are using Unity 2019.3 or a later version, this fix should help improve the performance of animations in the UI when using the Animator.
You can also set the animator up to point to an animator state with no animation as the default entry animation. Then you can add states that animate and go back to no animation. You can then play any animation states directly with Animator.Play(). I haven't profiled the performance comparison, but I imagine that it solves some of the performance issues with dirtying the UI canvas.
awesome video! i have used both methods: animator transitions and scripting lean tween transitions. if you're not afraid to code, i think the scripting method is cleaner and it's easier to fix things if you don't like how something is looking. the animator method is very good if you're used to making animations and animating, but if you're just getting into it, it can be pretty overwhelming sometimes because you're working with so many seperate animations that you have to create manually that you then have to combine, edit, and transition to. but i think this really is one of those things that you just choose which one you like more. or you could even combine them.
Exactly! I'm aware that the second example with transitions might be a bit complicated, but I tried to show a real game scenario! I think the animator is perfect for animations shown on the example with the stars - with the multiple objects.
@@CocoCode you did an excellent job with this video because you showed what the animator transitions are really good at. i didn't know that you could edit the curves, by the way! that's a gamechanger! i was adding the ease effects manually like a peasant.
@@MrFarkasOfficial main issues i face using animation is animating ui for dynamic screens and linking in scripting based everything stays in script and you have almost full control over it there itself ... for animator you have also keep track of linking things and adding proper animation events that too with raw string/data which is kinda error prone
Love the tutorial, but I have an issue : if you click two times on Open (for example) it stays on that state and it I click on Close when it's blocked, it plays the animation and go back to the other. Is it a way to fix that?
I don't understand the whole point of having a closed animaion and an idle one where the ui just stands still. Why don't you just turn the looping off in the assets of that specific animation. Your animations tab will look a lot cleaner rather than a spideweb mess.
Hello. Thank you for this tutorial. I happened to look for it when I wanted to animate three gold stars at the end of my game levels... And, hey! Look at that. It's just like one of the examples. I look forward to incorporating some of these ideas into my game.
Nice tutorial, but where is the moment when you assign some trigger to the button "Start animation" at the last part of the video? You just created the animation with stars and disappearing the panel with adding an event, so how does it listen on your clicks on the button? Though thanks a lot! Maybe i missed something...
When I set the animation to idle in the animator, the first animation does not show. When I delete the idle the animation loops again. Any idea of why this happens?
Not a bad tutorial, but watching it gave me a much better idea. The problem: An "idle" animation causes Unity to be forced to redraw the canvas EVERY frame. Why? Even though it might not be changing visually, it is STILL technically animating. Solution: Add a script that enables & then disables the Animator component when the animation is complete. It will stay on the last active frame. I was about to go through the process of learning one of the tweening libraries(I still need to), but this way is much better, because the Animator is so easy & powerful to work with.
how to create animation when game is over? like the game show game over panel with animation, i have problem when the game show game over panel, but the game still not freeze.
That is good tutorial for something that you don’t need. Instead you can do the same thing with 1 class and around 10 lines, with really much more control and easy way to redacted if need. Also the work with animation is really confusing.
I don't understand how you're able to mask the inventory system, I'm kinda upset because as a beginner I'm stuck at this step.. I even watched your mask video too
nice video!, what about performance? i havent tested but according to Unity, "Animators will dirty their elements every frame, even if the value in the animation does not change", which results in a redraw (60fps)
I did not like the video that you have created as many as 4 animations, when you could create one.I explain how it can be done, do one animation of the panel opening, then do the settings that it is not repeated, make a condition such as bool, copy our animation in Animator ctrl + d (in the files will be only one animation) now change the copied animation speed to -1 and connect them arrows, and then you know how to do
Want to learn how to create advanced UI animations?
👉 Check out my newest course, Master Unity UI ➡ bit.ly/cc-unity-ui-32
It’s packed with everything you need to create awesome UI ✨🎨
Easiest animation tutorial I've watched so far. What's great is that it doesn't only apply to UI elements but also gameobject in your scene. Thank you very much!
Using animation like this in your UI will have a big performance impact because even when in idle each frame the animator updates components animated fields which causes a canvas redraw (its even worse when using LayoutGroups)
A fix would be to disable the animator (using an StateMachineBehaviour for example) when in idle to re-enable it when you want to animate
Do you have any numbers to quantify what "big" means?
@@andreas1416 It totally depends of how complex your UI is, btw I work on mobile so maybe on pc this is not a problem at all. I would say do what's quicker for you then profile and if it has no noticeable impact go next
From the patchnotes In Unity 2019.3: "UI: Fixed performance issues with Animation by not dirtying the Layout if an Animation updates items.
"
It is important to note that the performance impact of the Animator can vary depending on the complexity of the animations, the number of animated objects, and the hardware on which the game is running. In many cases, the performance impact may not be significant enough to justify disabling the Animator completely. If you are using Unity 2019.3 or a later version, this fix should help improve the performance of animations in the UI when using the Animator.
You can also set the animator up to point to an animator state with no animation as the default entry animation. Then you can add states that animate and go back to no animation. You can then play any animation states directly with Animator.Play(). I haven't profiled the performance comparison, but I imagine that it solves some of the performance issues with dirtying the UI canvas.
and the new brackeys has emerged
I swear i love your videos, your style thumbnails, video content they are all fantastic keep doing this!!
Wao never I have ever seen so detailed and explained tut,i would pay for a course if you launch one .Keep going buddy
This is also how you can easily animate 2D sprite sheet animations in your UI. Excellent video!
The best understanding animation/animator tutorial I ever watch !
Thanks 👍
I was looking for how to make Animator state do once only , then I found this video, which solved a big problem! grateful!
The new brackeys we all needed
thank you very much 💖 currently i am working on a math game and this animation helps me to make game more awesome ⚡
awesome video! i have used both methods: animator transitions and scripting lean tween transitions. if you're not afraid to code, i think the scripting method is cleaner and it's easier to fix things if you don't like how something is looking. the animator method is very good if you're used to making animations and animating, but if you're just getting into it, it can be pretty overwhelming sometimes because you're working with so many seperate animations that you have to create manually that you then have to combine, edit, and transition to. but i think this really is one of those things that you just choose which one you like more. or you could even combine them.
Exactly!
I'm aware that the second example with transitions might be a bit complicated, but I tried to show a real game scenario!
I think the animator is perfect for animations shown on the example with the stars - with the multiple objects.
@@CocoCode you did an excellent job with this video because you showed what the animator transitions are really good at. i didn't know that you could edit the curves, by the way! that's a gamechanger! i was adding the ease effects manually like a peasant.
@@MrFarkasOfficial main issues i face using animation is animating ui for dynamic screens and linking in scripting based everything stays in script and you have almost full control over it there itself ... for animator you have also keep track of linking things and adding proper animation events that too with raw string/data which is kinda error prone
@@AnkitSingh-wq2rk that's true
Thank you so much Coco! Your tutorials are so great!
The only good tutorial for UI transition animation
Best tutorial
Very good tutorial. Easy to understand=) Thank you.
Glad it helped!
I just wanted to say i was here from 600 subs
THIS IS WHAT I NEED, THANK YOU VERY HELPFUL
Wonderful Voice and Tutorial
Love the tutorial, but I have an issue : if you click two times on Open (for example) it stays on that state and it I click on Close when it's blocked, it plays the animation and go back to the other. Is it a way to fix that?
One thump up is not enough. Thx for your videos 👍
yea same I want to spam the thumb up button just to show how much I appreciated him :)
I'd like to thank you so much for doing this video. this saved me like you have no idea
I don't understand the whole point of having a closed animaion and an idle one where the ui just stands still. Why don't you just turn the looping off in the assets of that specific animation. Your animations tab will look a lot cleaner rather than a spideweb mess.
This is so good. Subbed.
Hello. Thank you for this tutorial. I happened to look for it when I wanted to animate three gold stars at the end of my game levels... And, hey! Look at that. It's just like one of the examples. I look forward to incorporating some of these ideas into my game.
Good tutorial nice method of teaching.
Nice tutorial, but where is the moment when you assign some trigger to the button "Start animation" at the last part of the video? You just created the animation with stars and disappearing the panel with adding an event, so how does it listen on your clicks on the button? Though thanks a lot! Maybe i missed something...
Very great and simple tutorial! Thank you from Russia!!
@12:22 that is wrong, do not use Canvas group for individual objects, you can just use the image alpha. a canvas group require a GROUP of children.
Pro I don't complete the video because internet so bad but I trust you are the best
When I set the animation to idle in the animator, the first animation does not show. When I delete the idle the animation loops again. Any idea of why this happens?
Wonderful bro,Thank you verymuch!
Best tut for beginners, but also it's not recommend to change UI by animation!
Hey! Check out my other tutorial where I show how to use tweening library 🐬
Thank you for this!
Not a bad tutorial, but watching it gave me a much better idea.
The problem: An "idle" animation causes Unity to be forced to redraw the canvas EVERY frame. Why? Even though it might not be changing visually, it is STILL technically animating.
Solution: Add a script that enables & then disables the Animator component when the animation is complete.
It will stay on the last active frame. I was about to go through the process of learning one of the tweening libraries(I still need to), but this way is much better, because the Animator is so easy & powerful to work with.
awesome man. But if I follow the video above, does it impact performance on the device?
@@qqq9542 - Yes. Both achieve the same goal with different methods.
Thanks for this.
HI
Love your tutorial but..... What UNity version do u use ? With Unity 2020.3.33 when I use Animator my unity. application crash everytime.. 🙂thank's
how to create animation when game is over? like the game show game over panel with animation, i have problem when the game show game over panel, but the game still not freeze.
That is good tutorial for something that you don’t need. Instead you can do the same thing with 1 class and around 10 lines, with really much more control and easy way to redacted if need. Also the work with animation is really confusing.
Hey! Be sure to check out my other tutorial that talks about exactly that:
th-cam.com/video/YqMpVCPX2ls/w-d-xo.html
How to use one button to open and close the inventory. Is it possible?
Amazing!
You have an Image to fade in/out, so why not using its color alpha?
I don't understand how you're able to mask the inventory system, I'm kinda upset because as a beginner I'm stuck at this step.. I even watched your mask video too
Thank you that was bretty help full to me🥰🥰🥰🥰
How to use that same pouch bag icon to close the inventory, anyone please help?
thank you so much. I got U :D
Nice👍
Lifesaver!
Game object with animator is inactive
UnityEngine.Animator:Play (string)
Anyone knows what is wrong with my animator?
FYI using the Animator is VERY expensive and highly unrecommended for simple animations
Hey! This is why I also created different video where I show how to animate your UI using lerping: th-cam.com/video/YqMpVCPX2ls/w-d-xo.html
nice video!, what about performance? i havent tested but according to Unity, "Animators will dirty their elements every frame, even if the value in the animation does not change", which results in a redraw (60fps)
That is a great question! Check out the video description for more details. I’ll do my tests about that and will update it if I’ll find something more
I figured out a solution. Just disable the animator component after the animation completes.
nice video
i love your tutorial, Thank you
thank you very much
I did not like the video that you have created as many as 4 animations, when you could create one.I explain how it can be done, do one animation of the panel opening, then do the settings that it is not repeated, make a condition such as bool, copy our animation in Animator ctrl + d (in the files will be only one animation) now change the copied animation speed to -1 and connect them arrows, and then you know how to do
awesome
flame!) thanks
Очень классный урок
Thanks
Maravilhoso!
TY
animations much better
Ко-ко-ко
Never animate ui using unitys animator..
Why?
@@Distriks it had big performance impact thou in unity 2019 they "fixed" it but its still no good practice. That fix isnt perfect.
+1
The Animator component is not recommended for the UI.
unity.com/how-to/unity-ui-optimization-tips