I’ve a rounded rectangular progress bar by way of a UIBezierPath
and CAShapeLayer
. The progress stroke animated at present attracts 360 levels clockwise starting from prime middle.
My present setup has the stroke beginning at 315 levels, however ends at prime middle, and am admittedly misplaced. My aim is to begin/finish the stroke at 315 levels. Any steerage could be appreciated!
class ProgressBarView: UIView {
let progressLayer = CAShapeLayer()
let cornerRadius: CGFloat = 20
override init(body: CGRect) {
tremendous.init(body: body)
setupProgressLayer()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupProgressLayer()
}
non-public func setupProgressLayer() {
progressLayer.lineWidth = 6
progressLayer.fillColor = nil
progressLayer.strokeColor = Constants.fashion.offWhite.cgColor
progressLayer.strokeStart = 135 / 360
progressLayer.lineCap = .spherical
let lineWidth: CGFloat = 6
let radius = bounds.peak / 2 - lineWidth / 2
let progressPath = UIBezierPath()
progressPath.transfer(to: CGPoint(x: lineWidth / 2 + cornerRadius, y: lineWidth / 2))
progressPath.addLine(to: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: lineWidth / 2))
progressPath.addArc(withCenter: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: lineWidth / 2 + cornerRadius), radius: cornerRadius, startAngle: -CGFloat.pi / 2, endAngle: 0, clockwise: true)
progressPath.addLine(to: CGPoint(x: bounds.width - lineWidth / 2, y: bounds.peak - lineWidth / 2 - cornerRadius))
progressPath.addArc(withCenter: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: bounds.peak - lineWidth / 2 - cornerRadius), radius: cornerRadius, startAngle: 0, endAngle: CGFloat.pi / 2, clockwise: true)
progressPath.addLine(to: CGPoint(x: lineWidth / 2 + cornerRadius, y: bounds.peak - lineWidth / 2))
progressPath.addArc(withCenter: CGPoint(x: lineWidth / 2 + cornerRadius, y: bounds.peak - lineWidth / 2 - cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi, clockwise: true)
progressPath.addLine(to: CGPoint(x: lineWidth / 2, y: lineWidth / 2 + cornerRadius))
progressPath.addArc(withCenter: CGPoint(x: lineWidth / 2 + cornerRadius, y: lineWidth / 2 + cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi, endAngle: -CGFloat.pi / 2, clockwise: true)
progressPath.shut()
progressLayer.path = progressPath.cgPath
layer.addSublayer(progressLayer)
}
func setProgress(_ progress: CGFloat) {
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = progressLayer.strokeStart
animation.toValue = progress
animation.period = 1
progressLayer.add(animation, forKey: "progressAnimation")
progressLayer.strokeEnd = progress
}
}