1. 程式人生 > >Unity中的遮罩面板逐漸清晰逐漸模糊功能

Unity中的遮罩面板逐漸清晰逐漸模糊功能

一、建立一個面板作為遮罩面板,然後指定大小

接著建立一個控制該面板的指令碼(將這個指令碼FadeInAndOut新增給該面板)

/***
*	Title:"智慧工廠" 專案
*		主題:全域性層:面板物體的淡入淡出
*	Description:
*		功能:
*		    1、實現面板的淡入淡出功能
*	Date:2017
*	Version:0.1版本
*	Author:Coffee
*	Modify Recoder:
*/

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

namespace Global
{
	public class FadeInAndOut : MonoBehaviour
	{
        public float colorChangeSpeed = 3F;                                     //面板透明顏色變化的速度
        private Image _ChangeImage;                                             //需要改變透明度的元件

        private bool _PanelFadeIn = true;                                       //淡入標識
        private bool _PanelFadeOut = false;                                     //淡出標識


        private void Start()
        {
            //獲取到Image元件
            _ChangeImage = this.gameObject.GetComponent<Image>();
        }

        private void Update()
        {
            if (_PanelFadeIn == true)
            {
                //面板淡入(隱藏)
                PanelFadeIn();
            }
            else if (_PanelFadeOut == true)
            {
                //場景淡出(顯示)
                PanelFadeOut();
            }
        }


        /// <summary>
        /// 面板淡入(隱藏)
        /// </summary>
        public void SetPanelFadeIn()
        {
            _PanelFadeIn = true;
            _PanelFadeOut = false;
        }

        /// <summary>
        /// 面板淡出(顯示)
        /// </summary>
        public void SetPanelFadeOut()
        {
            _PanelFadeIn = false;
            _PanelFadeOut = true;
        }

        /// <summary>
        /// 面板的淡入(隱藏)
        /// </summary>
        private void PanelFadeIn()
        {
            //面板元件透明
            FadeToClear();
            
            if (_ChangeImage.color.a <= 0.05F)
            {
                _ChangeImage.color = Color.clear;
                _ChangeImage.enabled = false;
                _PanelFadeIn = false;
            }
        }


        /// <summary>
        /// 面板的淡出(顯示)
        /// </summary>
        private void PanelFadeOut()
        {
            _ChangeImage.enabled = true;
            //面板元件清晰
            FadeToBlack();
            if (_ChangeImage.color.a >= 0.95F)
            {
                _ChangeImage.color = Color.black;
                _ChangeImage.enabled = true;
                _PanelFadeOut = false;
            }
        }


        /// <summary>
        /// 面板逐漸透明
        /// </summary>
        private void FadeToClear()
        {
            _ChangeImage.color = Color.Lerp(_ChangeImage.color,Color.clear,colorChangeSpeed*Time.deltaTime);
        }


        /// <summary>
        /// 面板逐漸清晰
        /// </summary>
        private void FadeToBlack()
        {
            _ChangeImage.color = Color.Lerp(_ChangeImage.color, Color.black, colorChangeSpeed * Time.deltaTime);
        }

    }//class_end
}

2、使用方法