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

mr_five5672024-04-20 16:19

要实现一个简单的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 called once per frame
    void Update()
    {
        Vector2 targetPosition = isPanelShown ? Vector2.zero : new Vector2(-uiPanel.rect.width, 0);
        uiPanel.anchoredPosition = Vector2.Lerp(uiPanel.anchoredPosition, targetPosition, Time.deltaTime * slideSpeed);
    }

    private void ShowPanel()
    {
        isPanelShown = true;
    }

    private void HidePanel()
    {
        isPanelShown = false;
    }
}

4、运行效果：

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