Unity2D中如何实现背景图片的平滑切换？

你的当前实现是直接替换Sprite，会导致背景突然跳变，完全没有过渡效果。这里给你一个基于Unity UI双Image叠加的原生实现方案，既能实现平滑淡入淡出，又不会干扰玩家操作：

实现思路 #

用两个全屏Image组件叠加，始终保持一个显示当前背景、另一个隐藏。切换时：

1. 给隐藏的Image设置新背景图
2. 通过渐变透明度，让新背景淡入、旧背景淡出
3. 交换两个Image的状态，循环执行

步骤1：场景设置 #

• 在Canvas下创建两个Image子物体（命名为BackgroundA和BackgroundB）
• 两个Image都设置为全屏覆盖：锚点设为(0,0)到(1,1)，尺寸Delta设为(0,0)
• 初始状态：BackgroundA的Alpha设为1，BackgroundB的Alpha设为0

步骤2：完整代码实现 #

using UnityEngine;
using UnityEngine.UI;

public class SmoothBackgroundSwitcher : MonoBehaviour
{
    [Header("配置参数")]
    public Image bgA;
    public Image bgB;
    public Sprite[] backgroundSprites;
    public float switchInterval = 5f; // 切换间隔时间
    public float transitionTime = 0.5f; // 过渡时长（建议0.3-0.8秒）

    private Image _activeBg;
    private Image _inactiveBg;
    private int _currentSpriteIndex;

    void Start()
    {
        // 初始化初始状态
        _activeBg = bgA;
        _inactiveBg = bgB;
        _currentSpriteIndex = Random.Range(0, backgroundSprites.Length);
        _activeBg.sprite = backgroundSprites[_currentSpriteIndex];
        StartCoroutine(BackgroundSwitchLoop());
    }

    IEnumerator BackgroundSwitchLoop()
    {
        while (true)
        {
            // 随机选一张和当前不同的图（避免无意义重复切换）
            int newIndex;
            do
            {
                newIndex = Random.Range(0, backgroundSprites.Length);
            } while (newIndex == _currentSpriteIndex);
            _currentSpriteIndex = newIndex;

            // 给隐藏的背景设置新图
            _inactiveBg.sprite = backgroundSprites[newIndex];
            // 确保图片全屏适配（可选，根据你的图片尺寸调整）
            _inactiveBg.SetNativeSize();
            _inactiveBg.rectTransform.anchorMin = Vector2.zero;
            _inactiveBg.rectTransform.anchorMax = Vector2.one;
            _inactiveBg.rectTransform.sizeDelta = Vector2.zero;

            // 执行淡入淡出过渡
            float elapsed = 0f;
            while (elapsed < transitionTime)
            {
                elapsed += Time.deltaTime;
                float t = elapsed / transitionTime;
                _activeBg.color = new Color(1, 1, 1, 1 - t);
                _inactiveBg.color = new Color(1, 1, 1, t);
                yield return null;
            }

            // 强制修正最终状态，避免浮点误差
            _activeBg.color = new Color(1, 1, 1, 0);
            _inactiveBg.color = new Color(1, 1, 1, 1);

            // 交换活跃/隐藏背景，为下一次切换做准备
            (_activeBg, _inactiveBg) = (_inactiveBg, _activeBg);

            // 等待下一次切换间隔
            yield return new WaitForSeconds(switchInterval);
        }
    }
}

注意事项 #

• 把脚本挂在Canvas或空物体上，拖拽两个Image和12张背景图到对应字段
• transitionTime不要设太长，0.5秒左右刚好，既保留平滑感又不会干扰玩家
• 如果允许重复切换同一张图，可以去掉代码里的do-while循环
• 图片尺寸不同时，SetNativeSize()+锚点设置能确保全屏显示，不会拉伸变形

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