Animate UIView (when Drawing on UIGraphicsGetCurrentContext) - swift

Question

I created a class that draws a single-bar-chart that indicates a percent value, when one is set. How can I animate the bar, so that it grows from the left to the right?
The animate-function that I already have does not work like it want it to...
class EasyLineView : UIView {
var fillRect = CGRect.init(x: 0, y: 0, width: 0, height: 0)
var percentValue: CGFloat = 0 {
didSet {
self.layoutIfNeeded()
}
}
var orientation: BarOrientation = .vertical
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.black
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
print("drawing with \(rect.size.width)")
let r = self.bounds // the view's bounds
let ctx = UIGraphicsGetCurrentContext() // get the current context
ctx!.setFillColor(UIColor.yellow.cgColor) // set fill color to the given color if it's provided, else use clearColor
if (self.orientation == .vertical){
fillRect = CGRect.init(x: 0, y: 0, width: r.size.width, height: percentValue*r.size.height)
} else {
fillRect = CGRect.init(x: 0, y: 0, width: percentValue*r.size.width, height: r.size.height)
}
ctx!.fill(fillRect)
}
// does not work
func animate(){
UIView.animate(withDuration: 5, delay: 0, animations: {
self.layoutIfNeeded()
})
}
}

Answer 1

Don't do it like that. Drawing a box in draw(_:) will give you poor performance and no flexibility for animations.
If all you want is an animatable box whose size you can configure, add a subview and set the background colour to your drawing colour. Then you can use autolayout or manual frame setting, in an animation block, to make the box animate to the size you want.