iPhone - is it possible to create an animation displaying an image from the centre outwards?

Question

I have seen quite a few tutorials on how to fade images in and out on the iPhone simply by changing their alpha values (for example here).

Thats ok, however I am trying to achieve something slightly different; instead of the whole image fading in/out, I would the image to be animated so that over time it is displayed from the centre of the image to the edge (and vice versa).

So at the start of the animation I would like the image to not be displayed on the screen and then over the duration of the animation starting from the centre bit by bit the image is displayed until we reach the end and the whole image is displayed on screen.

I cant find anything along those lines, does anyone know if that would be possible on the iPhone? Any ideas/links that might be useful?

Answer 1

It should be easy enough to achieve — create a UIImageView holding the thing, set contentMode to UIViewContentModeCenter, then use a CoreAnimation block to animate a change in the frame from being of zero width/height and centred to being the full area you want to cover.

E.g.

/* coming into here, imageView is a suitable UIImageView,
   frameToFill is a CGRect describing the area the image
   view should cover when fully unfurled */

// set up image view: content mode is centre so that the current
// frame doesn't affect image sizing, and we'll be keeping the same
// centre throughout so it won't move. The initial frame is on the
// centre and of zero size. The view contents are clipped to the view's
// bounds so that the changing frame does actually cut off the image
imageView.contentMode = UIViewContentModeCenter;
imageView.frame = CGRectMake(frameToFill.origin.x + frameToFill.size.width*0.5f,
                             frameToFill.origin.y + frameToFill.size.height*0.5f,
                             0.0f, 0.0f);
imageView.clipsToBounds = YES;

// set up an animation block, lasting 3 seconds, in which the
// only thing animated is the view's frame, expanding back out
// to the original
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3.0f];
    imageView.frame = frameToFill;
[UIView commitAnimations];

The edge of your view will be hard and rectangular. If you want anything more subtle, you're probably not going to be able to achieve it with CoreAnimation; dropping down to the CoreGraphics level is probably the order of the day.