偵錯桐人

[Unity] LeanTween UI Animation

由

Entropy

發表於

Unity

What is LeanTween and why use it?

We’ve all had that moment where we want to animate the UI to make the menu feel more… alive. Most people go to the animator and unity’s built in animation system. But there’s a huge flaw with that: It eats a lot of processing power. When you use the animator, it’s being called many times a second rather than only when you need it. Even if it doesn’t look like anything is happening.

And so, here’s where LeanTween comes in. It can help you animate your UI and 3D objects easily, all it takes is for you to learn the rather simple database, and voila! You’re good to go. On top of animating UI with predefined methods and curves, you can also define your own curves!

I’ve defined some of the more common usage parts of the LeanTween library below, but there are still many more functions for you to find out yourself! Also, keep in mind that you can replace LeanTween.scale() with LeanTween.alpha() or LeanTween.rotation(). If it’s something you can imagine, it’s probably already doable with LeanTween!

Information

I’m mostly writing this article/wiki/blog thing as a way to reinforce the knowledge I’ve learnt, there may be discrepancies or things I and wrong on. Here’s a link to the official documentation page by Dented Pixel.

Here’s a list of commonly used methods: LeanTween.(method)

  • scale
  • alpha
  • rotate/rotateAround
  • color/colorText
  • move/moveLocal
  • pause/pauseAll
  • resume/resumeAll
  • Etc… there’s still many more!

Most of these are rather intuitive to learn but… pause and resume are slightly more difficult to learn so I’ll do a quick demo to show you how to use them. 

int SquareTweenID;
SquareTweenID = LeanTween.scale(gameObject, Vector3.one, 1f).id;

So let me break that down for you. You need to first declare an int somewhere and then assign the id of your tween to your int variable. Then, you can do this anywhere else that has access to your int variable: 

//Pause the animation;
LeanTween.pause(SquareTweenID);
//Somewhere else, resume the tween
LeanTween.resume(SquareTweenID);
//Or, to resume all the paused tweens:
LeanTween.resumeAll();

In addition to all that, there is still other methods you can use to gain even more functionality (They’re pretty intuitive):

  • isPaused(int id / gameObject);
    • Returns true if the int id / gameObject tween is paused.
  • isTweening(int id / gameObject);
    • Returns true if the int id / gameObject is actively being tweened.

EaseTypes and GIF examples

  • No easeType
//Very simple, linear change in scale.
LeanTween.scale(gameObject, Vector3.zero, 1f);
LeanTween.scale(gameObject, Vector3.one, 1f);
  • EaseInBack/EaseOutBack
//Adds a slight 'bounce' to the tween animation.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInBack);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutBack);
Leantween GIF

Note: If you were to reverse the easeTypes, as in:

//Flips around the curve the animation follows.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeOutBack);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeInBack);

you’d get this:

Leantween GIF

Moral of the story: EaseTypes are funky.

  • EaseInOutBack
//A Combination of both easeInBack and easeOutBack.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInOutBack);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeInOutBack);
Leantween GIF
  • EaseInBounce/EaseOutBounce
//Adds a bit of a 'bounce' like objects supposedly do when they hit the ground.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInBounce);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutBounce);
Leantween GIF
  • EaseInOutBounce 
//Pretty much the same idea as the EaseInOutBack but with 'bounce'.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInOutBounce);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeInOutBounce);
Leantween GIF
  • EaseInCirc/EaseOutCirc
//Sort of like lerp(linear interpolation). I won't put in the 'InOut' variation of each from now on, since you should get the idea.
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInOutBounce);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeInOutBounce);
Leantween GIF
  • EaseInCubic/EaseOutCubic
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInCubic);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutCubic);
Leantween GIF
  • EaseInElastic/EaseOutElastic
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInElastic);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutElastic);
Leantween GIF
  • EaseInExpo/EaseOutExpo
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInExpo);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutExpo);
Leantween GIF
  • EaseInQuad/EaseOutQuad
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeOutQuad);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeInQuad);
Leantween GIF
  • EaseInQuart/EaseOutQuart
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInQuart);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutQuart);
Leantween GIF
  • EaseInQuint/EaseOutQuint
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInQuint);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutQuint);
Leantween GIF
  • EaseInSine/EaseOutSine
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeInSine);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeOutSine);
Leantween GIF
  • EaseShake
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeShake);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeShake);
Leantween GIF
  • EaseSpring
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.easeSpring);
LeanTween.scale(gameObject, Vector3.one, 1f).setEase(LeanTweenType.easeSpring);
Leantween GIF
  • Punch
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.punch);
Leantween GIF
  • Linear
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.linear);
Leantween GIF
  • PingPong
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.pingPong);
LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(LeanTweenType.pingPong);
Leantween GIF

Additional Parameters

There’s also an extremely useful feature that: setEase.(LeanTweenType.easeType) is a part of. And that is additional parameters. I’ll try my best to explain some of these. And, as these are rather difficult to show in simple GIFs, I’ll forego them.

  • pause/resume: just like the name suggests, this pauses and resumes the tween.
    • pause()
    • resume()
  • setDelay: Set a float to delay the start of the tween.
    • setDelay(float)
  • setIgnoreTimeScale: Personally, my favorite. What this does exactly is let your tween run on unscaled time. What that means is if you have a function that changes Time.timeScale to zero, this tween will still run and activate. Especially useful for pause menus.
    • setIgnoreTimeScale(bool)
  • setLoopPingPong: In case the name didn’t tip you off, this will cause the tween to stay in a constant pingpong loop. When it reaches the end of its tween, it’ll go back to it’s original state and back and forth… just like pingpong.
    • setLoopPingPong(int)
    • Int will determine how many times you want the loop to happen in both directions, -1 is the default and is infinite. 1 will make it pingpong aka loop just once.
  • setRepeat: very similar to the pingpong loop, but without the pingpong. This will just reach the end of the loop and start over from the beginning, not flip around and come back.
    • setRepeat(int)
    • Int is how many time to repeat, -1 indicates infinite times.
  • setOnComplete: This is pretty useful for animating UI, what this does is calls a function or method after the tween is completed.
    • setOnComplete(doSomething)
    • You don’t need to include the () for the method/function.
  • setOnStart: In the same vein as setOnComplete, this will call a function or method when the tween starts.
    • setOnStart(doSomething)
  • setPoint: A rather niche parameter, this just sets the point from which your object will need to rotate around (local space).
    • setPoint(new Vector3(1f, 1f, 1f)
  • updateNow: Forces the tween to run now. If you don’t want to wait for other calls to call upon it.
    • updateNow()

That’s most of the more commonly used optional parameters leantween supports. For more information you can go to the documentation.

Customizing Your Own Curves

Creating your own custom curve is very simple, just create a AnimationCurve to edit in the editor and play around till you have a satisfactory curve to use. It’s exceedingly easy to use and implement.

public AnimationCurve animCurve;
void Start(){
    LeanTween.scale(gameObject, Vector3.zero, 1f).setEase(animCurve);
}

Tooltip: You can double-click on the green line to create another point.

Custom Curves GIF

And that’s the result of the the curve I made. It’s just that simple.