Mathf.Lerp misses final value

Question

I'm using Mathf.Lerp to animate a circular progress bar.

The progress bar is an image that has a property named "FillAmount":

0 means not filled
1 means filled

Along with the Fill property "Radial 360", it acts somewhat like a clock.

For some reason, the final value after executing the Lerp function is missed, and I don't see how I could improve the function to end up with the expected result.

My circular progress bar is a 3/4 ring, that's why I multiply the uFrom and uTo (which are between 0 and 100) by 0.75.

This is my code:

public IEnumerator AnimateHealthChange(int uFrom, int uTo)
{
    float fFade = 0.25f;

    float fOld = ((uFrom * 0.75f) / 100);
    float fNew = ((uTo * 0.75f) / 100);

    Debug.Log("Changing from " + fOld.ToString() + " to " + fNew.ToString());

    for (float t = 0.01f; t < fFade; t += Time.deltaTime)
    {
        ImageHealthRing.fillAmount = Mathf.Lerp(fOld, fNew, Mathf.Min(1, t / fFade));
        yield return null;//
    }

    Debug.Log("Final filling after for-next-statement: " + ImageHealthRing.fillAmount.ToString());

    yield return null;
}

For example, when I call AnimateHealthChange(0, 100), I get the following log outputs:

Changing from 0 to 0.75

Final filling after for-next-statement: 0.6807814

I expected the final result to 0.75, not 0.6807814.

Does anybody see my mistake, or did I use Lerp incorrectly?

Answer 1

Your for loop is a problem since it makes no guarantees:

for (float t = 0.01f; t < fFade; t += Time.deltaTime)

Time.deltaTime can be any number (depending on the performance of the game and the framerate) and you're using t < fFade instead of t <= fFade so even if you do, by chance, end up with t == fFade, (which is the value it should end on to fill properly) it's going to skip that iteration of the loop.

The easiest solution here would be to just add an extra statement after the loop that forces fillAmount to the proper value:

    ...
    yield return null;//
}
ImageHealthRing.fillAmount = fNew;

This way your loop is still handling the animation and when your function ends, you're guaranteeing that it's ending on the proper value.

Answer 2

Probably it's in for loop. See how it's executed: Initially, t is set to 0.01. Healthbar is changed a little. Then, t is increased by Time.deltaTime. For example, it happens to be 0.17. Now t equals 0.18 and loop continues to run.

But when after another increment t becomes greater or equal than fFade, program will exit loop without changing the healthbar. In my example, the last processed number will be 0.18.

How to solve this? You should set fillAmount to fNew right after the loop.

Answer 3

Instead of using a for loop. Use a while loop. so your code runs until it reaches the desired value.

Right now you are exiting based on time and not based on the desired result. You can still run every frame and animate by time but you should not stop the code based on the time it runs.

In addition, it might also be worth clamping/setting the value when you exit the loop. Either set it to the parameter you entered in the function( or fNew in your case).