There are several S.O. questions out there about CA Shape Layers not successfully animating, and I've looked through them but I can't figure out what my error is (although I think it's a basic misunderstanding of how to use CA Layers.
I'm trying to draw 3 circles on the screen, and fill them up when a method is called.
In a custom UIView, inside my setup, I have the following code:
class ProgressBar: UIView {
private var bubbles: [CAShapeLayer] = [CAShapeLayer(), CAShapeLayer(), CAShapeLayer()]
private var positions: [CGFloat] = [0.25, 0.50, 0.75]
private var mainRect = CAShapeLayer()
private var progRect = CAShapeLayer()
func setup() {
self.isOpaque = false
self.backgroundColor = UIColor.clear
// initialize the main rectangle
mainRect.fillColor = secondary.cgColor
mainRect.strokeColor = primary.cgColor
self.layer.addSublayer(mainRect)
// initialize the "progress" part
progRect.fillColor = primary.cgColor
progRect.strokeColor = secondary.cgColor
self.layer.addSublayer(progRect)
// initialize the bubbles
for i in 0...2 {
bubbles[i].fillColor = (CGFloat(progress) < positions[i]) ? secondary.cgColor : primary.cgColor
bubbles[i].strokeColor = (CGFloat(progress) < positions[i]) ? primary.cgColor : secondary.cgColor
self.layer.addSublayer(bubbles[i])
}
}
And then, when the layout changes, I just modify the cgPath for each layer in layoutSubviews.
When I try to animate, I call this method on the custom UIView:
func fillCircle() {
let newFill: CABasicAnimation = CABasicAnimation(keyPath: "fillColor")
newFill.fromValue = secondary
newFill.toValue = primary
newFill.duration = 2
bubbles[0].add(newFill, forKey: "fillColor")
}
Can anyone point me to what might be going wrong?
