Smooth scaling of vector graphics in UIView

Question

So I have subclassed UIView and added some drawing code. I am scaling the resulting view up and down. I would like this view to be resolution independent so that it is legible at any size, and I won't need to manage multiple images etc. etc.

As a test I made up a bit of drawing code that looks like this. It creates concentric ovals that fit within whatever frame size the UIView has. Actually the outside ring is a little smaller than the frame so it isn't clipped. Fine for this. The actual graphic will be more complex and will contain text which must be readable at small sizes and things of that nature.

- (void)drawRect:(CGRect)rect
{
    UIColor* color = [UIColor colorWithRed: 0.833 green: 0.833 blue: 0.833 alpha: 1];

    float width = self.bounds.size.width;
    float height = self.bounds.size.height;
    float scalePercent = 0.8;

    for(int i = 0; i < 10; i++){

        width  = width * scalePercent;
        height = height * scalePercent;

        float x = (self.bounds.size.width - width) / 2;
        float y = (self.bounds.size.height - height) / 2;

        UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(x, y, width, height)];
        [color setStroke];
        ovalPath.lineWidth = 2;
        [ovalPath stroke];
    }
}

Now here's the scaling:

- (void) makeBig{

    [UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionBeginFromCurrentState
                     animations:(void (^)(void)) ^{
                         self.transform = CGAffineTransformMakeScale(2, 2);
                     }
                     completion:^(BOOL finished){
                     }];
}

When you run this the view zooms up, but it is pixelated. It's pixelated because the view has doubled in size but it's resolution has not changed.

So, here's how not to do it.

- (void) makeBig{

    [UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionBeginFromCurrentState
                     animations:(void (^)(void)) ^{
                         self.transform = CGAffineTransformMakeScale(2, 2);
                     }
                     completion:^(BOOL finished){
                         CGRect targetFrame = self.frame;
                         self.transform = CGAffineTransformIdentity;
                         self.frame = targetFrame;
                         [self setNeedsDisplay];
                     }];
}

This works, but the fix is visible at the end of the animation when the resolution snaps back to screen resolution. I could try pre-scaling the view up and pre-drawing at the final size then scaling it down and then running the animation to scale it back up again, but for various reasons that I can think of that sounds totally stupid. I suppose I could be wrong and it's the brightest idea since fire. I kind of doubt it though.

So how is a smooth scale of vector content done best?

Answer 1

View-based animation is really handy, but if I'm not mistaken it uses CABasicAnimation, which only uses a single keyframe. It'll be a little more code, but if you use a CAKeyframeAnimation instead, Core Animation will redraw the contents of the animated layer for each keyframe (you get to specify when those occur), so you can avoid the appearance of pixelation.