Unity实现扇形Slider进度条加载功能

Unity实现扇形Slider进度条加载功能

前言

在实际的开发项目中,再跳转场景的时候可以加一个进度条显示的功能,这样在跳转场景的时候就不会显得很突兀。在进度条的实现方式中,有很多的方式,例如Unity自带的Slider,扇形Slider,也可以使用插件进行开发。这篇博客介绍一种很简单实现的一种扇形进度条加载功能的实现方法。

实现方法

1.新建一个Unity工程,导入两张精灵图片,如图所示:
Unity实现扇形Slider进度条加载功能_第1张图片
2.新建一个Image,修改名称为CircleBG,将工程中的精灵图片huan赋值给它,参数设置如图所示:
Unity实现扇形Slider进度条加载功能_第2张图片
3.在CicleBG下新建一个Image,取名为ProgressCicle,参数设置如图所示:
Unity实现扇形Slider进度条加载功能_第3张图片
4.继续在CircleBG下新建一个Image,取名为InnerCircle,将精灵图片yuan赋值给它,参数设置如图所示:
Unity实现扇形Slider进度条加载功能_第4张图片
5.在CicleBG下建立一个Text,用于显示加载百分数值,调整好颜色和大小,如图所示:
Unity实现扇形Slider进度条加载功能_第5张图片
6.在工程下新建CircularProgress.cs脚本,用于控制加载变化,代码如下所示:

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

public class CircularProgress : MonoBehaviour
{
    //图形填充当前进度的平滑速度
    [SerializeField]
    private float smoothSpeed = 0.5f;
    //获取进度图片与精度Text
    public Image progressCircle;
    public Text text;
    //设置目标进度与当前进度
    private float targetProgress;
    private float currentProgress;

	// Use this for initialization
	void Start ()
    {
        targetProgress = 100.0f;
	}
	
	// Update is called once per frame
	void Update ()
    {
        ToChange();
	}

    void ToChange()
    {
        //当前进度小于目标进度时进入分支
        if (currentProgress < targetProgress)
        {
            //当前进度条进度增加
            currentProgress += smoothSpeed;
            //进度等于大于进度值进入分支
            if (currentProgress >= targetProgress)
            {
                currentProgress = 100.0f;
            }
            //更新填充圆形进度与文本显示进度
            progressCircle.fillAmount = currentProgress / 100;
            text.text = (int)currentProgress + "%";
        }
    }

7.将该脚本挂载到CircleBG上,并将ProgressCirlcle及Text赋值到该脚本上,如图所示:
Unity实现扇形Slider进度条加载功能_第6张图片
8.运行工程,效果如下所示,即实现了扇形Slider的效果:
Unity实现扇形Slider进度条加载功能_第7张图片
9.本项目链接为:扇形Slider源码
如果不方便在csdn上下载,请私信我,我给分享源码,我这个人还是好说话的。

你可能感兴趣的:(Unity的UI)