Animating a UIImage or UIImageView?

Question

I'm trying to animate an image's height (from height of 0 pixels to 480 pixels) to create the effect of the image being rendered top-down.

With an UIImageView i noticed that it appears correct in the Interface Builder. But when it runs in the simulator the size (width and height) is always set to whatever the size of the image is; meaning, if I set the height of the image view to be 50% the original height, the image is still rendered in full height.

I also tried do this effect with an UIImage. However, although the size of the image appears correct, the image is scaled to reflect the size/aspect-ratio.

Question: How can i achieve this dynamic sizing (i.e. animation of an image's size) while NOT scaling the image? I thought about using CGImageCreateWithMask, but im pretty sure that would create huge performance hiccups.

* Update *

The effect that im looking for is this: Animate an image by making it grow in height, from to-down (like a set of blinds being pulled on a window). This image cannot be scaled (as it would lose the visual effect of looking like a "blind"). This image must also be rendered on top of another image. So there are 2 images total.

* ANSWER *

For the top-most imageview, i set the content mode to Top (so it doesnt scale). Then in code, i set the clipsToBounds to True. Now i am able to animate the top-most imageview height thus giving me the effect i am looking for.

Answer 1

Use an animation block like so:

imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 0)];
imageView.image = ...;
[imageView setClipsToBounds:YES];
[imageView setContentMode:UIViewContentModeTop];

[self.view addSubview:imageView];
[imageView release];

[UIView animateWithDuration:4.0f
                      delay:1.0f
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^(void) {
                     imageView.frame = CGRectMake(0, 0, 320, 480);
                 }
                 completion:NULL];

Answer 2

You may want to check out Animation Blocks. They're documented quite thoroughly here:

http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html

All the code there is relevant, because UIImageView is a subclass of UIView.

Happy coding.

Answer 3

Just a suggestion, assume you have two images: A and X (the X-ray image):

+-------+               +-------+
|       |               |       |
|       |               |       |
|   A   |               |   X   |
|       |               |       |
|       |               |       |
+-------+               +-------+

Dynamically you can create a one-pixel high image (temp), copy the content from X partially, put it on top of A:

+-------+   +-------+   +-------+
|       |   | temp1 | < |       |
|       |   +-------+   |       |
|   A   |               |   X   |
|       |               |       |
|       |               |       |
+-------+               +-------+

In a loop, dynamically create/resize the temp image, and copy more content from X:

+-------+   +-------+   +-------+
|       |   | temp2 | < |       |
|       |   |       |   |       |
|   A   |   +-------+   |   X   |
|       |               |       |
|       |               |       |
+-------+               +-------+

+-------+   +-------+   +-------+
|       |   | temp3 | < |       |
|       |   |       |   |       |
|   A   |   |       |   |   X   |
|       |   +-------+   |       |
|       |               |       |
+-------+               +-------+
+-------+   +-------+   +-------+
|       |   | temp4 | < |       |
|       |   |       |   |       |
|   A   |   |       |   |   X   |
|       |   |       |   |       |
|       |   +-------+   |       |
+-------+               +-------+

+-------+   +-------+   +-------+
|       |   | tempX | < |       |
|       |   |       |   |       |
|   A   |   |       |   |   X   |
|       |   |       |   |       |
|       |   |       |   |       |
+-------+   +-------+   +-------+

Answer 4

As mentioned in the original post, here is the answer i seem to have stumbled upon:

For the top-most imageview, i set the content mode to Top (so it doesnt scale). Then in code, i set the clipsToBounds to True. Now i am able to animate the top-most imageview height thus giving me the effect i am looking for.

Answer 5

Try set your UIImageView's contentMode property to one of the following value. I think what you need is UIViewContentModeScaleAspectFit:

typedef enum {
    UIViewContentModeScaleToFill,
    UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
    UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
    UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
    UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
} UIViewContentMode;

Answer 6

You should have a look on Flip Clock for iPad tutorial. It is with core animation, hence has a performance bonus.