如何实现UI Image平滑自动或按键淡入淡出？附代码失效问题

问题根源 #

你的代码有两个关键问题导致无效果：

1. 每帧重复触发渐变：Update()里每帧都调用CrossFadeAlpha，相当于每次都重置2秒的淡入/淡出流程，渐变永远走不完，自然看不到视觉变化。
2. Image组件可能未正确绑定：即便脚本挂在Image对象上，如果Inspector里的m_Image没赋值，代码根本找不到要操作的组件。

修复后的代码 #

using UnityEngine;
using UnityEngine.UI;

public class Fader : MonoBehaviour
{
    private Image m_Image;
    private bool m_Fading;
    // 防止重复触发渐变的标记
    private bool isFading;

    void Awake()
    {
        // 自动获取当前对象的Image组件，无需手动拖入赋值
        m_Image = GetComponent<Image>();
    }

    void Update()
    {
        if (m_Fading && !isFading)
        {
            StartCoroutine(FadeToAlpha(1f, 2f));
        }
        else if (!m_Fading && !isFading)
        {
            StartCoroutine(FadeToAlpha(0f, 2f));
        }
    }

    void OnGUI()
    {
        m_Fading = GUI.Toggle(new Rect(0, 0, 100, 30), m_Fading, "淡入/淡出");
    }

    // 用协程控制渐变过程，确保一次执行完成
    private IEnumerator FadeToAlpha(float targetAlpha, float duration)
    {
        isFading = true;
        float startAlpha = m_Image.color.a;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float currentAlpha = Mathf.Lerp(startAlpha, targetAlpha, elapsed / duration);
            Color tempColor = m_Image.color;
            tempColor.a = currentAlpha;
            m_Image.color = tempColor;
            yield return null;
        }

        // 强制设置最终Alpha值，避免计算误差
        Color finalColor = m_Image.color;
        finalColor.a = targetAlpha;
        m_Image.color = finalColor;
        isFading = false;
    }
}

改动说明 #

• 用协程代替CrossFadeAlpha，完全掌控渐变流程，不会被每帧调用打断。
• Awake()里自动获取组件，省去手动赋值的步骤，减少操作失误。
• 添加isFading标记，保证同一时间只有一个渐变在运行，避免流程冲突。

内容的提问来源于stack exchange，提问作者Daniel Lip