LeanTween basics

      No Comments on LeanTween basics

Hi everyone! In this post I will share with you the experience of using awesome tweening asset – LeanTween!

LeanTween maxres default

This tween-engine is the most efficient from all that are presented on asset store. Let’s begin from basics – what is the LeanTween:

LeanTween.moveX(_rectTransform, _finishPos, _duration);

In this code we move the object called _rectTransform along X axis to point _finishPos at time _duration.
Most of the animation looks like that: we choose Which way some Object will be animated. Then we choose the Target state and animation duration. That’s it.

Let’s look at the code a bit more

  • moveX – animation type, we can move(), scale() (or size() in rectTransform case), rotate(), change the color() (or alpha() separately ) and change some value(). LeanTween allows you to change only part of the Vector3 like that: moveX(), rotateY(), scaleZ().
  • _rectTransform – animated object, gameObject or RectTransform (LeanTween supports UnityUI animation).
  • _finishPos – target state of the object, in our case it’s a value of X axis. The format of this option depends on the type of animation. It can be float, vector2, vector3 or Color.
  • _duration – animation duration =).

Here’s how it looks like

LeanTween lr

You can ask – Is this all? I answer you – sure not! There are a lot of options to setup and control of animation.

Another option:

LeanTween.moveX(_rectTransform, _finishPos, 0.6f)

Here setFrom(-144f) set start state – in our case it is a X coordinate of the object. Actually you can set full position by use Vector3 instead of float. Actually you can set finish position setTo() – it can be useful for “pull object” pattern for example.
setLoopPingPong() sets the animation loop, value 3 tells that loop repeat 3 times. Without specifying this parameter, the loop will repeat indefinitely.

LeanTween have 2 types of loop. “setLoopPingPong” – after animations end, it will be repeated in reverse direction.“setLoopClamp” – just simple loop where at every iteration animated values resets to start state.
setDelay(0.3f) – indicates that the animation will start with 0.3 seconds delay. Note that this will not affect the delay between cycles.

LeanTween.moveX(_rectTransform, _finishPos, 0.6f).setEaseInCubic();

setEaseInCubic() – by this option we set the easing type. By default it is a linear, but engine have a lot of predefined ease methods cubic, exponent, quart. All of them looks nice and make animations awesome. If it is not enough for you – here is option to set your own animationCurve by setEase(yourAnimationCurve).
Here is a comparison of some of them:

LeanTween compare

For playback animation control we need to get animation Id:

int tweenId = LeanTween.moveX(_rectTransform, _finishPos, 0.6f).id;

By the way, each control method returns the animation id. Animation can be paused by LeanTween.pause(tweenId) and continued by LeanTween.resume(tween.id);
Aslo we can reset animation by LeanTween.cancel(tweenId) and it stops in current values.
Next time we will look in more detail how more you can manage the animation, like animation events and callbacks.
I hope you like this post, leave your opinion in comments.

Useful links:

Twitter: https://twitter.com/TakeGamesTeam
Facebook: https://www.facebook.com/TakeGamesTeam/
Site: https://take-games.com/
Blog: https://take-games.com/blog/

Leave a Reply

Your email address will not be published. Required fields are marked *