Discover LeanTween basics to make UI Animation in Unity

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
You can see the pause menu opening in two different ways here. Which one do you find more impressive? In this video we’ll learn how to use LeanTween Asset. Tweening, short for "in-betweening," is a technique used to create intermediate frames of animation between two keyframes, allowing for seamless transitions and smooth motion. For example, if you want to scale up an object, you can smoothly bring it to its final scale over a predetermined time using LeanTween. With LeanTween, you can animate position, rotation, scale, color, and other properties of game objects. We should especially do UI animations with tweening. Because it is simpler and more performance to use than Unity animation. Ok! Let’s learn how to use LeanTween. Let's look at the sample scene.  On the Scene there is a car,  a flag , a way and a light.  Also the light object has  the light controller script.  The light controller Script has only one task. When we press the spacebar, it changes the color of the light to green. I will press the spacebar. The only job of this light is to let you know that I pressed the Spacebar. As you can see the car object has no rigidbody, only Sprite renderer component. First Let’s import the LeanTween Package. Go to the Unity Asset Store and search LeanTween. Here it is. You can use it for free. Click on the Add to My Assets. Go back to Unity and Open Package Manager. You can see The LeanTween Package Under My Assets. Select the LeanTween and Download it. After the download is complete, import it. The LeanTween Package imported. Let's move this car to the Finish Flag using the LeanTween package. Right click on the project  panel and create a script.  I’m gonna call it TweenExample. Drag and drop the script to the car object. And open the script. First I’m gonna create a function named Move. And I will call the Move function  when I press the Spacebar.  LeanTween. here you can see the  methods you can use with LeanTween. you can see here the  functions you can use to move.  I want to move the car on the x axis so I will use this MoveX method. As you can see, we need to provide three parameters: the object to be moved, the target position's x-position, and the duration within which we want to reach the target position. I will create a Transform variable to keep the transform of the finish flag. You can directly write the time here,   but I will create a variable to set  the time from the Inspector panel.  Save and go back to Unity. drag and drop the flag object to the target transform slot. and set the duration. start the game. press the spacebar. As you can see, the car reached the finish flag in 2 seconds. you can set the duration as you want.  Let's take a look at the detail of LeanTween.  You can Set the type of easing used for the tween with the setEase Method. you can specify the ease type you want directly like this. start the game. As you can see, the car moved back a bit and then moved forward. also you can set the ease type from the inspector panel like this. save and go back to unity. select the ease type and start the game. you can try different ease types here. You can Delay the start of a tween by using setDelay Method. It will start with a 3 seconds delay.  start the game. Press the spacebar. as you can see the movement  started after 3 seconds. We can add a loop to the animation. There are three types of loops: Once, Clamp, and PingPong. Let's take a quick look at the loops. If you want to set the loop from the inspector panel, you can use the setLoopType method. I will create a LeanTweenType  variable named loopType. Go back to unity.  You can easily select the  desired loop type from here.  You can set the tween to repeat a certain number of times by using the setRepeat method. You can also use LeanTween with this syntax format. I'm gonna create a new Method named ScaleUp. Let's use LeanTween to scale the object. This way you can give here the vector of the new scale. or you can multiply the current scale by 2 instead. I wanna call the ScaleUp function when the Move Tween is finished. To do that we can use the setOnComplete Method. Save the script and go back to Unity. start the game. As you can see the scale of the car has increased after the move is complete. Let's Rotate the car after the Scale tween is finished. Nice! How we can Tween any particular value. We can smoothly bring a float value to the desired number over the desired duration. You can use it in places like health bars or coin counting. In this example, I will smoothly increase the speed variable from 0 to 100. The UpdateSpeed function  will be called every frame,   similar to the Update function, until the speed value reaches 100. Press the spacebar. As you can see the speed variable reached 100 in 3 seconds. if you want, you can convert the value to integer like this. If you want, you can assign these values to the variable and change them from the inspector panel. Press the spacebar.  You can also make different examples with LeanTween. Let's animate UI with LeanTween in the next unity tutorial. Please don’t forget to subscribe and hit the like button. Thanks for watching. See you in the next Unity tutorial.
Info
Channel: Rehope Games
Views: 3,965
Rating: undefined out of 5
Keywords: how tu use LeanTween in unity, LeanTween in Unity, LeanTween Methods in unity, Rehope Games
Id: WGkZAdC6Vx0
Channel Id: undefined
Length: 8min 24sec (504 seconds)
Published: Tue Jul 25 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.