Unity实现UGUI组件的渐隐渐现效果

Unity实现UGUI组件的渐隐渐现效果

前言

在我们做的项目，有些界面切换的时候，如果不使用一些效果，就会显得切换的很生硬，所以有时候设计提需求实现那种渐隐渐现的效果，这个效果在Unity中也很好实现。以下是我自己整理的一个渐隐渐现效果的实现方法。

实现步骤

1.新建项目，在场景中新建一个Image组件和两个button，如下图所示：
2.在Image组件上添加Canvas Group组件，如下图所示：

3.创建ShowHideImage.cs脚本，用来控制Image组件的显隐效果，代码如下所示：

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

/// <summary>
/// UI的渐入渐出
/// </summary>
public class ShowHideImage : MonoBehaviour
{
    private float UI_Alpha = 1;             //初始化时让UI显示
    float alphaSpeed = 0.8f;          //渐隐渐显的速度
    private CanvasGroup canvasGroup;

    // Use this for initialization
    void Start()
    {
        canvasGroup = this.GetComponent<CanvasGroup>();
    }

    // Update is called once per frame
    void Update()
    {
        ChangeColor();
    }

    /// <summary>
    /// 改变透明度
    /// </summary>
    void ChangeColor() 
    {
        if (canvasGroup == null)
        {
            return;
        }

        if (UI_Alpha != canvasGroup.alpha)
        {
            canvasGroup.alpha = Mathf.Lerp(canvasGroup.alpha, UI_Alpha, alphaSpeed * Time.deltaTime);
            if (Mathf.Abs(UI_Alpha - canvasGroup.alpha) <= 0.01f)
            {
                canvasGroup.alpha = UI_Alpha;
            }
        }
    }
    public void UI_FadeIn_Event()
    {
        UI_Alpha = 1;
        canvasGroup.blocksRaycasts = true;      //可以和该对象交互
    }
    public void UI_FadeOut_Event()
    {
        UI_Alpha = 0;
        canvasGroup.blocksRaycasts = false;     //不可以和该对象交互
    }

    /// <summary>
    /// 隐藏界面
    /// </summary>
    internal void ToHideThis() 
    {
        canvasGroup.alpha = 0f;
    }
}

4.将ShowHideImage.cs脚本挂载到Image组件上，如下图所示：

5.将渐隐、渐现的功能绑定到场景中的按钮上，如下图所示：


6.点击按钮，实现效果如下图所示：

项目相关

项目Demo