利用RawImage实现淡入淡出效果

在进行场景切换时，常常会看到淡入淡出的效果。要是以前在unity中，可能会使用GUITexture去实现，但这个类在UnityEngine已经被舍弃了，转而可以使用RawImage去实现。

 

1.在项目下右键->UI->Raw Image

接着就可以看见多了Canvas->RawImage，EventSystem两项。

2.选中RawImage，更改其中的配置

使效果填充满显示的整个屏幕

在Raw Image下选择要显示的Texture将其拖至其中，同时将下面的颜色调整为黑色

增加脚本文件FadeInOut.cs文件，修改如下

using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;

public class FadeInOut : MonoBehaviour
{
    private float fadeSpeed = 1.5f;

    private bool sceneStarting = true;
    private RawImage rawImage;

    void Start()
    {
        RectTransform rectTransform = GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(Screen.width, Screen.height);

        rawImage = this.GetComponent<RawImage>();
    }

    void Update()
    {
        if (sceneStarting)
        {
            startScene();
        }
        else
        {
            EndScene();
        }
    }

    private void FadeToClear()
    {
        rawImage.color = Color.Lerp(rawImage.color, Color.clear, fadeSpeed * Time.deltaTime);
    }

    private void FadeToBlack()
    {
        rawImage.color = Color.Lerp(rawImage.color, Color.black, fadeSpeed * Time.deltaTime);
    }

    private void startScene()
    {
        FadeToClear();

        if (rawImage.color.a <= 0.05f)
        {
            rawImage.color = Color.clear;
            rawImage.enabled = false;
            sceneStarting = false;
        }
    }

    public void EndScene()
    {
        rawImage.enabled = true;
        FadeToBlack();

        if (rawImage.color.a >= 0.95f)
        {
            SceneManager.LoadScene("Demo");
            sceneStarting = true;
        }
    }
}

将其拖至右侧RawImage中，最后的显示效果是这样的