首先,加载中 显示加载动画和正在加载,
加载完成 隐藏,加载失败 则显示重新加载按钮和 加载失败的文字。
image.png
要解决自适应的问题
loading根的设置
在loadingview中的设置
image.png
文本本身需要加上content size filter约束,否则无法自适应
image.png实际效果 加载中
image.png加载失败
image.png加载失败 设设置了个点击事件,这个点击事件对外公开,
public void onClickReadLoading()
{
onClickReLoad?.Invoke();
}
image.png
最后的实现原理就是旋转image,根据状态判断是否处于旋转中。
设置不同的状态 显示不同的gameobject.以及设置文本。
using System;
using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;
public class LoadingManager : Singleton<LoadingManager>
{
// Start is called before the first frame update
[HideInInspector]
public float rotateSpeed = 300;
public Action onClickReLoad { get; set; }
public GameObject loadingImage;
public GameObject loadingBtnAndTextParent;
private Button btn;
TextMeshProUGUI mText;
public enum LoadingStatus
{
Loading, LoadingFail, LoadingSucc
}
LoadingStatus loadingStatus = LoadingStatus.Loading;
public void setState(LoadingStatus loadingStatus, String message = "正在加载")
{
this.loadingStatus = loadingStatus;
if (this.loadingStatus == LoadingStatus.LoadingSucc)
{
this.gameObject.SetActive(false);
}
else
{
this.loadingBtnAndTextParent.gameObject.SetActive(true);
this.gameObject.SetActive(true);
if (this.loadingStatus == LoadingStatus.LoadingFail)
{
btn.gameObject.SetActive(true);
this.loadingImage.SetActive(false);
}
else
{
btn.gameObject.SetActive(false);
this.loadingImage.SetActive(true);
}
mText.text = message;
}
}
void Start()
{
//被查找的button必须先设置显示,否则 这里找不到
btn = this.loadingBtnAndTextParent.GetComponentInChildren<Button>();
mText = this.loadingBtnAndTextParent.GetComponentInChildren<TextMeshProUGUI>();
setState(LoadingStatus.Loading);
}
public void onClickReadLoading()
{
onClickReLoad?.Invoke();
}
private void OnDestroy()
{
/* if (btn != null)
{
btn.onClick.RemoveListener(onClickReadLoading);
}*/
}
// Update is called once per frame
void Update()
{
if (this.loadingStatus == LoadingManager.LoadingStatus.Loading)
{
this.loadingImage.transform.Rotate(-Vector3.forward * rotateSpeed * Time.deltaTime);
}
}
}
实际逻辑
image.png
网友评论