How can I fade out my overlay in Unity?

Question

Something that I can accomplish in 5 minutes in libGDX is taking me forever in Unity. I have a Canvas with a button that covers my entire screen. When the button is clicked, I want the button to fade out and then for the underlying UI to be clickable (if the button is just faded out but it's still on top, you can't click anything).

I tried to use crossFadeAlpha on the Image attached to the button, but the problem is that crossFadeAlpha is async, so I can't do image.enabled = false; when it finishes.

Is there any simple way to accomplish this task in Unity?

Answer 1

Using a Tween engine may not be necessary here, a simple coroutines will do the job :

private IEnumerator FadeOut( float duration )
{
    Image image = GetComponent<Image>();
    Color color = image.color;
    float startAlpha = color.alpha;
    float endAlpha = 0;

    for ( float t = 0 ; t < duration ; t += Time.deltaTime )
    {
         color.alpha = Mathf.SmoothStep ( startAlpha, endAlpha, t / duration ) ;
         image.color = color;
         yield return null;
    }
    color.alpha = endAlpha;
    image.color = color;
    image.enabled = false;
}

// ....

StartCoroutine ( FadeOut ( 5f ) ) ;

I'm on my phone, I haven't tested and the formatting is bad, sorry.

Answer 2

Try the code below. The update method of the button's script:

private float alpha;

void Update(){
    //Apply fade process here
    if(alpha <= 0){
        GetComponent<Button>().enabled = false;
    }
}