Hi.
I couldn’t think of a concept how this animation is done.
I don’t need any code, just the concept.
Could anyone help me figure it out.
It’s the bottom bar navigator animation on button click, I’d like to add something similar into my game.
It’s pretty slick … there are several layers of scaling and positioning going on.
Watch closely and break it down with me, in no particular order:
-
a double-wide window (bright purple plus white arrows) is smoothly slid side-to-side
-
there is an ease-in-ease-out curve applied to that motion (starts slow, builds, then ends slow)
-
all OTHER items are positioned to evenly space out beyond this double-wide area
-
currently-selected item is tweened in from its former adjacent location to be:
— centered on the wide chunk
— enlarged
— raised -
the item that WAS selected is de-tweened in the opposite way.
Work on it in layers. You want to keep the notion of an integer number that is the index of what is selected, but you want to smoothly tween to it over several frames. This type of a construct might be useful:
Smoothing movement between any two particular values:
You have currentQuantity and desiredQuantity.
- only set desiredQuantity
- the code always moves currentQuantity towards desiredQuantity
- read currentQuantity for the smoothed value
Works for floats, Vectors, Colors, Quaternions, anything continuous or lerp-able.
The code: SmoothMovement.cs · GitHub