Unity UI Button Animations: Pseudo-classes, DOTween, and Transitions

Unity UI 애니메이션은 의사 클래스와 DOTween을 사용하여 버튼 효과를 생성합니다.

### ### 유니티 UI 툴킷 애니메이션 가이드: 버튼 애니메이션 제작 방법
* 📌 유니티 UI 툴킷을 사용하여 버튼 애니메이션을 만드는 방법을 설명합니다.  **가상 클래스**, **DOTween**을 활용한 다양한 애니메이션 기법을 소개합니다.
* 📌 **가상 클래스(pseudo-classes)**인 `hover`와 `active`를 사용하여 마우스 오버 및 클릭 시 버튼의 크기, 색상 변경 등의 애니메이션을 구현합니다.  인라인 스타일 충돌 해결 방법도 제시합니다.
* 📌 부드러운 애니메이션을 위해 **전환 애니메이션(transition)**을 추가하고, 지속 시간 및 이징 타입을 설정하는 방법을 보여줍니다.
* 📌 **설정 메뉴 슬라이딩 및 페이드인/아웃 애니메이션**을 위해 새로운 선택자를 생성하고, 스타일 클래스를 추가/제거하여 애니메이션 효과를 구현합니다.
* 📌 코드를 통해 애니메이션을 제어하는 방법을 설명합니다.  `settings` 클래스를 추가/제거하여 설정 메뉴의 표시/숨김 및 애니메이션을 관리합니다.
* 📌 **DOTween 패키지를 활용하여** 좀 더 복잡한 애니메이션을 구현하는 방법을 보여줍니다.  언더라인의 좌우 이동 애니메이션을 예시로 사용합니다.
* 📌 `DOTween`의 `Tween` 함수를 사용하여 애니메이션을 생성하고, `onUpdate` 함수를 통해 애니메이션 진행 상황을 업데이트합니다.  `setLoops`와 `setEase`를 사용하여 반복 및 이징 효과를 추가합니다.
* 📌  **수많은 스타일 생성 없이 DOTween을 통해 효율적으로 UI 요소 애니메이션을 구현하는 방법**을 제시하며 영상을 마무리합니다.

In the last tutorial, I showed you how to use the 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 DOTween through code. Let's begin with animating the buttons using pseudo-classes that Unity provides for us.  These 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 builder, 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 transitions 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 `MenuButton:hover` 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 hover 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 a different easing 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 an animation for the settings, so it is

going to slide from the 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 a second one for when it is out of the screen. So I will select the settings parent and create a 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 a 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 add it, 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 this:  In the parent, add a class to the list.  In the parentheses, we need to type

the name of the class, which in my case is `settings`. You should type it without a 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.  This way, we're 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 come from the top and slowly fade out. And when we close it, yep, the same animation plays. So we can

see that it's really easy to animate 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 DOTween package.

That just allows you to easily interpolate between values using different easing types. You can download DOTween on the Asset Store, and once you

have it downloaded, you will also need to go to `Tools > DOTween` and go to the Utility Panel, where you will need to set it up.

After that, we can open our script, using DOTween, and we can use all of its animation 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 a visual element, so we have a

reference for it. And I will go to the `OnSettingsButtonClick` 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. 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 a variable for the tween, so that we can later stop

it. You can see, for the function, we need to provide a getter and value, and the duration. First, the getter will be the

start position, so we are using a lambda for that. Next, in the setter, we'll just define that we want to set the position

to the X, which is the actual value that the tween returns us, and then we can just provide it the

end position and the duration. So now we have created the tween, 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 tween 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 a new `Vector3`. The position is on the X, and on Y we can have just zero because

this is a local position. We can try going to the settings, and we can see the animation plays just once, so we'll need

to add some looping to it. So I'm just changing these functions and using `setLoops`. 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

the right, back to the left, to the right, left, and so on. And if you want, you can also use `setEase`, so that you can specify which ease

You want to use and to make sure that it will no longer exist when we close the settings

I will go to the 'on close settings button clicked' and just kill the UI 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 DOTween. 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

the next video. Bye! Thanks for watching this video till the end. If you are looking for a Unity C# or Bolt 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!

How To Animate In UI TOOLKIT || Unity

Freedom Coding

UI Toolkit을 사용한 버튼 애니메이션 생성

이전 튜토리얼에서는 UI Toolkit 사용법을 설명했고, 이번에는 버튼 애니메이션 생성 방법을 다룹니다.

의사 클래스를 사용하여, 페이딩, 이동, 크기 조정 등 다양한 스타일 클래스를 이용한 애니메이션과 DOTween을 통한 코드 애니메이션을 설명합니다.

Unity에서 제공하는 의사 클래스를 사용하여 버튼 애니메이션을 만드는 방법을 설명합니다. 의사 클래스는 상태를 정의하며, 요소가 상태에 진입하면 스타일이 변경됩니다.

UI 빌더에서 메뉴 버튼 스타일을 복사하여 이름을 바꾸고 의사 클래스를 추가합니다. `hover` 및 `active` 의사 클래스를 사용하여 마우스 오버 및 클릭 시의 애니메이션 효과를 구현합니다.

부드러운 애니메이션을 위해 전환 애니메이션을 추가하고, 지속 시간과 이징 타입을 설정합니다.

설정 메뉴 애니메이션: 슬라이딩 및 페이딩 효과

설정 메뉴가 상단에서 슬라이딩하며 나타나고 페이드 인/아웃되는 애니메이션을 만듭니다.

설정 메뉴의 보이는 상태와 화면 밖 상태에 대한 두 개의 새로운 선택기를 생성합니다.

Transform 탭에서 설정 메뉴의 위치를 조정하고, Display 탭에서 불투명도를 0으로 설정하여 화면 밖 상태를 만듭니다.

전환 애니메이션을 추가하여 부드러운 슬라이딩과 페이딩 효과를 구현합니다.

코드를 통한 애니메이션 구현 (DOTween 사용)

코드를 사용하여 스타일 클래스를 추가/제거함으로써 애니메이션을 구현합니다.  설정 메뉴의 표시/숨김에 따라 스타일 클래스를 추가하거나 제거합니다.

DOTween 패키지를 사용하여 코드로 애니메이션을 구현하는 방법을 설명합니다.  Asset Store에서 DOTween을 다운로드하고 설정합니다.

설정 메뉴의 밑줄을 왼쪽에서 오른쪽으로 움직이는 애니메이션을 DOTween을 사용하여 구현합니다.

DOTween의 `DOValue` 함수를 사용하여 애니메이션을 생성하고, `onUpdate` 함수를 사용하여 밑줄 요소의 위치를 업데이트합니다. 루핑 및 이징 효과를 추가합니다.