# underdamped oscillator or numeric springing for UI Button moveToPosition?

Hey everyone, Any ideas how I can achieve a underdamped oscillator type of movement for Ui Button? I want a UI Button to drop in from the top of off screen into the center of the screen and with a quickly fading light spring bounce(underdamped oscillator). trying to figure out the code for the math and move implementation so it all ties together but its kinda over my head right now. I have watched a bunch of videos and read alot of forum code but I just don’t think its exactly what im looking for. i can find Sin movement but nothing that fades the oscillator or “sin wave” down to zero movements( the UI button “settles” into place)

Or numeric springing looks like it is exactly what i need. The purple box on the bottom is what im looking for, but to not revert back to the direction in came from after the bouncing is done.

There are tweening libraries out there that will do this. iTween and DOTween are the two I see folks using most often.

1 Like

+1 for tweening libraries. Here’s a little idea of what goes on under the hood.

``````IEnumerator ExampleRoutine ()
{
//Positions for the sake of providing an example. This could be whatever you want.
Vector2[] positions = new Vector2[2];
positions [0] = Vector2.zero;
positions [1] = new Vector2 (0f, -3f);

//Self explanatory
float timeStamp = Time.time;
//The duration of the movement
float duration = 0.5f;

while (Time.time < timeStamp + duration)
{
//The base of the interpolation factor
float t = (Time.time - timeStamp) / duration;

//"Ease out elastic" based on Robert Penner's functions
t = Mathf.Sin (-13 * (Mathf.PI * 0.5f) * (t + 1)) * Mathf.Pow (2, -10 * t) + 1;

//Interpolate between the 2 positions with the easing factor t
transform.position = Vector2.LerpUnclamped (positions [0], positions [1], t);
yield return null;
}
//Since the while loop might not include the final position, set to final position
transform.position = positions [1];
}
``````

In theory, if you wanted a different ease type, you could replace the t = Mathf.Sin (blablabla); line with another easing function and get away with it just fine.

Edit : Here’s a demo to see his equations in action
http://robertpenner.com/easing/easing_demo.html

1 Like

DOTween is free and pretty great. You can choose from a variety of functions like sinusoidal jiggly-flounce and co-tangential bumbly-floop.

1 Like

Thaks guys! I will have to check this out.

If you don’t want to use a tween library, and just want access to the ease methods themselves. They’re readily available on the internet.

Here I have them written in C#:

The ease method you’re looking for is ‘Elastic’

The methods themselves are called like a lerp method, but with a few extra parameters:

t - the current time position (a value from 0 → d)
b - the initial value
c - the amount of change (end - b)
d - the total amount of time the ease should take

An example of using a Coroutine to use it:

``````IEnumerator DoEaseScale(Transform trans, Ease ease, float startScale, float endScale, float dur)
{
float t = 0f;
while(t < dur)
{
trans.localScale = Vector3.one * ease(t, startScale, endScale - startScale, dur);
yield return null;
t += Time.deltaTime;
}

trans.localScale = Vector3.one * endScale;
}
``````

And here’s how you might do it for a vector:

``````IEnumerator DoEasePosition(Transform trans, Ease ease, Vector3 start, Vector3 end, float dur)
{
float t = 0f;
var v = end - start;
while(t < dur)
{
trans.position = start + v * ease(t, 0f, 1f, dur);
yield return null;
t += Time.deltaTime;
}

trans.position = end;
}
``````

Though you’ll notice I created a short hand method to do it in the linked code above.

1 Like

excellent material!