Question

I have a simple custom UIView (a rectangle) that is implemented with drawRect.

The view is drawn from two values; currentValue and maxValue

From drawRect:

The height of the rect represents how much currentValue is of maxValue:

if(currentValue > maxValue)
    currentValue = maxValue;

float scale = currentValue/maxValue;

//Draw the rect
CGContextBeginPath(context);
CGContextMoveToPoint(context, self.bounds.origin.x, self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height-(self.bounds.size.height*scale));
CGContextAddLineToPoint(context, self.bounds.origin.x, self.bounds.size.height-(self.bounds.size.height*scale));
CGContextClosePath(context);

CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillPath(context);
CGContextStrokePath(context);

I’ve setup a ViewController with a UISlider that changes the currentValue and each time it’s changed setNeedsDisplay gets called. This part works just fine. The rect changes height when the slider is used, exactly as planned.

My question is.. I would like this transition between heights to be animated. What’s the best way to do it?

Thanks

Answer 1

Instead of having UIView with custom drawing your can add CAShapeLayer object to your view’s layer. CAShapeLayer class allows to specify path to draw and draw attributes – and also changes for those properties are easily animatable.

If your view is just a rect filled with solid color as in question your second option is either adjust view’s frame or set appropriate affine transform to get required heights – both those properties are also easily animatable using animation methods in UIView class.