I’ve a rounded rectangular progress bar through a UIBezierPath
and CAShapeLayer
. The progress stroke animated at present attracts 360 levels clockwise starting from high middle.
My present setup has the stroke beginning at 315 levels, however ends at high middle, and am admittedly misplaced. My objective is to begin/finish the stroke at 315 levels. Any steering can 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()
}
personal func setupProgressLayer() {
progressLayer.lineWidth = 6
progressLayer.fillColor = nil
progressLayer.strokeColor = Constants.type.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.length = 1
progressLayer.add(animation, forKey: "progressAnimation")
progressLayer.strokeEnd = progress
}
}