Unity 左右折叠显示与隐藏UI的简单实现

最新推荐文章于 2025-10-26 12:08:23 发布

原创

最新推荐文章于 2025-10-26 12:08:23 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#unity #ui #游戏引擎

本文详细描述了如何使用Unity中的Image组件、Mask和RectTransform实现UI的左右滑动折叠功能，通过按钮控制面板的显示和隐藏，以及关键的脚本编写过程。

要实现一个简单的UI左右折叠显示与隐藏，可以结合遮罩，通过代码控制UI区块的宽度和位移来实现。

具体可以按以下步骤实现：

1、新建一个Image组件，并添加精灵，调整大小后，复制一份作为该UI的父物体，然后在该父物体上添加Mask组件，并勾掉Show Mask Graphic选项，如图：

请添加图片描述

2、新建两个控制按钮，如下图：

请添加图片描述

3、编写控制脚本：

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

public class SlideInOutUI : MonoBehaviour
{
    public RectTransform uiPanel;
    public Button showButton;
    public Button hideButton;
    public float slideSpeed = 5f;
    private bool isPanelShown = true;

    // Start is called before the first frame update
    void Start()
    {
        showButton.onClick.AddListener(ShowPanel);
        hideButton.onClick.AddListener(HidePanel);
    }

    // Update is call