Sync a stroke fill animation based on a UIProgressView status?

Question

Currently we have a circular progress bar that is working properly, for testing purposes it is activated by a tap gesture.

 func createCircleShapeLayer() {
    let center = view.center
    if UIDevice.current.userInterfaceIdiom == .pad {
        let circlePath = UIBezierPath(arcCenter: center, radius: 150, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
        circleShapeLayer.path = circlePath.cgPath
    } else {
        let circlePath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
        circleShapeLayer.path = circlePath.cgPath
    }
    circleShapeLayer.strokeColor = UIColor.green.cgColor
    circleShapeLayer.lineWidth = 20
    circleShapeLayer.fillColor = UIColor.clear.cgColor
    circleShapeLayer.lineCap = CAShapeLayerLineCap.round
    circleShapeLayer.strokeEnd = 0
    view.layer.addSublayer(circleShapeLayer)

    //tap gesture used for animation testing
    view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(anitmateCirleProgress)))
}

@objc func anitmateCirleProgress() {
    let strokeAnimation = CABasicAnimation(keyPath: strokeEnd)
    strokeAnimation.toValue = 1
    strokeAnimation.duration = 2
    strokeAnimation.fillMode = .forwards
    strokeAnimation.isRemovedOnCompletion = false
    circleShapeLayer.add(strokeAnimation, forKey: "strokeAnimation")
}

The issue is that the progress bar has to be able to fill based on the status of a UIProgressView: ex.

totalProgressView.setProgress(45, animated: true)

Is there a way to sync the animation stroke based on the progress of the UIProgressView?

score 0 · Answer 1 · answered May 02 '19 at 20:22

I thought a UIProgressView took a progress value from 0 to 1? If so, your sample code that sets the progress view to 45 doesn't make sense.

UIProgressView and a shape layer's strokeEnd both use values from 0 to 1, so you should be able to just set both the progress view and your custom shape layer's strokeEnd to the same fractional value and get them both to show the same amount of completion.

Sync a stroke fill animation based on a UIProgressView status?

1 Answers1