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.点击按钮,实现效果如下图所示: