Circle Fill At 80 %

Question

I am creating the circle fill animation but my circle fill at 80 %, at 50 % it is not at half, is there any way it can be corrected because I am confused

class FillCircleAnimatedView : UIView {

    private let shapeLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)

        setUpLayer()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setUpLayer() {

        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.lineWidth = frame.width

        let startAngle = (-1 * CGFloat.pi) / 2
        let endAngle = 2 * CGFloat.pi


        shapeLayer.path = UIBezierPath(arcCenter: center, radius: frame.width / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true).cgPath

        shapeLayer.strokeEnd = 0

        layer.addSublayer(shapeLayer)
    }

    func fillCircle(with progress: CGFloat) {

        shapeLayer.strokeEnd = progress
    }

}

at 50%

at 80%

user_5133585 · Answer

It shows a circle like this because your path only goes from -π/2 to 2π. Subtracting these two values gives 5π/2, which means your path is more than a full circle. At 50%, the interior angle is 225 degrees/1.25π. Your whole path is 90 degrees more than a full circle.

You have set the start and end values wrongly.

Refer to this image:

You should start at -π/2 like you did, but end at 3π/2. Subtracting these two should result in a full circle - 2π

Circle Fill At 80 %

1 Answers