【Unity】 丝滑的可控制阶段性Progress Bar + 分数显示 + 星级评定

应用场景：

类似三消中关卡结束时结算的画面，黄色的是星级 分数达到星星位置，星星变红

思路：

首先需要一个浮点型数组SplitScore[]，储存分数条各个阶段的增加数值大小，也就是各项得分，比如剩余时间得分0.2，A项得分0.3，B项得分0.4，那么最终效果就是分数条丝滑运动到0.2 停一下继续运动，运动到0.5停一下……；还需要一个PreScore，代表当前正在增加的这一阶段的截至分数，也就是逐一访问刚才数组的元素。

其次，虽然progressbar只能接受0-1的取值，但是显示的分数应该是较大的数以提升玩家获得感，所以还需要一个用于text显示的浮点数，我叫做HugeScore

最后，三个星星分别需要三个浮点数我叫做StarPos，代表它们在进度条的显示位置（可以手动调节，但是会很麻烦，也不太准确），以及进度条的值（0-1）到哪里时它们该变色。

代码：

分数条的阶段性增加

写在Update里

slider.value += Time.deltaTime * Speed;//分数条增加
            if(slider.value - lastValue >= PreFurScore)//增加区间到达当前家具得分值
            {
                LittleStop();
                lastValue = slider.value;
                PreFurScore = NextScore();
            }

两个阶段之间的暂停是简单粗暴的全局暂停，还可以优化

void LittleStop()
	{
		System.Threading.Thread.Sleep(StopTime);
	}

text中的虚假分数显示 也在Update里

HugeScore = slider.value * Total;
            text.text = (int)HugeScore + "分";//实时改变分数文字

三个星星的位置安排

注意星星是Image，所以要RectTransform组件

星星初始位置必须都在进度条的最左侧，这样才能移动到指定的位置，也就是向右移动的距离为：StarPos*进度条的长度

Start{
        slider.GetComponent<RectTransform>().GetWorldCorners(corners);
        //获取Slider四个角的三维坐标，出来的坐标的顺序是左下、左上、右上、右下
        float length = corners[3].x - corners[0].x;


        //改变三个星星的位置到设定的位置
        Star1.GetComponent<RectTransform>().anchoredPosition3D += new Vector3 (length * Star1Pos,0f,0f);
        Star2.GetComponent<RectTransform>().anchoredPosition3D += new Vector3 (length * Star2Pos,0f,0f);
        Star3.GetComponent<RectTransform>().anchoredPosition3D += new Vector3 (length * Star3Pos,0f,0f);
    }

三个星星的变色判定

在Update里

//星级判定
            if(slider.value >= Star1Pos)
            {
                Star1.GetComponent<Image>().color = Color.red;
                money = 600;
                if(slider.value >= Star2Pos)
                {
                    Star2.GetComponent<Image>().color = Color.red;
                    money = 1000;
                    if(slider.value >= Star3Pos)
                    {
                        Star3.GetComponent<Image>().color = Color.red;
                        money = 1500;
                    }
                }
            }
            

最终效果