Hi, this is HJ. Welcome to the third video of the Unity
UI Toolkit Beginner’s guide. In this video, I’ll cover four topics. The first is how to automatically play a
transition animation when a scene starts. The second is how to create an infinite
looping animation. The third is how to create
a typewriter effect using the DOTween. And finally, for fourth,
I will explain how to hide the bottom sheet after the transition
animation is finished. I left this problem unsolved
in the last video. Transition animations occur when properties’ values are different
between two states. For example, I have a visual element
with dark grey color. I prepared a state or style
with different color. If the style is added to the visual
element, its color changes instantly. However, if the visual element
has non-zero duration value for its transition, the color difference
is interpolated for the duration. I will animate this boy
using the transition animation. I’ll make two states or styles:
one on the ground, the other in the air. And then I’ll remove the in the air style,
when the scene starts. If I set duration and easing properly,
the boy will be nicely animated without great difficulty. Go back to the UI Builder. First, make the current state a style. As I pointed out, the key property
which enables animation is the Duration. Set the Duration to 2 seconds
and Easing to Ease Out Cubic. Extract it to a new style. Move the boy to make the other state. I’ll use the Translate property
instead of Position. Because the visual element’s
going to be animated. Put -500 and -400 for Translate X and Y. The boy is in the air
and out of the screen. Make a new style. Preview the animation. In the Style Class
List, delete the in the air class. The animation plays as we expected. Let's move on to the script. Declare a variable for the boy. In the Start method, search the boy using U
query and store it in the variable. Instead of writing the animation code
here, I’ll make a method separately. In the method animating the boy, I delete the in the air class
using ‘Remove From The Class List’. Let’s see the animation. The animation doesn’t play. The boy is already on the ground
from the start. We need debugging to find out
what’s happened. In the last video, I shouldn’t have deleted the Update
function which is called every frame. I’ll examine whether the in
the air class is removed indeed. Now that I use the Update, the state
will be monitored frame by frame. There is a method perfect
for this situation. It’s the Class List Contains method. This method returns whether a visual
element has a certain class in the list. Behind the boy variable, write the method. Put the class name
we want to check in the parentheses. Play the scene
briefly and go to the Console window. A lot of logs are generated. ‘False’ means
the in the air class is not in the list. Go to the first message. It’s
also ‘False’! That’s why the transition animation didn’t
take place. If you look at the Unity documentation,
this problem is pointed out. Let’s get around this first frame issue
by using the Invoke method. With the Invoke,
we can delay when to call a method. 0.1 seconds seems OK. Play the scene. Now the animation is working fine. The logs actually changed from true
to false at a certain point. I delayed the starting
by an approximate time. However, if you use coroutines,
it will be possible to skip exactly the start frame. So far, we’ve seen how to automatically
play an animation when the scene starts. Next, let's take a look
at how to create a looping animation. The girl in the bottom sheet is supposed to move up and down
over and over again. Yes, it’s a looping animation. As before, we need two different states. In the present state,
only set the Duration to 1 second. Extract it to a new style. And then make the up state. In the Transform, set
the Translate Y to -50. Extract it to a new class. I'll explain to you my plan. My basic strategy is adding
and removing styles. When you add a style
with a different Translate Y value, the girl will go up or down. When the style is removed,
the girl will be back to where she was. When I repeat the process,
the animation will be looped infinitely. It sounds quite simple at first. In fact, it’s not that simple at all. Because there are two
problems to be dealt with. The first problem is when to add or remove the styles. We need the exact moment
when each transition ends in order to change the state. Even if we know when,
another problem arises. We need to distinguish
whether it’s time to add or remove. If a style is added to the visual element
which already has the style, no transition occurred. We’ve got the time issue
and the state issue. Let’s handle the time issue first. In a transition animations,
there are key moments: the moment when the transition occurs, the moment
when the animation plays after delay,
and the moment when the transition ends. As in the UI event, Unity offers
a couple of transition events. With the Transition End Event,
I can get the moment when to start transition animations. Next is the state issue. The first thing that comes to mind
is the Class List Contains method. I used it for debugging earlier. It sounds reasonable enough to check if
a class is in the list with this method. However, there is a much more well-suited
solution. It’s the Toggle In Class List method. Basically it adds or removes a style. What makes the method special is that it
can distinguish when to add or remove. If the element doesn’t have the style,
it adds the style. On the contrary, If the element already
has the style, it removes style. You don’t have to worry
about no transition by double adding. Whenever you call the method,
the state is safely reversed. Declare a variable for the girl
and get reference to it using U query. Go to the method that opens the bottom
sheet. I’ll write the method outside. Call the method beforehand. Behind the girl variable,
write Toggle In Class List and in the parentheses,
put the class name we will add or remove. I copy the name from the style sheet. Next, tell it what to do
when the transition animation ends. It’s the same Register Callback
method used for the bottom sheet. The difference is the event type. This time, it’s the Transition End Event. In the parentheses
put the another callback method name. It'll be called
when the first transition ends. Its job is to revert the state again. Two callback methods’ll call each other,
changing the state over and over again. Just copy the code from the above method. Since it knows when to add or remove,
no more code is required. Play the scene. The animation plays and is looped flawlessly. I made the callback method
separately for explanation. I'll clean up the code
a bit and wrap it up. The next topic is the typewriter effect. There is a label below the girl. I’d like this label to come out letter
by letter as other games show dialogues. I’ll use
the method that animates the girl. Keep the string to be printed out there. Declare a variable for the label
and get a reference to the label. I used to make typewriter effects
using DOTween. Fortunately,
it is still available in the UI Toolkit. A new namespace is required
to take advantage of DOTween. When the bottom sheet comes up,
the label shows no text. The string assigned to the Text property
is printed out in the UI Toolkit. String Empty makes the label show no text. Make a new string type
variable and assign the prepared string. Let the Dotween make the animation
from the empty string to the complete one. After the getter and setter, put the target value,
that is the complete string. And then set Duration to 3 seconds
and Easing to Linear. Typewriting effects with easing curves
usually look strange. When the bottom sheet is up,
the typewriter effect starts. Everything works as expected. As you probably noticed, using DOTween
in the UI Toolkit is somewhat cumbersome. Because only the generic tweener
is available. In UGUI, I can use the DOTween Pro
as well as DOTween shortcuts. Now there is only one problem left. When the bottom sheet went down, its Display was set to None before
the transition animation started. Now we know the Transition End Event. With this event, it seems possible
to set Display after the animation ends. In the Start method, let’s register a callback method for the transition end event. At the bottom write the callback method. What it does
is just to hide the whole group. Cut the code and paste it here. Contrary to expectations,
it got even worse. The reason lies
with the Transition End Event. Actually there are two transitions:
one for up and the other for down. Events are generated from both occasions. What’s needed here is the event
that is generated when the down transition ends. The Class List Contains
method can filter out the down transition. Let’s examine the transitions closely. What the bottom sheet starts to come
up, the up class is in the list. On the other hand,
when it goes down, the list is empty. That’s
the condition for filtering out the event. Add a if statement
before hiding the bottom sheet group. Now that we check if it's empty, negate the condition with an exclamation
mark. Let's check. Finally, all the transition animations play as initially designed. This tutorial series has focused
on the basics of the UI Toolkit. The code is somewhat left unorganized. I recommend that you refer to the good
materials and organize this part yourself. Unity has ambitiously aimed
to replace the UGUI with the UI Toolkit. However, it still has a long way to go. Let's take a look at how the UI Toolkit
will develop in the future. That's all for this video. If you visit my channel,
you can see other interesting Unity related works, especially U G U
I aniamtion and effects. Thank you for watching.
