loading...
Cover image for Unity - Easy tweens πŸ₯”

Unity - Easy tweens πŸ₯”

henriquederosa profile image Henrique Derosa ・3 min read

Hello πŸ€“

This is something I wanted to bring to the world. I am talking about PotaTween.

It is a Tween maker for Unity, it's a simple C# Component that helps you create simple tweens and use it either from the Editor or from Code.

Introduction πŸ₯”

Actually PotaTween was written by someone I don't know. In one of the last companies I worked, I was introduced to this simple tool, that was made by a friend of another developer.

We decided to improve that to fit our needs and the Unity updates such as the TextMeshPro and other ones. Then, by creating a GitHub repo I think we're giving to the world the opportunity to use it, explore, learn, and collaborate.

Oh yes, it's a good repo to start collaborating with open-source projects. πŸ˜€

How we use it

Now we already have this repo, and you can check it here https://github.com/GabrielCapeletti/PotaTween

It's so simple, I don't even know how to explain that.

Setting from Editor

Basically what we'll need to do is add the PotaTween component to the GameObject we want to animate. And then just check the parameters Play On Enable, or Play On Start from the Inspector.
Or start the animation from code:

tween.SetScale(Vector3.zero, Vector3.one);
tween.Play();

As the tween variable is a PotaTween type, you can simply attach it in the inspector or say GetComponent<PotaTween>().

Setting from Code

You just have to Create the PotaTween from code. What it'll do is AddComponent in the given gameObject.

PotaTween tween = PotaTween.Create(gameObject, 0);
tween.SetScale(Vector3.zero, Vector3.one);    // Animates from scale 0 to 1
tween.Play();

There is an important thing about the Create method. The second parameter, which is the id of the animation; so if you set two animations with the same id, they're going to be overwritten.


A little deeper 🍟

Can I use callbacks?

This Tween Component allows you to easily set callbacks.

  • onStart
  • onComplete

These names above are PotaTweenEvent which is actually the same of UnityEvent<PotaTween>, and you can set them like this:

tween.onStart = new PotaTween.PotaTweenEvent();
tween.onStart.AddListener((PotaTween t) =>
{
    Debug.Log("PotatooO");
});

What about the easy way?

The easier way to do something when the animation ends is by adding a callback function as a parameter of the Play method.

tween.Play(() => {
    Debug.Log("Animation has finished.");
});

Can I reuse my animations? πŸ₯”πŸŸ

Yes. This is one of the changes we did from the original project.
This is called PotaTweenPreset. It's an asset that you can create by accessing the Unity menu Create > PotaTween > Preset

The Preset works pretty much the same way the PotaTween Component. To use it you will need to reference your Preset asset, so create a variable like this:

public PotaTweenPreset blinkTween;

To make the Preset work, just initialize it wherever you need

PotaTween tween = blinkTween.Initialize(gameObject, 0);

This way your animation can be reused everywhere because it is an asset, not a component configuration. You just need to reference it from the inspector.

That's it.

A good thing of PotaTween is simplicity, I hope it can help you

I would like to read your comment about what did you think.
Do you think it's useful?

Thanks! πŸ˜„

Posted on by:

henriquederosa profile

Henrique Derosa

@henriquederosa

react | redux | flutter | node | unity

Discussion

pic
Editor guide
 

One file! I like that.
I started using it and was surprised to see that it understand what it's attached to, drop it on a UI panel and it just works. Bravo!
Have you done some benchmarks?

 

Personally, I didn't. I am not the owner of it. I just wrote about the lib, actually it's not documented anywhere else, but in its repo. If you need more documentation for the lib, let me know. I can improve and give more examples. I am pretty happy you liked it too πŸ˜ƒ

 

I use tweening only for UI so any example that's animating in and out of a UI is interesting. Especially in local&relative mode because it allows to reuse the same component regardless of the position on screen.

ok I fixed the problem with relative + local position
at line 253 change it to (don't know how to push a change on github)

_startPosition = Position.IsLocal? OwnTransform.localPosition : OwnTransform.position;