Unity 左右折叠显示与隐藏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 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的简单实现

相关推荐
1uther5 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
死也不注释8 小时前
【Unity UGUI 交互组件——Slider(7)】
unity·游戏引擎·交互
程序猿多布13 小时前
XLua教程之热补丁技术
unity·c#·lua·xlua
眠りたいです14 小时前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
SmalBox16 小时前
【光照】Unity中的[光照模型]概念辨析
unity·渲染
挂科是不可能出现的16 小时前
unity导入blender动画
unity·游戏引擎·blender
派葛穆17 小时前
Unity-按钮实现场景跳转
java·unity·游戏引擎
程序猿多布20 小时前
XLua教程之Lua调用C#
unity·c#·lua·xlua
lrh30251 天前
Custom SRP - Point and Spot Lights
unity·srp·render pipeline
绀目澄清1 天前
unity UGUI 鼠标画线
unity·计算机外设·游戏引擎