Unity 整体界面淡入淡出效果

不在同一频道上的呆子

已于 2024-03-06 22:49:38 修改

阅读量948

点赞数 7

文章标签： unity 游戏引擎

于 2024-03-06 22:49:26 首次发布

本文链接：https://blog.csdn.net/mr_five55/article/details/136520135

版权

本文介绍了如何在Unity中使用DOTween插件控制CanvasGroup的Alpha值，通过EffectCon1脚本来实现背景、图片、文本和滑动条等组件的同步淡入淡出效果，通过按钮触发相应的淡入/淡出操作。

摘要由CSDN通过智能技术生成

在Unity中，如果我们要实现控制多个组件同时淡出，同时淡入的效果，可以使用DOTween插件实现。

如图，一个页面中带有背景，一张图片，一个文本，一个滑动条。

请添加图片描述

要实现以上界面的整体淡入淡出，可以按照以下步骤实现。

1、首先保证场景中已导入DOTween插件，然后新建一个空物体，作为以上4个组件的父物体。如下图：

请添加图片描述

2、在该父物体上，添加Canvas Group组件，如下图：

请添加图片描述

3、创建两个控制淡入淡出的按钮

请添加图片描述

4、创建控制脚本EffectCon1.cs。

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EffectCon1 : MonoBehaviour
{
    public CanvasGroup canvasGroup;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void UIin()
    {
        canvasGroup.DOFade(1, 2);  //控制界面淡入
    }

    public void UIout()
    {
        canvasGroup.DOFade(0, 2);  //控制界面淡出
    }
}

其中，UIin()方法为按钮1点击事件，控制界面淡入，UIout()方法为按钮2点击事件，控制界面淡出。以上方法通过DOFade()方法，控制Canvas Group的Alpha值，从而实现界面的淡入淡出。

5、完成：

Unity 整体界面淡入淡出效果