[Unity3D] UGUI images to achieve a progress bar animation

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/q764424567/article/details/100159955

I. Introduction

Share pictures today UGUI achieve a progress bar animation methods with asynchronous loading of resources, it can be used as a loading animation scene

Here's a look at the results:

Second, Download

Image Resources:

Project Resources:
https://download.csdn.net/download/q764424567/11644403

Third, Tutorials

1, first set interface


2, set the Image property

mainly to control the Fill Amount, to achieve progress advancing progress bar

3, write code Loading.cs

using UnityEngine;
using UnityEngine.UI;

public class Loading : MonoBehaviour
{
	//进度条 image
    public Image m_Image;
    //显示的进度文字 100%
    public Text m_Text;
    //控制进度
    float m_CurProgressValue = 0;
    float m_ProgressValue = 100;

    void Update()
    {
        if (m_CurProgressValue < m_ProgressValue)
        {
            m_CurProgressValue++;
        }
        //实时更新进度百分比的文本显示 
        m_Text.text = m_CurProgressValue + "%";
        //实时更新滑动进度图片的fillAmount值  
        m_Image.GetComponent<Image>().fillAmount = m_CurProgressValue / 100f;
        if (m_CurProgressValue == 100)
        {
            m_Text.text = "OK";
            //这一块可以写上场景加载的脚本
        }
    }
}

4, dragged into the slot

OK, press Play, to look at the effect of it