CODEWITHSUNDEEP
c#unity-game-engine
N0xus
N0xus

Reputation: 2724

Unity fade image alpha over time

I'm wanting to change the alpha of my UI Images gradually instead of instantly. So far my code for fading the alpha of my image instantly is as follows

public void Highlight()
{
    foreach (Image image in imagesToHighlight)
    {
        Color c = image.color;
        if(c.a < maxColor)
        {
            c.a = maxColor;
        }

        image.color = c;
    }

    foreach (Image image in imagesToFade)
    {
        Color c = image.color;
        if(c.a > halfColor)
        {
            c.a = halfColor;
        }
        image.color = c; 

    }

}

The above code works fine, but I'm struggling to modify my code so that instead of doing it instantly, it does it slowly over a second or two. I've tried changing the line c.a = maxColor; to c.a-- in order to see if the image would continually fade out slowly but the alpha just instantly drops.

What am I doing wrong?

Upvotes: 2

Views: 19302

Answers (3)

Origin
Origin

Reputation: 1

All credit goes to Umair M. All I have done is made it possible to use a single method rather than two. Also with no need to instantiate the method.

I have shown the whole class to indicate how to run the method without having consequential commands occurring before the Co-routine has finished.

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

public class FishUI : MonoBehaviour
{
    public GameObject mainPanel;
    public float fadeDelay = 1f;
        
    public void OpenPanel()
    {
        mainPanel.SetActive(true);
        StartCoroutine(Fade(mainPanel.GetComponent<Image>(), fadeDelay, true));
    }

    public void ClosePanel()
    {
        StartCoroutine(Fade(mainPanel.GetComponent<Image>(), fadeDelay, false));
        Invoke(nameof(DelayedSetActive), fadeDelay);
    }

    void DelayedSetActive()
    {
        mainPanel.SetActive(false);
    }

    IEnumerator Fade(Image image, float fadeTime, bool fadeIn)
    {
        float elapsedTime = 0.0f;
        Color c = image.color;
        while (elapsedTime < fadeTime)
        {
            yield return null;
            elapsedTime += Time.deltaTime;
            if (fadeIn)
            {
                c.a = Mathf.Clamp01(elapsedTime / fadeTime);
            }
            else
            {
                c.a = 1f - Mathf.Clamp01(elapsedTime / fadeTime);
            }
            
            image.color = c;
        }
    }
}

Upvotes: 0

AminSojoudi
AminSojoudi

Reputation: 2006

You can also use a tween engine like Dotween and then simply use it like this :

image.DOFade(1, 0.5f)

Dotween has plenty of extention methods to help you, see the documentation. http://dotween.demigiant.com/documentation.php

DOColor(Color to, float duration) DOFade(float to, float duration)

Upvotes: 5

Umair M
Umair M

Reputation: 10720

Use Coroutine to implement this. Something like this:

FadeOut:

private YieldInstruction fadeInstruction = new YieldInstruction();
IEnumerator FadeOut(Image image)
{
    float elapsedTime = 0.0f;
    Color c = image.color;
    while (elapsedTime < fadeTime)
    {
        yield return fadeInstruction;
        elapsedTime += Time.deltaTime ;
        c.a = 1.0f - Mathf.Clamp01(elapsedTime / fadeTime);
        image.color = c;
    }
}

you may use it like this:

foreach (Image image in imagesToFade)
    StartCoroutine(FadeOut(image));

FadeIn:

IEnumerator FadeIn(Image image)
{
    float elapsedTime = 0.0f;
    Color c = image.color;
    while (elapsedTime < fadeTime)
    {
        yield return fadeInstruction;
        elapsedTime += Time.deltaTime ;
        c.a = Mathf.Clamp01(elapsedTime / fadeTime);
        image.color = c;
    }
}

Hope this helps

Upvotes: 9

Related Questions