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

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 iP开发者_开发问答hone? Any ideas/links that might be useful?

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.

A simple (and possibly not the best) thing to try (no guarantees it works) is to create an imageView and round the corners until it's circular, something like this:

    [imageView.layer setCornerRadius:60.0f];
    [imageView.layer setMasksToBounds:YES];
    [imageView.layer setBorderWidth:0.0f];

Set the initial imageView small (1px by 1px). Then use some simple animation code:

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDelay:2.0];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    // set the imageView to the size you want here
} [UIView commitAnimations];

Try this code.

Create an imageView.

UIImageView *imgv = [[UIImageView alloc]initWithFrame:
                                          CGRectMake(0, 0, 0, 0)];
imgv.image = [UIImage imageNamed:@"black.png"];

//position the imageview to the center of the screen.
 imgv.center = self.view.center;
    [self.view addSubview:imgv];
    [imgv release];

//now give the imageview a new frame of full size with an animation 

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];

//i am assuming that your full frame is 320x480
    imgv.frame = CGRectMake(0, 0, 320, 480);

[UIView commitAnimations];

Now the imageview will appear to be scaling from the center of the screen to fill it.