Unity は UGUI コンポーネントのフェード効果を実現します
序文
私たちが行っているプロジェクトでは、いくつかのインターフェイスが切り替えられたときに、いくつかの効果を使用しないと、切り替えが非常に鈍くなるため、デザインでフェードインとフェードアウトの効果を実現する必要がある場合があります。団結を達成します。以下は、私が自分でアレンジしたフェードインとフェードイン効果の実現方法です。
実装手順
1. 以下の図に示すように、新しいプロジェクトを作成し、シーンに Image コンポーネントと 2 つのボタンを作成します。 2. 下の図に示すように、
Canvas Group コンポーネントを Image コンポーネントに追加します。
3. ShowHideImage を作成します。画像を制御する cs スクリプト コンポーネントの可視効果と非表示効果のコードは次のとおりです。
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 コンポーネントにマウントします
。効果 以下に示すように:
