How to fade in/out ui image using a key ?

Unity Engine
,
1

This is working for the FadeOut but when pressing the F key again it’s fading in very fast. i set the fadeTime to 3 in the editor but the FadeIn is too fast.

also, how can i interrupt the coroutine in the middle , when pressing f while it’s fading in or out it will change the direction at once and will fade the other way ?

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

public class Fader : MonoBehaviour
{
    public Image image;

    private bool isFading = false;

    private void Start()
    {

    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.F))
        {
            isFading = !true;

            if (isFading)
            {
                StartCoroutine(FadeOut(image, 3f));
            }
            else
            {
                StartCoroutine(FadeIn(image, 3f));
            }


        }
    }

    private YieldInstruction fadeInstruction = new YieldInstruction();
    IEnumerator FadeOut(Image image, float fadeTime)
    {
        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;
        }
    }

    IEnumerator FadeIn(Image image, float fadeTime)
    {
        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;
        }
    }
}
2

Oh my goodness, toss out those coroutines. :slight_smile:

Fading, simple and easy:

Totally reversible (or even stoppable) at any point.

This is the general principle:

Smoothing movement between any two particular values:

You have currentQuantity and desiredQuantity.

  • only set desiredQuantity
  • the code always moves currentQuantity towards desiredQuantity
  • read currentQuantity for the smoothed value

Works for floats, Vectors, Colors, Quaternions, anything continuous or lerp-able.

The code: SmoothMovement.cs · GitHub

3

I tried this code :

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

public class SmoothMovement : MonoBehaviour
{
    public Image image;

    float currentQuantity;
    float desiredQuantity;
    Color c;

    const float MovementPerSecond = 2.0f;

    void Start ()
    {
        // TODO: set up your initial values, if any
        currentQuantity = 1;

        // match desired
        desiredQuantity = currentQuantity;

        c = image.color;
    }

    void AcceptUserInput()
    {
        if (Input.GetKeyDown( KeyCode.Alpha1))
        {
            desiredQuantity = 1;
        }
        if (Input.GetKeyDown( KeyCode.Alpha2))
        {
            desiredQuantity = 2;
        }
        if (Input.GetKeyDown( KeyCode.Alpha3))
        {
            desiredQuantity = 3;
        }
    }

    void ProcessMovement()
    {
        // Every frame without exception move the currentQuantity
        // towards the desiredQuantity, by the movement rate:
        currentQuantity = Mathf.MoveTowards(
            currentQuantity,
            desiredQuantity,
            MovementPerSecond * Time.deltaTime);

        c.a = currentQuantity;
        image.color = c;
    }

    public UnityEngine.UI.Text TextOutput;
    void DisplayResults()
    {
        TextOutput.text = "Press 1, 2 or 3 to select desiredQuantity.\n\n" +
            "desiredQuantity = " + desiredQuantity + "\n" +
            "currentQuantity = " + currentQuantity + "\n";
    }

    void Update ()
    {
        AcceptUserInput();

        ProcessMovement();

        DisplayResults();
    }
}

but having some issues.

in the editor the camera i changed it to Clear Flags to Skybox
then i added ui image and change it’s color to black and set the alpha to 0.

but when i’m running the game it’s changing the image alpha color value to 255 and then when i’m pressing either on any of the keys it’s not fading and does nothing.

The camera settings :

The canvas settings :

The image settings :

4

My reading of your code sets the quantity to 1, 2 or 3

Alpha is only from 0.0f to 1.0f.

It feels like you randomly combined a little from each of those links. Don’t do that unless you know what you’re doing. The first one directly applies to fading. Use that.