Animation of drawing does not work in Swift - ios

Question

Screenshot
I have created a custom UIButton class where I'm filling its inside with a color but only partially.
The Goal:
The goal is to fill inside of the button with background color but only partially. For example you have a long button(height: 50.0, width: 300.0). I want to fill it with background color horizontally, let's say only for 50%. In this case only the half of my button will be filled with color, another half will stay transparent or white.
The entire class looks like this:
class CustomButton: UIButton {
var color: UIColor = .clear
var percentage: CGFloat = 0
func fill(withPercentage percentage: CGFloat, isCorrect correct: Bool, onRect rect: CGRect) {
self.color = correct ? .lightishGreen : .pastelRed
self.percentage = percentage
draw(rect)
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let fillRect = CGRect(
origin: CGPoint(x: rect.origin.x, y: rect.origin.y),
size: CGSize(width: rect.size.width * percentage, height: rect.size.height)
)
color.set()
guard let context = UIGraphicsGetCurrentContext() else { return }
context.fill(fillRect)
}
}
and this class works perfectly. However, I want to animate this drawing process, so the button is getting filled with background color from 0.0 to 1.0 let's say.
I've tried to put context.fill(fillRect) inside of the UIView.animate(){} but it did not work. So I wondered, is it possible to animate drawing?
I just do not want to make button bg color clear and to put UIView behind it and simulate filling there. Wanted a clean way. So I will be happy, if someone can give me a hint or show me how to do it.
Thanks in advance!

Answer 1

It sounds to me like you want a custom animatable property. Let's call it percentage. Here's one way:
class MyView : UIView {
required init?(coder: NSCoder) {
super.init(coder: coder)
self.backgroundColor = .clear
}
override class var layerClass : AnyClass {
return MyLayer.self
}
override func draw(_ rect: CGRect) {}
}
class MyLayer : CALayer {
#NSManaged var percentage : CGFloat
override class func needsDisplay(forKey key: String) -> Bool {
if key == #keyPath(percentage) {
return true
}
return super.needsDisplay(forKey:key)
}
override func action(forKey key: String) -> CAAction? {
if key == #keyPath(percentage) {
let ba = CABasicAnimation(keyPath: key)
ba.fromValue = self.presentation()!.value(forKey:key)
return ba
}
return super.action(forKey:key)
}
override func draw(in con: CGContext) {
con.setFillColor(UIColor.green.cgColor)
let rect = self.bounds.insetBy(dx: 2, dy: 2)
let rounded = UIBezierPath.init(roundedRect: rect, cornerRadius: 20)
con.addPath(rounded.cgPath)
con.setStrokeColor(UIColor.lightGray.cgColor)
con.strokePath()
con.addPath(rounded.cgPath)
con.clip(using: .evenOdd)
let fillRect = CGRect(
origin: CGPoint(x: rect.origin.x, y: rect.origin.y),
size: CGSize(width: rect.size.width * percentage, height: rect.size.height)
)
con.fill(fillRect)
}
}
The result is that when you set this view's layer's percentage, the change is animated: