How to fix issues with repeated coroutines for lerping values?

Question

I have created a progress bar system that lerps the value over a duration to provide some life to the progress bars.

I've done this using a coroutine that gets called each time a value (such as life or exp) gets modified.

The problem with this is, if the coroutine gets called in rapid succession, i.e. before the previous instance of the coroutine is finished, the lerped values inside the progress bar get messed up. They get fixed at the next coroutine call, but it kind of bothers me, so if someone can provide some insight into this, or maybe a workaround or an alternative way of accomplishing this, I would very much appreciate it.

The code for the coroutine I'm using is this:

private IEnumerator FillLerp(int currExp, int expNeed)
{        
    float lerpDuration = 2f;
    float lerpSpeed = 3f;
    float i = 0f;
    float amountToFill = (float)currExp / expNeed;

    while (i < lerpDuration)
    {
        yield return null;
        _experienceBarFill.fillAmount = Mathf.Lerp(_experienceBarFill.fillAmount, amountToFill, Time.deltaTime * lerpSpeed);
        i += Time.deltaTime;
    }
}

Answer 1

I often like to tackle this with the following pattern, where I store the coroutine instance while it's in progress, and stop it if I need a new one.

Coroutine _fillAnimation;

void AnimateFill(float targetFill, float duration) {
    if(_fillAnimation != null)
        StopCoroutine(_fillAnimation);

    _fillAnimation = StartCoroutine(AnimateFillCoroutine(targetFill, duration);
}

IEnumerator AnimateFillCoroutine(float targetFill, float durationForCompleteFill)
{       
    float startFill = _experienceBarFill.fillAmount;

    // We'll scale our lerp speed so the total duration of the animation is
    // proportionate to how much the value has changed.
    float speed = 1.0f / (durationForCompleteFill * Mathf.Abs(targetFill - startFill));
     
    for(float t = 0; t < 1f; t += speed * Time.deltaTime) {
        // I've replaced your exponential ease-out Lerp with a quadratic version that
        // completes in a finite number of steps, and is easier to correct for deltaTime.
        // (The exponential one never quite reaches its target)
        float progress = 1f - t;
        progress = 1f - progress * progress;
        _experienceBarFill.fillAmount = Mathf.Lerp(startFill, targetFill, progress);
        yield return null;
    }

    // Account for any loose change to ensure we end exactly where we want.
    _experienceBarFill.fillAmount = targetFill;
    // Clear the coroutine so we know we don't need to interrupt it next time.
    _fillAnimation = null;
}

Answer 2

Well, there are two main ways you can do this. The first and probably easier way is to not use a coroutine at all and have a central update. Something like.

private void Update() {
    if (desiredFillAmount > _experienceBarFill.fillAmount) {
        _experienceBarFill.fillAmount = Mathf.Min(desiredFillAmount, _experienceBarFill.fillAmount + Time.deltaTime * 0.1f);
    } else if (desiredFillAmount < _experienceBarFill.fillAmount) {
        _experienceBarFill.fillAmount = Mathf.Max(desiredFillAmount, _experienceBarFill.fillAmount - Time.deltaTime * 0.1f);
    }
}

The other way is that you can instead create your own coroutine runner that instead of playing coroutines all at once plays them sequentially by putting them in a queue.

So instead of StartCoroutine(FillLerp()) you'd have something like CoroutineRunner.instance.run(FillLerp()). It may sound hard, but all you really need to do is something like:

public void runCoroutine() {
    if (coroutineQueue.Count > 0) {
        if (!coroutineQueue.Peek().MoveNext()) {
            coroutineQueue.Pop();
        }
    }
}