The effect

implementation

The default starting point is at the top, after using three identical rings to set the corresponding length, and then rotating according to the center point.

The Settings of the ring progress bar are shown below. Change the Image Type to Filled. You can try other parameters by yourself.

Now you just need to control the image’s fillAmount property to set the effect of the progress. (fillAmount property value 0-1)

    -- Test data
    local test_type = {
        [1] = 0.5[2] = 0.25[3] = 0.25,}local jianxi = 0.008 -- The size of the gap between two
    -- Fan display Settings
    local start = 0 -- Percentage of rotation
    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))
        The icon on each hoop bar should always be in the positive direction and in the middle of the progress
        if test_type[i] - jianxi <= 0 then
            self.view["image_RangIcon"..i]:SetActive(false)
        else
            This is a layer of GameObject that adds half of its own selection to the rotation of the circle above, so that the icon position is in the middle of its circle
            self.view["image_RangIcon"..i].transform.parent.localRotation = CS.UnityEngine.Quaternion.Euler(CS.UnityEngine.Vector3.forward  * ((-start-test_type[i]/2) *360))
            -- Rotate the negative Angle to correct the direction of 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
Copy the code

Ring progress bar reference: Link