FadeIn fadeOut UI Button in unity 5

Question

I want to add fade in and fade out effects to my UI buttons in Unity5, but CrossFadeAlpha and CrossFadeColor doesn't work with buttons. Is there an alternative of achieving fadein and fadeout effect of UI button in unity.

Answer 1

I hope this example using CanvasGroup will help you, Press the button when the screen will darken slowly fadeOut . If you want to make FadeIn set canvasG.alpha value at first 0 and to increase value

Select Canvas Hierarchy panel and adding fade class then dragAndDrop button onClick and set function FadeIt

public class Fade : MonoBehaviour 
{         
     public void FadeIt()
     {
         StartCoroutine(DoFade());
     }
    
     IEnumerator DoFade()
     {
         CanvasGroup canvasG = GetComponent<CanvasGroup>();
         while (canvasG.alpha > 0) {
             canvasG.alpha -= Time.deltaTime / 2; // optional parameters 2, 3, 5.. 
             yield return null;
         }
     }
}

NOTE: This will fade everything within the CanvasGroup.

Answer 2

Use LeanTween wich is a efficient tweening engine for Unity3d, download the package from the asset store and import LeanTween.cs to your proyect.

The button must have a canvas group complement to add a fade in or out with this script:

 myButton.onClick.AddListener(()=>{
LeanTween.alphaCanvas (myButton.GetComponent<CanvasGroup>(), 0f, 0.1f);
});

source

Answer 3

There is no built in way to do this but you can implement your own method of doing this. Get the Image and Text components from your Button then use coroutine to modify the alpha of their colors over time.

    IEnumerator fadeButton(Button button, bool fadeIn, float duration)
    {

        float counter = 0f;

        //Set Values depending on if fadeIn or fadeOut
        float a, b;
        if (fadeIn)
        {
            a = 0;
            b = 1;
        }
        else
        {
            a = 1;
            b = 0;
        }

        Image buttonImage = button.GetComponent<Image>();
        Text buttonText = button.GetComponentInChildren<Text>();

        //Enable both Button, Image and Text components
        if (!button.enabled)
            button.enabled = true;

        if (!buttonImage.enabled)
            buttonImage.enabled = true;

        if (!buttonText.enabled)
            buttonText.enabled = true;

        //For Button None or ColorTint mode
        Color buttonColor = buttonImage.color;
        Color textColor = buttonText.color;

        //For Button SpriteSwap mode
        ColorBlock colorBlock = button.colors;


        //Do the actual fading
        while (counter < duration)
        {
            counter += Time.deltaTime;
            float alpha = Mathf.Lerp(a, b, counter / duration);
            //Debug.Log(alpha);

            if (button.transition == Selectable.Transition.None || button.transition == Selectable.Transition.ColorTint)
            {
                buttonImage.color = new Color(buttonColor.r, buttonColor.g, buttonColor.b, alpha);//Fade Traget Image
                buttonText.color = new Color(textColor.r, textColor.g, textColor.b, alpha);//Fade Text
            }
            else if (button.transition == Selectable.Transition.SpriteSwap)
            {
                ////Fade All Transition Images
                colorBlock.normalColor = new Color(colorBlock.normalColor.r, colorBlock.normalColor.g, colorBlock.normalColor.b, alpha);
                colorBlock.pressedColor = new Color(colorBlock.pressedColor.r, colorBlock.pressedColor.g, colorBlock.pressedColor.b, alpha);
                colorBlock.highlightedColor = new Color(colorBlock.highlightedColor.r, colorBlock.highlightedColor.g, colorBlock.highlightedColor.b, alpha);
                colorBlock.disabledColor = new Color(colorBlock.disabledColor.r, colorBlock.disabledColor.g, colorBlock.disabledColor.b, alpha);

                button.colors = colorBlock; //Assign the colors back to the Button
                buttonImage.color = new Color(buttonColor.r, buttonColor.g, buttonColor.b, alpha);//Fade Traget Image
                buttonText.color = new Color(textColor.r, textColor.g, textColor.b, alpha);//Fade Text
            }
            else
            {
                Debug.LogError("Button Transition Type not Supported");
            }

            yield return null;
        }

        if (!fadeIn)
        {
            //Disable both Button, Image and Text components
            buttonImage.enabled = false;
            buttonText.enabled = false;
            button.enabled = false;
        }
    }

Usage:

public Button button;

Fade-in Button in 3 seconds

StartCoroutine(fadeButton(button, true, 3));

Fade-out Button in 3 seconds

StartCoroutine(fadeButton(button, false, 3));