I have made a circle progress view that looks like this:
This is the current code for the CAShapeLayer
:
import UIKit
class CircularProgressView: UIView {
fileprivate var progressLayer = CAShapeLayer()
fileprivate var trackLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
createCircularPath()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
createCircularPath()
}
var progressColor = UIColor.white {
didSet {
progressLayer.strokeColor = progressColor.cgColor
}
}
var trackColor = UIColor.white {
didSet {
trackLayer.strokeColor = trackColor.cgColor
}
}
fileprivate func createCircularPath() {
self.backgroundColor = UIColor.clear
self.layer.cornerRadius = self.frame.size.width/2
let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2), radius: (frame.size.width - 1.5)/2, startAngle: CGFloat(-0.5 * .pi), endAngle: CGFloat(1.5 * .pi), clockwise: true)
trackLayer.path = circlePath.cgPath
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.strokeColor = trackColor.cgColor
trackLayer.lineWidth = 10.0
trackLayer.strokeEnd = 1.0
layer.addSublayer(trackLayer)
progressLayer.path = circlePath.cgPath
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = progressColor.cgColor
progressLayer.lineWidth = 10.0
progressLayer.strokeEnd = 0.0
layer.addSublayer(progressLayer)
}
func setProgressWithAnimation(duration: TimeInterval, value: Float) {
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = duration
animation.fromValue = 0
animation.toValue = value
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
progressLayer.strokeEnd = CGFloat(value)
progressLayer.add(animation, forKey: "animateprogress")
}
}
I tried adding an animation extension like this:
extension CAShapeLayer {
enum GlowEffect: Float {
case small = 0.4, normal = 2, big = 15
}
func doGlowAnimation(withColor color: UIColor, withEffect effect: GlowEffect = .normal) {
self.masksToBounds = false
self.shadowColor = color.cgColor
self.shadowRadius = 0
self.shadowOpacity = 1
self.shadowOffset = .zero
let glowAnimation = CABasicAnimation(keyPath: "shadowRadius")
glowAnimation.fromValue = 0
glowAnimation.toValue = effect.rawValue
glowAnimation.beginTime = CACurrentMediaTime()+0.3
glowAnimation.duration = CFTimeInterval(0.3)
glowAnimation.fillMode = .removed
glowAnimation.autoreverses = true
glowAnimation.isRemovedOnCompletion = true
self.add(glowAnimation, forKey: "shadowGlowingAnimation")
}
}
And use it like this:
progressLayer.doGlowAnimation(withColor: UIColor.systemBlue, withEffect: CAShapeLayer.GlowEffect.normal)
But nothing changes. There is no glowing effect on the green CAShapeLayer
. What am I doing wrong?