Unity UGUI技巧 之 UI渐隐渐现的效果快速实现
1、打开Unity，新建一个工程，具体如下图
2、在场景中新建一个“Image”，调整好布局，具体如下图
3、在工程中，新建一个脚本“UIFadeTest”，双击脚本或者右键“Open C# Project”打开脚本，具体如下图
4、“UIFadeTest”脚本上编辑代码，首先要求“CanvasGroup”组件，然后设置变量，控制fade速度，获得“CanvasGroup”组件，设置目标Alpha值等，接着单例化该脚本，载Update函数里面lerp插值Alpha值，最后时限UI显示和隐藏的接口函数，具体代码和代码说明如下图
5、“UIFadeTest”脚本具体内容如下：
using UnityEngine;
[RequireComponent(typeof(CanvasGroup))]
public class UIFadeTest : MonoBehaviour {
public float fadeSpeed = 1.0f;
private CanvasGroup canvasGroup;
private float alpha = 1.0f;
private static UIFadeTest instance;
public static UIFadeTest Instance{
get{
return instance;
}
}
// Use this for initialization
void Start () {
instance = this;
canvasGroup = this.gameObject.GetComponent <CanvasGroup> ();
}
// Update is called once per frame
void Update () {
if(alpha != canvasGroup.alpha){
canvasGroup.alpha = Mathf.Lerp (canvasGroup.alpha, alpha, fadeSpeed * Time.deltaTime);
if (Mathf.Abs (canvasGroup.alpha - alpha)< 0.05f) {
canvasGroup.alpha = alpha;
}
}
}
public void UIShow() {
alpha = 1.0f;
canvasGroup.blocksRaycasts = true;
}
public void UIHide() {
alpha = 0.0f;
canvasGroup.blocksRaycasts = false;
}
}
6、脚本编译正确，回到Unity界面，把脚本“UIFadeTest”赋给“Image”，然后在新建一个脚本“ToCallUIFadeTest”，并打开脚本，具体如下图
7、“ToCallUIFadeTest”脚本上编写代码，在Update函数中设置按下“S”键，显示UI，按下“H”键隐藏UI，具体代码和代码说明如下图
8、“ToCallUIFadeTest”脚本具体内容如下：
9、脚本编译正确，回到Unity界面，在场景中新建一个“GameObject”，把脚本“ToCallUIFadeTest”赋给“GameObject”，具体如下图
10、运行场景，分别按下“H”、“S”键，“Image”渐隐渐现，具体如下图
11、到此，《Unity UGUI技巧 之 UI渐隐渐现的效果快速实现》讲解结束，谢谢