王者荣耀加载和登录实现如此简单？

一，实现效果

1.1 效果展示

实现模拟加载进度条和登录按钮的交互功能：

---

1.2 用到知识点

1. 物体的显示隐藏控制
2. 使用Image实现进度条功能
3. 实现按钮点击动态监听逻辑

---

二，制作界面

1.2 界面设计

界面设计基本分为三个部分，分别为: 背景，进度条，按钮。

---

2.2 制作过程

1. 背景：在Hierarchy面板右键选择"UI" -> “Image” 命名为”Bg“并为其赋值一张图片作为背景。PS：一般背景的锚点都是充满画布的。
   

2. 进度条：按照1步骤操作创建创建两个Image，一作为进度条的背景，一个作为进度条，分别命名为”LoadingBg“，”LoadingImg“。
   然后修改”LoadingImg“的Image Type属性为Filled，再修改Fill Method为Horizonal。这就实现了横向的进度条填充，如下图：
   

3. 按钮：首先创建一个空物体做所有登录按钮的父物体用于控制按钮的显示隐藏，将其命名为"Login"。在”Login“下面创建两个Button分别用于qq登录和微信登录按钮。
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGK10iKa-1675514368632)(https://files.mdnice.com/user/14896/ad8804e1-c56c-43d7-9f51-46dd908276bd.png)]

至此，一个完整的加载登录界面就搭建完成了，后续还可以按需要添加Logo，文字等元素来丰富界面。接下来就到了代码实现部分了。

---

三，代码详解

3.1 物体显示隐藏

3.2 实现进度条

3.3 实现按钮监听

3.4 变量初始化

一定要记得代码中初始化的变量呀，否则运行时会报错的哦~

---

这样整个模拟加载登录的流程就完成了，怎么样是不是很简单啊。完整代码如下，需要的同学自取吧~

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

public class Loading : MonoBehaviour
{
    // 界面UI引用
    public GameObject Obj_Loading;
    public Image Img_Loading;
    
    public GameObject Obj_Login;
    public Button Btn_QQLogin;
    public Button Btn_WXLogin;

    // 初始化，挂载脚本游戏运行自动执行
    void Start()
    {
        // 按钮点击监听
        Btn_QQLogin.onClick.AddListener(OnClickQQLogin);
        Btn_WXLogin.onClick.AddListener(OnClickWeChatLogin);
        
        // 隐藏登录按钮
        ShowLoginBtn(false);
        // 开始模拟加载进度条
        StartCoroutine(LoadingProgress());
    }

    // 协程模拟加载进度
    IEnumerator LoadingProgress()
    {
        // 模拟加载进度0~100
        for (int i = 0; i <= 100; i++)
        {
            // 实现进度条的进度变化
            Img_Loading.fillAmount = i / 100f;
            // 模拟延时，0.01秒后执行下一次循环
            yield return new WaitForSeconds(0.01f);
        }
        
        // 加载完成，显示登录按钮
        ShowLoginBtn(true);
    }

    /// <summary>
    /// 显示或隐藏登录按钮
    /// 显示按钮时隐藏进度条，反之亦然
    /// </summary>
    /// <param name="isShow"></param>
    void ShowLoginBtn(bool isShow)
    {
        Obj_Loading.SetActive(!isShow);
        Obj_Login.SetActive(isShow);
    }
    
    /// <summary>
    /// QQ登录点击响应方法
    /// </summary>
    void OnClickQQLogin()
    {
        Debug.Log("todo... 点击QQ登录...");
    }
    
    /// <summary>
    /// 微信登录点击响应方法
    /// </summary>
    void OnClickWeChatLogin()
    {
        Debug.Log("todo... 点击微信登录...");
    }
}