animating the re-positioning of an image in an UIImageView

[cybohemia]

I am trying to display an image in an UIImageView where the UIImageView only takes up half of the iPhone screen and shows just part of the image (which is full screen sized), but after the user presses a button, the UIImageView animates and expands to the full screen and the image re-positions to show its entire content, properly centered (it was off-centered when shown partially).

I've tried using drawInRect which solved me the first part of my problem (showing just a part of the image) but, I don't know how to animate the image movement within the UIImageView when it animates to take up the full screen.

I can get the UIImageView to animate from half-screen to full-screen but when I try to re-position of the image inside the animation block it just pops over to the new position rather than animate over.

Would anyone have any idea as to how one should go about such a task?

Thanks!

[Panther]

I think this achieves what you're describing.

    //Setup
    imageView.image = myImage;
    imageView.frame = halfTheScreen;
    imageView.clipsToBounds = YES;
    imageView.contentMode = UIViewContentModeTop;
    
    //To animate
    [UIView animateWithDuration:duration animations:^{
        imageView.frame = entireScreen;
    }];

[cybohemia]

Thanks for the suggestion, Panther! One thing that I didn't think would be a factor but I can't seem to get to work with your approach is to have the half image show a portion of the image that is offset from the top. That is, I don't want to show the top half of the image but a middle section (the 2nd quarter and 3rd quarter of the image):



The left image is how things start - only half of the full image is shown, the half being the middle section of the image. I then want to animate to the full image with the half originally show sliding into its proper position in the middle of the image.

The only way I worked out how to show the middle section on the top of the screen is to use drawRect but it pops instantly to its final position - rather than smoothly animating there - when I try to animate into a full screen display of the full image.

When I fiddle with the numbers in your approach, the final image is aways offset by the amount the image is originally offset by (although I want to set the offset to 0 when the full image is shown).

Are there ways to offset the image and then un-doing the offset with your appoach?

Thanks!

Originally Posted by Panther

I think this achieves what you're describing.

    //Setup
    imageView.image = myImage;
    imageView.frame = halfTheScreen;
    imageView.clipsToBounds = YES;
    imageView.contentMode = UIViewContentModeTop;
    
    //To animate
    [UIView animateWithDuration:duration animations:^{
        imageView.frame = entireScreen;
    }];

[Panther]

Just change the content mode in my snippet to UIViewContentModeCenter and make your image the same size as the image view's final size. The diagram was very helpful, by the way.