Search code examples
iosswiftanimationprogress

Animating circular progress View in Swift


I want to have an animation for my circular progressView with the code below. I want the animation start the progress from 0 to the value I want. But I can never get the animation work.

func Popular(){
let circle = Pop;//Pop is a UIView

circle.bounds = CGRect(x: 0,y: 0, width: 100, height: 100);
circle.frame = CGRectMake(0,0, 100, 100);

circle.layoutIfNeeded()

var progressCircle = CAShapeLayer();

let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2);
let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83;

let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true    );

progressCircle = CAShapeLayer ();
progressCircle.path = circlePath.CGPath;
progressCircle.strokeColor = UIColor.greenColor().CGColor;
progressCircle.fillColor = UIColor.clearColor().CGColor;

    UIView.animateWithDuration(3.0,
        delay: 1.0,
        options: [],
        animations: {
            progressCircle.lineWidth = 5.0;
            progressCircle.strokeStart = 0;
            progressCircle.strokeEnd = 0.20;

            circle.layer.addSublayer(progressCircle);

            circle

            progressCircle.strokeEnd = 0.2;

        },
        completion: { finished in
            print("Picutre done")


    })


}

Solution

  • Use CABasicAnimation

        let circle = Pop
    
        var progressCircle = CAShapeLayer()
    
        let circlePath = UIBezierPath(ovalInRect: circle.bounds)
    
        progressCircle = CAShapeLayer ()
        progressCircle.path = circlePath.CGPath
        progressCircle.strokeColor = UIColor.greenColor().CGColor
        progressCircle.fillColor = UIColor.clearColor().CGColor
        progressCircle.lineWidth = 5.0
    
        circle.layer.addSublayer(progressCircle)
    
    
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 0.2
        animation.duration = 3
        animation.fillMode = kCAFillModeForwards
        animation.removedOnCompletion = false
    
        progressCircle.addAnimation(animation, forKey: "ani")