要实现一个简单的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 updatevoid Start(){showButton.onClick.AddListener(ShowPanel);hideButton.onClick.AddListener(HidePanel);}// Update is called once per framevoid 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的简单实现