要实现一个简单的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的简单实现