Fading UI Image

Questions & Answers
1

Unity 5.3.4

Hi,

I’m attempting to fade a UI Image

graphics_to_fade[0] = image_sender.GetComponent();

graphics_to_fade[0].CrossFadeAlpha(0, 3, false);

This is making the image disappear, but it does not fade at all. If the 0 that is sent to CrossFadeAlpha is replaced with 0.1f or another number, nothing happens.

The same thing happens when using:
var clr = new Color(1, 1, 1, transparency);
image_sender.GetComponent().material.color = clr;

It goes from normal to invisible and never fades/shows transparency.

Any ideas what I can do to have the image fade?

Thanks.

2

You have to actually fade the color over time in Update().

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

public class Fade : MonoBehaviour {
    public float FadeRate;
    private Image image;
    private float targetAlpha;
	// Use this for initialization
	void Start () {
        this.image = this.GetComponent<Image>();
        if(this.image==null)
        {
            Debug.LogError("Error: No image on "+this.name);
        }
        this.targetAlpha = this.image.color.a;
	}
	
	// Update is called once per frame
	void Update () {
        Color curColor = this.image.color;
        float alphaDiff = Mathf.Abs(curColor.a-this.targetAlpha);
        if (alphaDiff>0.0001f)
        {
            curColor.a = Mathf.Lerp(curColor.a,targetAlpha,this.FadeRate*Time.deltaTime);
            this.image.color = curColor;
        }
	}

    public void FadeOut()
    {
        this.targetAlpha = 0.0f;
    }

    public void FadeIn()
    {
        this.targetAlpha = 1.0f;
    }
}