Trying to get a tween to animate various UI components

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By psear

I have UI elements, and I want to fade them in sequence, and with some modifiable delay by changing their CanvasItem modulate.a property.

I have made a tween node, “TweenMenu”, and given it

var node

func animate_fade(nodetoanimate, delay):

    var node = nodetoanimate
    interpolate_method(self, "fade", 0, 1, 1, EASETYPE, EASE, delay)
    start()

func fade(x):
    
    node.modulate.a = x

This means in the root node’s script I can have a very straightforward thing like this:

func _ready():
    $TweenMenu.animate_fade($UIElementOne, 0)
    $TweenMenu.animate_fade($UIElementTwo, 1)
    $TweenMenu.animate_fade($UIElementThree, 2)

The problem is, this will only work on the last UI element I try to animate (Element three in the above example), because after it sets the interpolate method and starts it on the first UI element, it immediately changes to the next element.

I know I could do something with yield(), but I don’t want to wait for the tween to finish, because I would like the next UI element to start animating before the first one is done.

I hope I’ve explained well enough, what’s the best way to achieve what I want to achieve?

:bust_in_silhouette: Reply From: Becbunzen

Hmm, you want to use a tween, but not for the whole distance? Then calculating the halfway point, adding a single frame there for the in-between image, and doing two tweens might help.

Or do you actually want to have active animations for the whole distance? Then using a tween is likely not what you want.

Essentially I’m fading in some UI elements, and I want to fade them in sequentially, like maybe 0.2 seconds apart. I thought it would be really messy to make a tween for every node, and wanted to see if it could be done with one.

psear | 2020-06-03 14:40

My guess is that you will have an easier time to just make an animation with the exact steps you want, and time the speed of it like you want.

Becbunzen | 2020-06-03 14:56

:bust_in_silhouette: Reply From: njamster

TweenMenu.gd

extends Tween

const TRANSITION_TYPE = TRANS_LINEAR
const EASE_TYPE = EASE_IN_OUT

func fade_in(ui_element : Control, delay : float):
    interpolate_property(ui_element, "modulate:a", 0, 1, 1, TRANSITION_TYPE, EASE_TYPE, delay)

Main.gd

func _ready():
    $TweenMenu.fade_in($UIElement1, 0)
    $TweenMenu.fade_in($UIElement2, 1)
    $TweenMenu.fade_in($UIElement3, 2)
    $TweenMenu.start()

Ah, I didn’t know this could be done in this way, this is exactly what I was looking for, thanks!

psear | 2020-06-04 18:02