Fade out Unity UI text

Question

When I run the following code on my UI text

Color color = text.color;
color.a -= 1.0f;
text.color = color;

The alpha value of the text is immediately set to 0. How can I simply fade out the text.

Answer 1

If you are using Unity 4.6 and newer you can take advantage of CrossFadeAlpha and CrossFadeColor.

Example:

// fade to transparent over 500ms.
text.CrossFadeAlpha(0.0f, 0.05f, false);

// and back over 500ms.
text.CrossFadeAlpha(1.0f, 0.05f, false);

These two functions are a bit nicer to use since you don't have to worry about keeping track of anything. Just call it and go about your day.

Answer 2

You can use Coroutines:

Example:

public Text text;
public void FadeOut()
{
    StartCoroutine(FadeOutCR);
}

private IEnumerator FadeOutCR()
{
    float duration = 0.5f; //0.5 secs
    float currentTime = 0f;
    while(currentTime < duration)
    {
        float alpha = Mathf.Lerp(1f, 0f, currentTime/duration);
        text.color = new Color(text.color.r, text.color.g, text.color.b, alpha);
        currentTime += Time.deltaTime;
        yield return null;
    }
    yield break;
}

Answer 3

Color values in Unity work in a 0f..1f range, so:

• 0.0f is 0% (or 0/255 as shown in the editor)
• 0.5f is 50% (or 127.5/255)
• 1.0f is 100% (or 255/255)

Subtracting by 1.0f is bringing the value to 0%. Try a different decrement like 0.1f:

color.a -= 0.1f;

Answer 4

Add this to the update method or a coroutine -

if(text.color != Color.clear) Color.Lerp (text.color, Color.clear, fadeSpeed * Time.deltaTime);

Answer 5

here is my simpler solution if you use Text Object. The code fades the Text object's text it is attached to in and out. the speed can be changed using blinkStep. (in order to test, just make it public). You can just copy and paste it in a script named 'TextFlicker' or rename the class to whatever is your script's name. ;-)

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

public class TextFlicker : MonoBehaviour {
    float blinkDurationSecs =1f;
    float blinkProgress =0f;
    float blinkStep = 0.01f;
    //Color txtColor = Color.black;
    Text blinkingText;
    // Use this for initialization
    void Start () {
        blinkingText = GetComponentInParent<Text>();
    }

    // Update is called once per frame
    void Update () {
        if ((blinkProgress > 1)||(blinkProgress<0)) {
            blinkStep*=-1f;
        } 
        blinkProgress+=blinkStep;
        blinkingText.color = Color.Lerp (Color.black, Color.white, blinkProgress);// or whatever color you choose
    }
}

Answer 6

Here is Blink Code for any UI Text or Elements.

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

public class Blink : MonoBehaviour {

    // this is the UI.Text or other UI element you want to toggle
    public MaskableGraphic imageToToggle;

    public float interval = 1f;
    public float startDelay = 0.5f;
    public bool currentState = true;
    public bool defaultState = true;
    bool isBlinking = false;


    void Start()
    {
        imageToToggle.enabled = defaultState;
        StartBlink();
    }

    public void StartBlink()
    {
        // do not invoke the blink twice - needed if you need to start the blink from an external object
        if (isBlinking)
            return;

        if (imageToToggle !=null)
        {
            isBlinking = true;
            InvokeRepeating("ToggleState", startDelay, interval);
        }
    }

    public void ToggleState()
    {
        imageToToggle.enabled = !imageToToggle.enabled;
    }

}

Answer 7

For everyone, you can use this script as a component for every text:

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

public class FadeController : MonoBehaviour
{
    public float fadeDuration = 0.5f;

    public float fadeDelay = 0f;

    public float fadeTo = 0f;

    public Text text;

    void Start ()
    {
        // Fade with initial delay
        Invoke ("fade", fadeDelay);
    }

    public void fade ()
    {
        // Fade in/out
        text.CrossFadeAlpha (fadeTo, fadeDuration, false);
    }
}