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

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

前言

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

实现方法

1.新建一个Unity工程,导入两张精灵图片,如图所示:
在这里插入图片描述
2.新建一个Image,修改名称为CircleBG,将工程中的精灵图片huan赋值给它,参数设置如图所示:
在这里插入图片描述
3.在CicleBG下新建一个Image,取名为ProgressCicle,参数设置如图所示:
在这里插入图片描述
4.继续在CircleBG下新建一个Image,取名为InnerCircle,将精灵图片yuan赋值给它,参数设置如图所示:
在这里插入图片描述
5.在CicleBG下建立一个Text,用于显示加载百分数值,调整好颜色和大小,如图所示:
在这里插入图片描述
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赋值到该脚本上,如图所示:
在这里插入图片描述
8.运行工程,效果如下所示,即实现了扇形Slider的效果:
在这里插入图片描述
9.本项目链接为:扇形Slider源码
如果不方便在csdn上下载,请私信我,我给分享源码,我这个人还是好说话的。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

波波斯维奇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值