Lerp in Coroutine from UI Button

Unity Engine
1

I have a UI Canvas with a Button and a Panel. The Panel has a script that controls fading. In this script there is a coroutine containing a lerp, and a method to call this coroutine. When I call that method from the button, the lerp happens instantly.

This is my script:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ToggleOpacity : MonoBehaviour
{
    public void StartFadeCoroutine()
    {
        StartCoroutine(FadeCoroutine());
    }

    private IEnumerator FadeCoroutine()
    {
        //Get color component
        Image image = this.GetComponent<Image>();
        //Get color values
        Color invisible = image.color;
        invisible.a = 0;
        Color visible = image.color;
        visible.a = 1;

        image.color = Color.Lerp(invisible, visible, 1f);
        yield return null;
    }
}
2

Thats because you’re not doing anything. If you want to lerp it over time, you can do it like so:

[Tooltip("In Seconds")]
public float TimeToLerp = 3f;

private float _startTime;
public void StartFadeCoroutine()
    {
        _startTime = Time.time;
        StartCoroutine(FadeCoroutine());
    }

    private IEnumerator FadeCoroutine()
    {
        //Get color component
        Image image = this.GetComponent<Image>();
        Color startColor = invisible;
        Color endColor = startColor;
        endColor.a = 1f;

        float percentage = 0f;
        while (percentage < 1f) {
             percentage = (Time.time - _startTime) / TimeToLerp;
             image.color = Color.Lerp(startColor , endColor , percentage);
             yield return null;
        }
    }

Just make sure you’re not starting multiple coroutines at once.

And using .GetComponent<> everytime is not efficient. Use something like .OnValidate + public / [SerializeField] to save references in editor. Or use Awake / Start for that.

1 Like
3

I have updated my code and everything works perfectly. This code will fade a UI Panel and child Text whenever a button is pressed:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;


public class ToggleOpacity : MonoBehaviour
{
    [Tooltip("In Seconds")]
    public float fadeDuration = 1f;

    Image image;
    Text text;
    Color imageColorInvisible, imageColorVisible, textColorVisible, textColorInvisible;
    float _startTime, percentage;
    bool fadeComplete;

    private void Awake()
    {
        image = this.GetComponent<Image>();
        text = GetComponentInChildren<Text>();

        imageColorInvisible = image.color;
        imageColorInvisible.a = 0;
        imageColorVisible = image.color;
        imageColorVisible.a = 1;

        textColorInvisible = text.color;
        textColorInvisible.a = 0;
        textColorVisible = text.color;
        textColorVisible.a = 1;
       
        fadeComplete = true;
        percentage = 0f;
    }

    public void StartFadeCoroutine()
    {
        if (fadeComplete == true)
        {
            _startTime = Time.time;
            percentage = 0f;
            StartCoroutine(FadeCoroutine());
        }
    }

    private IEnumerator FadeCoroutine()
    {
        if (image.color.a == 1)
        {
            while (percentage < 1f)
            {
                fadeComplete = false;
                percentage = (Time.time - _startTime) / fadeDuration;
                image.color = Color.Lerp(imageColorVisible, imageColorInvisible, percentage);
                text.color = Color.Lerp(textColorVisible, textColorInvisible, percentage);
                yield return null;
            }
            fadeComplete = true;
        }
        else if(image.color.a == 0)
        {
            while (percentage < 1f)
            {
                fadeComplete = false;
                percentage = (Time.time - _startTime) / fadeDuration;
                image.color = Color.Lerp(imageColorInvisible, imageColorVisible, percentage);
                text.color = Color.Lerp(textColorInvisible, textColorVisible, percentage);
                yield return null;
            }
            fadeComplete = true;
        }
    }
}