unity-xlua 圆形进度条+扇形组合

效果

实现

默认的起始点是在最上方，使用了三个相同的圆环来设置对应的长度之后，然后根据中心点进行旋转。

圆环进度条的设置如下图，Image Type改为Filled，其他的参数可以自己随便试试。

现在只需要控制图片的fillAmount属性就可以设置进度的效果。(fillAmount属性的值0-1)

    --测试数据
    local test_type = {
        [1] = 0.5,
        [2] = 0.25,
        [3] = 0.25,
    }
    local jianxi = 0.008 --两个之间的间隙大小
    --扇形显示设置
    local start = 0 --旋转的百分比
    for i=1,3 do
        self.view["image_Rang"..i].fillAmount = test_type[i] - jianxi
        self.view["image_Rang"..i].transform.localRotation = CS.UnityEngine.Quaternion.Euler(CS.UnityEngine.Vector3.forward  * (-start*360))
        --每个圆环进度条上的icon需要始终正方向并在进度的中间
        if test_type[i] - jianxi <= 0 then
            self.view["image_RangIcon"..i]:SetActive(false)
        else
            --这里套了一层gameobject在上面环形旋转的基础上增加了一半自身的选中，让icon的位置在自己环形的中间
            self.view["image_RangIcon"..i].transform.parent.localRotation = CS.UnityEngine.Quaternion.Euler(CS.UnityEngine.Vector3.forward  * ((-start-test_type[i]/2)*360))
            --旋转 负角度 摆正icon的方向
            self.view["image_RangIcon"..i].transform.localRotation = CS.UnityEngine.Quaternion.Euler(CS.UnityEngine.Vector3.forward  * -((-start-test_type[i]/2)*360))
        end
        start = start + test_type[i]
    end