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

实现方法1.新建一个Unity工程，导入两张精灵图片，如图所示： 2.新建一个Image，修改名称为CircleBG，将工程中的精灵图片huan赋值给它，参数设置如图所示： 3.在CicleBG下新建一个Image，取名为ProgressCicle，参数设置如图所示： 4.继续在CircleBG下新建一个Image，取名为InnerCircle，将精灵图片yuan赋值给它，参数设置如图所示： 5.

Unity官方开发者社区

33人浏览 · 2020-04-13 15:39:32

Unity官方开发者社区 · 2020-04-13 15:39:32 发布

实现方法

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 
     
     +
     
      
     
     "%"
     
     ;
     
     
    
     
     }
     
     

     
     }