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

最新推荐文章于 2025-12-05 16:30:38 发布

原创最新推荐文章于 2025-12-05 16:30:38 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#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
     ;
     

     }